v-col(cols=12)
.text-center
v-btn-toggle.v-col-6.flex-column.flex-sm-row(v-model='type' color='primary' @change='type => change("type", type)')
v-btn(value='normal' label="normal") {{$t('event.normal')}}
v-btn(value='multidate' label='multidate') {{$t('event.multidate')}}
v-btn(v-if='settings.allow_recurrent_event' value='recurrent' label="recurrent") {{$t('event.recurrent')}}
p {{$t(`event.${type}_description`)}}
v-btn-toggle.v-col-6.flex-column.flex-sm-row(v-if='type === "recurrent"' color='primary' :value='value.recurrent.frequency' @change='fq => change("frequency", fq)')
v-btn(v-for='f in frequencies' :key='f.value' :value='f.value') {{f.text}}
client-only
.datePicker.mt-3
v-input(:value='fromDate'
:rules="[$validators.required('common.when')]")
vc-date-picker(
:value='fromDate'
@input="date => change('date', date)"
:is-range='type === "multidate"'
:attributes='attributes'
:locale='$i18n.locale'
:from-page.sync='page'
:is-dark="settings['theme.is_dark']"
is-inline
is-expanded
:min-date='type !== "recurrent" && new Date()')
div.text-center.mb-2(v-if='type === "recurrent"')
span(v-if='value.recurrent.frequency !== "1m" && value.recurrent.frequency !== "2m"') {{whenPatterns}}
v-btn-toggle.mt-1.flex-column.flex-sm-row(v-else :value='value.recurrent.type' color='primary' @change='fq => change("recurrentType", fq)')
v-btn(v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key' small) {{whenPattern.label}}
v-row.mt-3.col-md-6.mx-auto
v-col.col-12.col-sm-6
v-menu(
v-model="menuFromHour"
:close-on-content-click="false"
offset-y
:value="fromHour"
transition="scale-transition")
template(v-slot:activator="{ on, attrs }")
v-text-field(
:label="$t('event.from')"
:value="fromHour"
:disabled='!value.from'
:prepend-icon="mdiClockTimeFourOutline"
:rules="[$validators.required('event.from')]"
readonly
v-bind="attrs"
v-on="on")
v-time-picker(
v-if="menuFromHour"
:value="fromHour"
:allowedMinutes='allowedMinutes'
format='24hr'
@click:minute='menuFromHour=false'
@change='hr => change("fromHour", hr)')
v-col.col-12.col-sm-6
v-menu(
v-model="menuDueHour"
:close-on-content-click="false"
offset-y
:value="dueHour"
transition="scale-transition")
template(v-slot:activator="{ on, attrs }")
v-text-field(
:label="$t('event.due')"
:value="dueHour"
:disabled='!fromHour'
:prepend-icon="mdiClockTimeEightOutline"
readonly
v-bind="attrs"
v-on="on")
v-time-picker(
v-if="menuDueHour"
:value="dueHour"
:allowedMinutes='allowedMinutes'
format='24hr'
@click:minute='menuDueHour=false'
@change='hr => change("dueHour", hr)')
List(v-if='type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')