q-page.admin-terminal
.row.q-pa-md.items-center
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-linux-terminal-animated.svg')
.col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.terminal.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.terminal.subtitle') }}
.col-auto.flex
q-btn.acrylic-btn.q-mr-sm(
v-if='!state.connected || state.connecting'
flat
icon='las la-link'
:label='t(`admin.terminal.connect`)'
color='positive'
@click='connect'
:loading='state.connecting'
:disabled='state.connecting'
)
q-btn.acrylic-btn.q-mr-sm(
v-else
flat
icon='las la-unlink'
:label='t(`admin.terminal.disconnect`)'
color='negative'
@click='disconnect'
)
q-btn.acrylic-btn.q-mr-md(
flat
icon='las la-ban'
:label='t(`admin.terminal.clear`)'
color='primary'
@click='clearTerminal'
)
q-separator.q-mr-md(vertical)
q-btn.q-mr-sm.acrylic-btn(
icon='las la-question-circle'
flat
color='grey'
:href='siteStore.docsBase + `/admin/terminal`'
target='_blank'
type='a'
)
q-separator(inset)
.q-pa-md.q-gutter-md
q-card
.admin-terminal-term(ref='termDiv')