v-col(cols=12)
.text-center
v-btn-toggle.flex-wrap.flex-row(v-if="!event.parentId && !event.recurrent" v-model='type' color='primary' @change='type => change("type", type)')
v-btn(value='normal' label="normal") {{ $t('event.normal') }}
v-btn(v-if='settings.allow_multidate_event' 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'
:is-range='type === "multidate"'
@input="date => change('date', date)"
:attributes='attributes'
:locale='$i18n.locale'
:is-dark="is_dark"
is-inline
is-expanded
:min-date='!$auth?.user?.is_admin && new Date()')
v-col.calh.mx-auto(slot='placeholder')
v-progress-circular(indeterminate color='primary')
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="value.fromHour"
max-width="290px"
min-width="290px"
transition="scale-transition")
template(v-slot:activator="{ on, attrs }")
v-text-field(
clearable
:clear-icon='mdiClose'
@click:clear='() => change("fromHour")'
:label="$t('event.from')"
:value="$time.formatHour(value.fromHour)"
:disabled='!value.from'
readonly
:prepend-icon="mdiClockTimeFourOutline"
:rules="[$validators.required('event.from')]"
v-bind="attrs"
v-on="on")
v-time-picker(
v-if="menuFromHour"
:value="value.fromHour"
:allowedMinutes='allowedMinutes'
full-width
:format='$time.timeFormat()'
@click:minute='menuFromHour = false'
@input='hr => change("fromHour", hr)')
v-col.col-12.col-sm-6
v-menu(
v-model="menuDueHour"
:close-on-content-click="false"
offset-y
max-width="290px"
min-width="290px"
:value="value.dueHour"
transition="scale-transition")
template(v-slot:activator="{ on, attrs }")
v-text-field(
clearable
:clear-icon='mdiClose'
@click:clear='() => change("dueHour")'
:label="$t('event.due')"
:value="$time.formatHour(value.dueHour)"
:disabled='!value.fromHour'
readonly
:prepend-icon="mdiClockTimeEightOutline"
:rules="[settings.allow_event_without_end_time ? true : $validators.required('event.due')]"
v-bind="attrs"
v-on="on")
v-time-picker(
v-if="menuDueHour"
:value="value.dueHour"
full-width
:allowedMinutes='allowedMinutes'
:format='$time.timeFormat()'
@click:minute='menuDueHour = false'
@input='hr => change("dueHour", hr)')
List(v-if='type === "normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')