{namespace neos=Neos\Neos\ViewHelpers}

<f:layout name="Default" />

<f:section name="Content">
    <div data-toubiz-events
         class="tb-event-list">

         <header class="tb-event-list__header">
            <h2 class="tb-event-list__title">{f:translate(id: 'views.events.index.title', package: 'Newland.Toubiz.Events.Neos')}</h2>
            <div class="tb-event-list__date"
                 data-toubiz-event-datepicker-trigger>
    
                <h3>
                    <span class="active"
                          data-toubiz-event-date-label>{f:translate(id: 'views.events.index.today', package: 'Newland.Toubiz.Events.Neos')}</span>
                          <svg class="c-icon" aria-hidden="true">
                              <use xlink:href="#tb-event-angle-down" />
                          </svg>
                      </h3>
                      <input data-toubiz-event-datepicker
                             data-toubiz-event-datepicker-previous-month="{f:translate(id: 'views.events.index.datepicker.previousMonth', package: 'Newland.Toubiz.Events.Neos')}"
                             data-toubiz-event-datepicker-next-month="{f:translate(id: 'views.events.index.datepicker.nextMonth', package: 'Newland.Toubiz.Events.Neos')}"
                             data-toubiz-event-datepicker-months="{f:translate(id: 'views.events.index.datepicker.months', package: 'Newland.Toubiz.Events.Neos')}"
                             data-toubiz-event-datepicker-weekdays="{f:translate(id: 'views.events.index.datepicker.weekdays', package: 'Newland.Toubiz.Events.Neos')}"
                             data-toubiz-event-datepicker-weekdays-short="{f:translate(id: 'views.events.index.datepicker.weekdaysShort', package: 'Newland.Toubiz.Events.Neos')}">
            </div>
            <f:comment>
                <!-- 
                    The category selection part is deactivated 
                    for now.
                -->
            </f:comment>
            <!-- <div class="tb-event-list__select-category">
                <select>
                    <option value="all">Alle Kategorien</option>
                    <option value="categoryA">Kategorie A</option>
                    <option value="categoryB">Kategorie B</option>
                    <option value="categoryC">Kategorie C</option>
                    <option value="categoryD">Kategorie D</option>
                    <option value="categoryE">Kategorie E</option>
                    <option value="categoryF">Kategorie F</option>
                </select>
                <svg class="c-icon" aria-hidden="true">
                    <use xlink:href="#tb-event-angle-down" />
                </svg>
            </div> -->
        </header>
        <f:if condition="{events}">
            <f:then>
                <div class="tb-event-list__body"
                     data-toubiz-event-list
                     data-toubiz-event-list-loading="true">
                
                    <ul data-toubiz-event-list-container>
                        <f:for each="{events}" as="event" iteration="iterator">
                            <f:render partial="Events/ListItem"
                                    arguments="{
                                        event: event,
                                        targetNode: documentNode,
                                        index: iterator.index,
                                        currentDate: currentDate
                                    }"
                            />
                        </f:for>
                    </ul>
                    <svg class="tb-event-list__load-spinner" width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
                        <g fill="none" fill-rule="evenodd" stroke-width="2">
                            <circle cx="22" cy="22" r="1">
                                <animate attributeName="r"
                                    begin="0s" dur="1.8s"
                                    values="1; 20"
                                    calcMode="spline"
                                    keyTimes="0; 1"
                                    keySplines="0.165, 0.84, 0.44, 1"
                                    repeatCount="indefinite" />
                                <animate attributeName="stroke-opacity"
                                    begin="0s" dur="1.8s"
                                    values="1; 0"
                                    calcMode="spline"
                                    keyTimes="0; 1"
                                    keySplines="0.3, 0.61, 0.355, 1"
                                    repeatCount="indefinite" />
                            </circle>
                            <circle cx="22" cy="22" r="1">
                                <animate attributeName="r"
                                    begin="-0.9s" dur="1.8s"
                                    values="1; 20"
                                    calcMode="spline"
                                    keyTimes="0; 1"
                                    keySplines="0.165, 0.84, 0.44, 1"
                                    repeatCount="indefinite" />
                                <animate attributeName="stroke-opacity"
                                    begin="-0.9s" dur="1.8s"
                                    values="1; 0"
                                    calcMode="spline"
                                    keyTimes="0; 1"
                                    keySplines="0.3, 0.61, 0.355, 1"
                                    repeatCount="indefinite" />
                            </circle>
                        </g>
                    </svg>
                </div>
            </f:then>

            <f:else>
                <p class="text-center mt-4">
                    {f:translate(id: 'views.events.index.noEventsFound', package: 'Newland.Toubiz.Events.Neos')}
                </p>
            </f:else>
        </f:if>
    </div>

    <f:if condition="{highlightEvents}">
        <div class="mt-10">
            <h2 class="text-center">
                <f:translate id="nextHighlights.title"
                            package="Newland.Toubiz.Events.Neos"
                            source="Views/Events/Index" />

            </h2>

            <ul class="o-grid o-grid--thirds">
                <f:for each="{highlightEvents}" as="event">
                    <li class="o-grid__item">
                        <f:render partial="Events/CardItem"
                                arguments="{
                                    event: event,
                                    targetNode: documentNode,
                                    currentDate: currentDate
                                }" />

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

    <script type="text/template" id="js-tb-event-detail-uri">
        <f:uri.action
            action="index"
            arguments="{year: '__year', month: '__month', day: '__day'}"
            absolute="TRUE"
        />
    </script>
</f:section>