q-page.admin-extensions
.row.q-pa-md.items-center
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-module.svg')
.col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.extensions.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.extensions.subtitle') }}
.col-auto
q-btn.acrylic-btn.q-mr-sm(
icon='las la-question-circle'
flat
color='grey'
:aria-label='t(`common.actions.viewDocs`)'
:href='siteStore.docsBase + `/system/extensions`'
target='_blank'
type='a'
)
q-tooltip {{ t(`common.actions.viewDocs`) }}
q-btn.acrylic-btn(
icon='las la-redo-alt'
flat
color='secondary'
:loading='state.loading > 0'
:aria-label='t(`common.actions.refresh`)'
@click='load'
)
q-tooltip {{ t(`common.actions.refresh`) }}
q-separator(inset)
.row.q-pa-md.q-col-gutter-md
.col-12
q-card
q-list(separator)
q-item(
v-for='ext of state.extensions'
:key='`ext-` + ext.key'
)
blueprint-icon(icon='module')
q-item-section
q-item-label {{ext.title}}
q-item-label(caption) {{ext.description}}
q-item-section(side)
.row
q-btn-group(unelevated)
q-btn(
icon='las la-check'
size='sm'
color='positive'
padding='xs sm'
v-if='ext.isInstalled'
:ripple='false'
)
q-tooltip(
anchor='center left'
self='center right'
) {{t('admin.extensions.installed')}}
q-btn(
:label='t(`admin.extensions.install`)'
color='blue-7'
v-if='ext.isCompatible && !ext.isInstalled && ext.isInstallable'
@click='install(ext)'
no-caps
)
q-btn(
v-else-if='ext.isCompatible && ext.isInstalled && ext.isInstallable'
:label='t(`admin.extensions.reinstall`)'
color='blue-7'
@click='install(ext)'
no-caps
)
q-btn(
v-else-if='ext.isCompatible && ext.isInstalled && !ext.isInstallable'
:label='t(`admin.extensions.installed`)'
color='positive'
no-caps
:ripple='false'
)
q-btn(
v-else-if='ext.isCompatible'
:label='t(`admin.extensions.instructions`)'
icon='las la-info-circle'
color='indigo'
outline
type='a'
:href='`https://docs.js.wiki/admin/extensions/` + ext.key'
target='_blank'
no-caps
)
q-tooltip(
anchor='center left'
self='center right'
) {{t('admin.extensions.instructionsHint')}}
q-btn(
v-else
color='negative'
outline
:label='t(`admin.extensions.incompatible`)'
no-caps
:ripple='false'
)