q-page.admin-locale
.row.q-pa-md.items-center
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-language.svg')
.col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.locale.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.locale.subtitle') }}
.col-auto.flex
q-btn.q-mr-md(
icon='las la-download'
:label='t(`admin.locale.downloadNew`)'
unelevated
color='primary'
:disabled='state.loading > 0'
@click='installNewLocale'
)
q-separator.q-mr-md(vertical)
q-btn.q-mr-sm.acrylic-btn(
icon='las la-question-circle'
flat
color='grey'
href='https://docs.js.wiki/admin/locale'
target='_blank'
type='a'
)
q-btn.q-mr-sm.acrylic-btn(
icon='las la-redo-alt'
flat
color='secondary'
:loading='state.loading > 0'
@click='load'
)
q-btn(
unelevated
icon='fa-solid fa-check'
:label='t(`common.actions.apply`)'
color='secondary'
@click='save'
:disabled='state.loading > 0'
)
q-separator(inset)
.row.q-pa-md.q-col-gutter-md
.col-7
//- -----------------------
//- Locale Options
//- -----------------------
q-card.shadow-1.q-pb-sm
q-card-section
.text-subtitle1 {{t('admin.locale.settings')}}
q-item
blueprint-icon(icon='translation')
q-item-section
q-item-label {{state.namespacing ? t(`admin.locale.base.labelWithNS`) : t(`admin.locale.base.label`)}}
q-item-label(caption) {{t(`admin.locale.base.hint`)}}
q-item-section
q-select(
outlined
v-model='state.selectedLocale'
:options='installedLocales'
option-value='code'
option-label='name'
emit-value
map-options
dense
:aria-label='t(`admin.locale.base.label`)'
)
q-separator.q-my-sm(inset)
q-item(tag='label', v-ripple)
blueprint-icon(icon='unit')
q-item-section
q-item-label {{t(`admin.locale.namespaces.label`)}}
q-item-label(caption) {{t(`admin.locale.namespaces.hint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.namespacing'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.locale.namespaces.label`)'
)
q-item
q-item-section
q-card.bg-info.text-white.rounded-borders(flat)
q-card-section.items-center(horizontal)
q-card-section.col-auto.q-pr-none
q-icon(name='las la-info-circle', size='sm')
q-card-section
span {{ t('admin.locale.namespacingPrefixWarning.title', { langCode: state.selectedLocale }) }}
.text-caption.text-yellow-1 {{ t('admin.locale.namespacingPrefixWarning.subtitle') }}
.col-5
//- -----------------------
//- Namespacing
//- -----------------------
q-card.shadow-1.q-pb-sm(v-if='state.namespacing')
q-card-section
.text-subtitle1 {{t('admin.locale.activeNamespaces')}}
q-item(
v-for='(lc, idx) of installedLocales'
:key='lc.code'
:tag='lc.code !== state.selectedLocale ? `label` : null'
)
blueprint-icon(:text='lc.code')
q-item-section
q-item-label {{lc.name}}
q-item-label(caption) {{lc.nativeName}}
q-item-section(avatar)
q-toggle(
:disable='lc.code === state.selectedLocale'
v-model='state.namespaces'
:val='lc.code'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='lc.name'
)
//- q-separator.q-my-sm(inset)
//- q-item
//- blueprint-icon(icon='test-passed')
//- q-item-section
//- q-item-label {{t(`admin.locale.activeNamespaces.label`)}}
//- q-item-label(caption) {{t(`admin.locale.activeNamespaces.hint`)}}
//- q-item-section
//- q-select(
//- outlined
//- :disable='!namespacing'
//- v-model='namespaces'
//- :options='installedLocales'
//- multiple
//- use-chips
//- option-value='code'
//- option-label='name'
//- emit-value
//- map-options
//- dense
//- :aria-label='t(`admin.locale.activeNamespaces.label`)'
//- )