q-dialog(ref='dialogRef', @hide='onDialogHide', persistent)
q-card(style='min-width: 650px;')
q-card-section.card-header
q-icon(name='img:/_assets/icons/fluent-add-key.svg', left, size='sm')
span {{t(`profile.passkeysAdd`)}}
.q-py-sm
.text-body2.q-px-md.q-py-sm {{t(`profile.passkeysNameHint`)}}
q-item
blueprint-icon(icon='key')
q-item-section
q-input(
outlined
v-model='state.name'
dense
hide-bottom-space
:label='t(`profile.passkeysName`)'
:aria-label='t(`profile.passkeysName`)'
autofocus
@keyup.enter='save'
)
q-card-actions.card-actions
q-space
q-btn.acrylic-btn(
flat
:label='t(`common.actions.cancel`)'
color='grey'
padding='xs md'
@click='onDialogCancel'
)
q-btn(
unelevated
:label='t(`common.actions.save`)'
color='primary'
padding='xs md'
@click='save'
)