prototype(Jonnitto.PrettyEmbedVimeo:Component.Vimeo) < prototype(Neos.Fusion:Component) {
    configuration = ${Configuration.setting('Jonnitto.PrettyEmbedVimeo')}

    live = true
    videoID = ${null}
    videoID.@process.trim = ${Type.isString(value) ? String.trim(value) : value}

    lightbox = ${this.configuration.defaults.lightbox}
    preserveAspectRatio = ${this.configuration.defaults.preserveAspectRatio}
    allowFullScreen = ${this.configuration.defaults.allowFullScreen}
    loop = ${this.configuration.defaults.loop}
    color = ${this.configuration.defaults.color}
    autopause = ${this.configuration.defaults.autopause}
    background = ${this.configuration.defaults.background}
    muted = ${this.configuration.defaults.muted}
    playsinline = ${this.configuration.defaults.playsinline}
    transparent = ${this.configuration.defaults.transparent}
    previewTitle = ${this.configuration.defaults.previewTitle}
    previewByline = ${this.configuration.defaults.previewByline}
    previewPortrait = ${this.configuration.defaults.previewPortrait}
    enableGdprMessage = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.enableGdprMessage')}
    gdprMessage = Jonnitto.PrettyEmbedHelper:GdprMessage
    gdprMessageAccept = Jonnitto.PrettyEmbedHelper:GdprMessageAccept
    gdprMessageNewWindow = Jonnitto.PrettyEmbedHelper:GdprMessageNewWindow

    # Pass a ratio like this: ${16 / 9}
    ratio = ${null}
    ratio.@process.calculatePaddingTop = ${Jonnitto.PrettyEmbedHelper.paddingTop(value)}

    // If true, this get only a value if ratio is not set
    force16to9 = false
    force16to9.@process.calculatePaddingTop = ${!this.ratio && value ? Jonnitto.PrettyEmbedHelper.paddingTop(16 / 9) : false}

    wrapper = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.wrapper')}

    id = ${null}

    poster = ${null}
    poster2x = ${null}
    alternativeText = ${null}

    playButton = Jonnitto.PrettyEmbedHelper:Button.Play

    // Internal
    type = ${this.lightbox ? 'lightbox' : 'inline'}
    thumbnail = ${this.poster || Jonnitto.PrettyEmbedHelper.vimeoThumbnail(this.videoID)}
    hasRatioAndNoLightboxWithPreserveAspectRatio = ${this.lightbox && this.preserveAspectRatio ? false : !!this.ratio}
    forceRatio = ${this.ratio || this.force16to9}
    @if.hasVideoIdAndThumbnail = ${this.videoID && this.thumbnail}

    renderer = Neos.Fusion:Tag {
        tagName = ${props.live ? 'a' : 'div'}
        attributes {
            id = ${props.id}
            class = Carbon.Eel:BEM {
                block = 'jonnitto-prettyembed'
                modifier = Neos.Fusion:DataStructure {
                    vimeo = true
                    iframe = true
                    ratio = ${!!props.force16to9 || !!props.hasRatioAndNoLightboxWithPreserveAspectRatio}
                    type = ${props.type}
                }
            }
            href = ${String.replace(props.configuration.url.href, '%id%', props.videoID)}
            rel = 'noopener'
            target = '_blank'
            style = ${props.force16to9 || props.hasRatioAndNoLightboxWithPreserveAspectRatio ? 'padding-top:' + props.forceRatio : null}
            data-gdpr = ${props.enableGdprMessage && props.gdprMessage ? props.gdprMessage : null}
            data-gdpr-accept = ${props.enableGdprMessage && props.gdprMessageAccept ? props.gdprMessageAccept : null}
            data-gdpr-new-window = ${props.enableGdprMessage && props.gdprMessageNewWindow ? props.gdprMessageNewWindow : null}
            data-ratio = ${props.forceRatio || null}
            data-fs = ${!!props.allowFullScreen}
            data-embed = Neos.Fusion:Join {
                src             = ${String.replace(props.configuration.url.embed, '%id%', props.videoID)}
                connect         = ${String.indexOf(props.configuration.url.embed, '?') == -1 ? '?' : '&'}
                autoplay        = 'autoplay=1'
                loop            = ${props.loop ? '&loop=1' : ''}
                color           = ${props.color ? '&color=' + String.replace(props.color, '#', '') : ''}
                autopause       = ${props.autopause ? '' : '&autopause=0'}
                background      = ${props.background ? '' : '&background=0'}
                muted           = ${props.muted ? '&muted=1' : ''}
                playsinline     = ${props.playsinline ? '' : '&playsinline=0'}
                transparent     = ${props.transparent ? '' : '&transparent=0'}
                previewTitle    = ${props.previewTitle ? '' : '&title=0'}
                previewByline   = ${props.previewByline ? '' : '&byline=0'}
                previewPortrait = ${props.previewPortrait ? '' : '&portrait=0'}
            }
        }
        content = afx`
            {props.playButton}
            <img alt={props.alternativeText} src={props.thumbnail} srcset={props.poster && props.poster2x ? props.poster + ' 1x,' + props.poster2x + ' 2x' : null} loading='lazy' />
        `

        @process {
            assets = afx`
                <Jonnitto.PrettyEmbedHelper:Assets />
                {value}
            `
            wrapper = Jonnitto.PrettyEmbedHelper:Wrapper {
                wrapper = ${props.wrapper}
            }
        }
    }
}