span
v-dialog(v-model='openMediaDetails' max-width='1000px')
v-card
v-card-title {{$t('common.media')}}
v-card-text
v-row
v-col(:span='4' :cols='4')
p {{$t('event.choose_focal_point')}}
v-img(v-if='mediaPreview'
:src='mediaPreview'
aspect-ratio='1.7778'
: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
v-col(:span='8' :cols='8')
v-img.cursorPointer(
v-if='mediaPreview' :src='mediaPreview'
@click='selectFocal')
h3.mb-3.font-weight-regular(v-if='mediaPreview') {{$t('common.media')}}
v-card-actions(v-if='mediaPreview')
v-spacer
v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
v-btn(text color='error' @click='remove') {{$t('common.remove')}}
div(v-if='mediaPreview')
v-img.col-12.col-sm-2.ml-3(:src='mediaPreview' aspect-ratio='1.7778' :position='`${(this.value.focalpoint[0] + 1) * 50}% ${(this.value.focalpoint[1] + 1) * 50}%`')
span.float-right {{event.media[0].name}}
v-file-input(
v-else
:label="$t('common.media')"
:hint="$t('event.media_description')"
prepend-icon="mdi-camera"
:value='value.image'
@change="v => $emit('input', { image: v, focalpoint: [0, 0] })"
persistent-hint
accept='image/*')