material-modal(:show="modelValue" teleport="#view" @close="handleCloseModal" @after-enter="$refs.dom_input.focus()")
main(:class="$style.main")
h2 {{ $t('play_timeout') }}
div(:class="$style.content")
div(:class="[$style.row, $style.inputGroup]")
base-input(ref="dom_input" v-model="time" :class="$style.input" type="number")
p(:class="$style.inputLabel") {{ $t('play_timeout_unit') }}
div(:class="$style.row")
base-checkbox(id="play_timeout_end" :model-value="appSetting['player.waitPlayEndStop']" :label="$t('play_timeout_end')" @update:model-value="updateSetting({'player.waitPlayEndStop': $event})")
div(:class="[$style.row, $style.tip, { [$style.show]: !!timeLabel }]")
p {{ $t('play_timeout_tip', { time: timeLabel }) }}
div(:class="$style.footer")
base-btn(:class="$style.footerBtn" @click="handleCancel") {{ $t(timeLabel ? 'play_timeout_stop' : 'play_timeout_close') }}
base-btn(:class="$style.footerBtn" @click="handleConfirm") {{ $t(timeLabel ? 'play_timeout_update' : 'play_timeout_confirm') }}