span
v-dialog(v-model='openMediaDetails' :fullscreen="$vuetify.breakpoint.xsOnly" width='1000px')
v-card
v-card-title {{$t('common.media')}}
v-card-text
v-row.mt-1
v-col#focalPointSelector(
@mousedown='handleStart' @touchstart='handleStart'
@mousemove='handleMove' @touchmove='handleMove'
@mouseup='handleStop' @touchend='handleStop'
)
div.focalPoint(:style="{ top, left }")
img(v-if='mediaPreview' :src='mediaPreview')
v-col.col-12.col-sm-4
p {{$t('event.choose_focal_point')}}
img.mediaPreview.d-none.d-sm-block(v-if='mediaPreview'
:src='mediaPreview' :style="{ 'object-position': position }")
v-textarea.mt-4(type='text'
label='Alternative text'
persistent-hint
@input='v => name=v'
:value='value.name' filled
:hint='$t("event.alt_text_description")')
br
v-card-actions.justify-space-between
v-btn(text @click='openMediaDetails=false' color='warning') Cancel
v-btn(text color='primary' @click='save') Save
h3.mb-3.font-weight-regular(v-if='mediaPreview') {{$t('common.media')}}
v-card-actions(v-if='mediaPreview')
v-switch.ml-3.mt-0.pt-0(v-model='showPreview' inset :label="$t('common.show_preview')" hide-details)
v-spacer
v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
v-btn(text color='error' @click='remove') {{$t('common.remove')}}
div.col-12.pt-0(v-if='mediaPreview')
img.col-12.pa-0(:src='mediaPreview' v-if='!showPreview')
img.col-12.mediaPreview.pa-0(:src='mediaPreview' v-else :style="{ 'object-position': savedPosition }")
span.text-center {{event.media[0].name}}
v-file-input(
v-else
:label="$t('common.media')"
:hint="$t('event.media_description')"
:prepend-icon="mdiCamera"
:value='value.image'
@change="selectMedia"
persistent-hint
accept='image/*')