{namespace tb=Newland\Toubiz\SnowReport\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<section class="tb-toggle-box tb-snowreport-service-box tb-snowreport-service-box--type-{id}" aria-labelledby="tb-toggle-box--{id}">
    <button 
        aria-haspopup="true"
        aria-expanded="{f:if(condition: open, then: 'true', else: 'false')}"
        data-target-enhancement
        data-target-enhancement-targets.0="#toggle-box-content-{id}"
        data-target-enhancement-exclusive-group="toggle-box-group"
        data-navigation-toggle-button
        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
        class="tb-toggle-box__button tb-snowreport-service-box__toggle-button">

        <h2 class="tb-toggle-box__title" id="tb-toggle-box--{id}">
            {title}
        </h2>

        <span class="tb-toggle-box__icon" aria-hidden="true">
            <svg class="c-icon">
                <use xlink:href="#tb-snowreport-icon-angle-up"></use>
            </svg>
        </span>
    </button>

    <div id="toggle-box-content-{id}"
         class="tb-toggle-box__content {f:if(condition: open, then: 'is-target')}">

        <ul class="tb-snowreport-service-status-list">
            <f:for each="{items}" as="item">
                <vh:render 
                    section="status"
                    arguments="{
                        item: item,
                        model: model
                    }" />

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


<f:section name="status">
    <li class="tb-snowreport-service-status">
        <f:if condition="{model} == 'TransportationFacility'">
            <f:then>
                <div class="tb-snowreport-service-status__icon
                            tb-snowreport-service-status__icon--status-{tb:mapping.transportationFacility.status(value: item.status)}">

                    <svg class="c-icon">
                        <use xlink:href="#tb-snowreport-icon-service-status-{tb:mapping.transportationFacility.status(value: item.status)}"></use>
                    </svg>
                </div>

                <div 
                    class="tb-snowreport-service-status__icon tb-snowreport-service-status__icon--type"
                    title="{f:translate(id: 'property.type.{item.type}', source: 'Models/{model}')}"
                    aria-hidden="true">
                    
                    <svg class="c-icon"><use xlink:href="#tb-snowreport-icon-{tb:mapping.transportationFacility.type(value: item.type)}"></use></svg>
                </div>
            </f:then>
            <f:else>
                <div class="tb-snowreport-service-status__icon
                            tb-snowreport-service-status__icon--status-{tb:mapping.slope.status(value: item.status)}">

                    <svg class="c-icon">
                        <use xlink:href="#tb-snowreport-icon-service-status-{tb:mapping.slope.status(value: item.status)}"></use>
                    </svg>
                </div>

                <div 
                    class="tb-snowreport-service-status__icon tb-snowreport-service-status__icon--type"
                    title="{f:translate(id: 'property.type.{item.type}', source: 'Models/{model}')}"
                    aria-hidden="true">
                    
                    <svg class="c-icon"><use xlink:href="#tb-snowreport-icon-{tb:mapping.slope.type(value: item.type)}"></use></svg>
                </div>
            </f:else>
        </f:if>

        <div class="tb-snowreport-service-status__name">
            <span>{item.name}</span>
        </div>
    </li>
</f:section>