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

<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">
    <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">
                <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:for>
        </f:if>
    </f:for>
</button>

<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>
