{namespace media=Neos\Media\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<div class="c-player__container">
    <div class="c-audio-player__image">
        <f:if condition="{neos:rendering.inBackend()}">
            <f:then>
                <f:if condition="{image}">
                    <f:then>
                        <img src="{neos.media:uri.image(image: image)}"
                            alt="{alternativeText}"
                            class="c-audio-player__image">
                    </f:then>
                    <f:else>
                        <svg class="c-icon" style="fill:#D7DCE3">
                            <use xlink:href="#volume-high"></use>
                        </svg>
                    </f:else>
                </f:if>
            </f:then>
            <f:else>
                <f:if condition="{image}">
                    <f:then>
                        <img data-src="{neos.media:uri.image(image: image)}"
                            alt="{alternativeText}"
                            class="c-audio-player__image lazyload">
                        <noscript>
                            <img src="{neos.media:uri.image(image: image)}"
                                alt="{alternativeText}"
                                class="c-audio-player__image"
                                loading="lazy">
                        </noscript>
                    </f:then>
                    <f:else>
                        <svg class="c-icon" style="fill:#D7DCE3">
                            <use xlink:href="#volume-high"></use>
                        </svg>
                    </f:else>
                </f:if>
            </f:else>
        </f:if>
    </div>

    <div class="c-audio-player__container o-container o-container--xs {marginTop}">
        <div class="c-audio-player__details">
            <f:if condition="{neos:rendering.inBackend()}">
                <f:then>
                    {neos:contentElement.editable(property: 'headline', class: 'c-audio-player__headline', tag: 'h2')}
                    {neos:contentElement.editable(property: 'subline', class: 'c-audio-player__subline', tag: 'p')}
                </f:then>
                <f:else>
                    <f:if condition="{headline -> vh:string.notEmpty()}">
                        {neos:contentElement.editable(property: 'headline', class: 'c-audio-player__headline', tag: 'h2')}
                    </f:if>
                    <f:if condition="{subline -> vh:string.notEmpty()}">
                        {neos:contentElement.editable(property: 'subline', class: 'c-audio-player__subline', tag: 'p')}
                    </f:if>
                </f:else>
            </f:if>
        </div>
        <f:if condition="{media}">
            <f:then>
                <f:if condition="{mediaType} == 'audio'">
                    <div class="c-audio-player">
                        <div class="c-audio-player__bg-image">
                            <img src="{f:uri.resource(path: 'Images/audio-grafik.png', package: 'Newland.CityTheme')}">
                        </div>
                        <div class="c-audio-player__player" tab-index="0">
                            <audio class='js-player' playsinline preload="metadata">
                                <source src="{f:uri.resource(resource: media.resource)}" type="audio/mp3">
                            </audio> 
                            <div class="controls">
                                <div class="rewind">
                                    <svg class="c-icon">
                                        <use xlink:href="#icon-rewind"></use>
                                    </svg>
                                </div>
                                <div class="play-container">
                                    <div class="toggle-play play"></div>
                                </div>
                                <div class="forward">
                                    <svg class="c-icon">
                                        <use xlink:href="#icon-forward"></use>
                                    </svg>
                                </div>
                    
                                <div class="time">
                                    <div class="current">0:00</div>
                                    <div class="divider">/</div>
                                    <div class="length"></div>
                                </div>
                                <div class="timeline">
                                    <div class="progress"></div>
                                </div>
                                <div class="volume-container">
                                    <div class="volume-button">
                                        <svg class="c-icon unmute-icon">
                                            <use xlink:href="#volume-high"></use>
                                        </svg>
                                        <svg class="c-icon mute-icon">
                                            <use xlink:href="#volume-xmark"></use>
                                        </svg>
                                    </div>
                                    <div class="volume-slider">
                                        <div class="volume-percentage"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </f:if>
            </f:then>
            <f:else>
                <f:if condition="{neos:rendering.inBackend()}">
                    <p class="text-center bg-yellow-lightest p-4">
                        Bitte nutzen Sie das Feld <strong>Media</strong> im Inspector um eine neue Sounddatei hochzuladen oder eine vorhandene auszuwählen.
                    </p>
                </f:if>
            </f:else>
        </f:if>
    </div>
</div>