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

<button
    class="tb-awards-detail__button tb-awards-detail mb-4"
    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 }" />
</button>

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

<f:section name="awardList">
    <ul class="tb-awards-detail__list list-reset text-left">
        <f:for each="{article.awards}" as="award">
            <li class="tb-awards-detail__list-item py-1">
                <f:if condition="{award.image}">
                    <f:then>
                        <img
                            src="{award.image}"
                            class="w-16 h-auto mr-2 tb-teaser-awards__image"
                            alt="{award.name}"
                        />
                    </f:then>
                    <f:else if="{award.value}">
                        <f:for each="{vh:collection.range(start: 1, end: award.value)}" as="num">
                            <svg class="tb-teaser-awards__icons text-yellow w-4 h-4 mr-1">
                                <use xlink:href="#icon-{award.iconName}"></use>
                            </svg>
                        </f:for>
                    </f:else>
                </f:if>
                <span class="tb-awards-detail__text">
                    {award.name}
                </span>
            </li>
        </f:for>
    </ul>
</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="{article.awards}" as="award">
                    <li class="tb-awards__list-item block">
                        <div class="flex">
                            <f:if condition="{award.image}">
                                <f:then>
                                    <img
                                        src="{award.image}"
                                        class="w-16 h-auto mr-2 tb-awards__image"
                                        alt="{award.name}"
                                    />
                                </f:then>
                                <f:else if="{award.value}">
                                    <f:for each="{vh:collection.range(start: 1, end: award.value)}" as="num">
                                        <svg class="tb-awards__icons text-yellow w-4 h-4 mr-1">
                                            <use xlink:href="#icon-{award.iconName}"></use>
                                        </svg>
                                    </f:for>
                                    <div class="mr-1"></div>
                                </f:else>
                            </f:if>
                            <strong class="tb-awards__text">
                                {award.name}
                            </strong>
                        </div>

                        <f:if condition="{award.description}">
                            <p class="mt-2">{award.description}</p>
                        </f:if>
                    </li>
                </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>