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

<section class="tb-toggle-box tb-snowreport-service-box" 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-target="#toggle-box-content-{id}"
            data-target-enhancement-exclusive-group="toggle-box-group"
            data-navigation-toggle-button
            data-aria-target-enhancement
            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">
                <f:render section="status"
                          arguments="{
                              item: item,
                              model: model
                          }" />

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


<f:section name="status">
    <li class="tb-snowreport-service-status">
        <div class="tb-snowreport-service-status__icon
                    tb-snowreport-service-status__icon--status-{f:if(condition: item.isOpen, then: 'open', else: 'closed')}">

            <svg class="c-icon">
                <use xlink:href="#tb-snowreport-icon-service-status-{f:if(condition: item.isOpen, then: 'open', else: 'closed')}"></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">

            <f:if condition="{model} == 'TransportationFacility'">
                <f:then>
                    {tb:icon.transportationFacility(type: item.type) -> f:format.raw()}
                </f:then>
                <f:else>
                    {tb:icon.slope(type: item.type) -> f:format.raw()}
                </f:else>
            </f:if>
        </div>

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