{namespace neos=Neos\Neos\ViewHelpers}
{namespace poi=Newland\Toubiz\Poi\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:comment><!--
    Awards can have 2 diffent formats:
    * Single strings if only a label exists
    * An array containing `label`, `value` and `description`

    If all of the awards are the second kind, then a more involved list can be rendered, that opens details about
    the award in a modal.
--></f:comment>

<f:if condition="{poi:awards.containsSingleString(article: article)}">
    <f:then>
        <vh:render section="awardList" arguments="{ article: article }" />
    </f:then>
    <f:else>
        <vh:render section="awardsWithDescriptionModal" arguments="{ article: article }" />
    </f:else>
</f:if>

<f:section name="awardsWithDescriptionModal">
    <button
        class="tb-awards__button tb-awards"
        data-target-enhancement
        data-target-enhancement-targets.0=".tb-awards__modal, html"
        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
        aria-expanded="false">
            <vh:render section="awardList" arguments="{ article: article, awardType: awardType }" />
    </button>

    <vh:render section="awardModal" arguments="{ article: article }" />
</f:section>

<f:section name="awardList">
    <f:for each="{
            0: 'houseAwardsGeneral',
            1: 'houseAwardsAral',
            2: 'houseAwardsDehoga',
            3: 'houseAwardsFine',
            4: 'houseAwardsMichelin',
            5: 'houseAwardsMillau',
            6: 'houseAwardsVarta'
        }" as="awardType">

        <f:variable
            name="attributeCollection"
            value="{poi:collection.attributes.get(article: article, attributeName: awardType)}"
        />

        <f:if condition="{attributeCollection.hasContents}">
            <h4 class="sr-only">
                <vh:translate
                    id="property.attribute.{awardType}"
                    package="Newland.Toubiz.Poi.Neos"
                    source="Models/Article" />
            </h4>
            <f:for each="{attributeCollection}" as="award">
                <f:if condition="{award -> neos:getType()} == 'string'">
                    <f:then>
                        <div class="block">
                            • {award}
                        </div>
                    </f:then>
                    <f:else>
                        <img
                            data-src="{f:uri.resource(path: 'Images/Awards/{awardType}_{award.value}.gif', package: 'Newland.Toubiz.Poi.Neos')}"
                            alt="{award.label}"
                            title="{award.description}"
                            class="tb-awards__item lazyload">
                    </f:else>
                </f:if>

            </f:for>
        </f:if>
    </f:for>
</f:section>

<f:section name="awardModal">
    <div class="tb-awards__modal">
        <div class="o-container o-container--xs mt-10">
            <h3>Auszeichnungen</h3>

            <ul class="tb-awards__list">
                <f:for each="{
                    0: 'houseAwardsGeneral',
                    1: 'houseAwardsAral',
                    2: 'houseAwardsDehoga',
                    3: 'houseAwardsFine',
                    4: 'houseAwardsMichelin',
                    5: 'houseAwardsMillau',
                    6: 'houseAwardsVarta'
                }" as="awardType">

                    <f:variable
                        name="attributeCollection"
                        value="{poi:collection.attributes.get(article: article, attributeName: awardType)}" />

                    <f:for each="{attributeCollection}" as="award">
                        <f:if condition="{award.description}">
                            <li class="tb-awards__list-item">
                                <img
                                    data-src="{f:uri.resource(path: 'Images/Awards/{awardType}_{award.value}.gif', package: 'Newland.Toubiz.Poi.Neos')}" alt="{award.label}"
                                    title="{award.description}"
                                    class="lazyload">

                                <div class="tb-awards__list-text">
                                    {award.description}
                                </div>
                            </li>

                        </f:if>
                    </f:for>
                </f:for>
            </ul>
        </div>

        <button class="tb-button tb-button--secondary-quiet tb-awards__modal-close"
                data-target-enhancement
                data-target-enhancement-targets.0=".tb-awards__modal, html"
                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                aria-expanded="false">

            <svg class="tb-icon lg-icon"
                 aria-labelledby="tb-awards-modal-close-title"
                 focusable="false">

                <title id="tb-awards-modal-close-title">Übersicht schließen</title>
                <use xlink:href="#icon-close" />
            </svg>
        </button>
    </div>
</f:section>