{% extends "@ibexadesign/pagelayout.html.twig" %}
{% block headerimage %}
    <div class="image-wrapper">
        <picture>
            {% if not ibexa_field_is_empty( content, 'mainimage' ) %}
                {{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"mainimage").destinationContentId, 'viewType': 'embed', 'noLayout': true, 'params': {'alias': 'zuk_full_screen_width_full', 'minimalMarkup': 'true', 'srcmedia': 'min-width: 768px'}} ) ) }}
            {% endif %}
            {% if not ibexa_field_is_empty( content, 'mainimage_small' ) %}
                <img src="{% apply spaceless %}{{ render( controller( "ibexa_content:viewAction", {'contentId': ibexa_field_value(content,"mainimage_small").destinationContentId, 'viewType': 'embed', 'noLayout': true, 'params': {'alias': 'zuk_full_screen_width_small', 'minimalMarkup': 'true','backgroundimage':true}} ) ) }}{% endapply %}">
            {% endif %}
        </picture>
    </div>
    {% if not ibexa_field_is_empty( content, 'short_name' ) %}
        <div class="text-wrapper mw-default text-white">
            <h2 class="text-white text-left mt-5">{{ ibexa_field_value(content, 'short_name') }}</h2>
        </div>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="ce-text m-default mw-default mb-2">
        <h1 class="mw-default text-center mt-5">
            {{ ibexa_field_value(content, 'name') }}
        </h1>
        {{ ibexa_render_field(content, 'description') }}
        <div class="ce-filter" id="veranstaltungsfilter">
            <div class="filter my-5">
                {{ form_start( eventform, {'class': 'form-search'} ) }}
                <div class="row g-2 align-items-center">
                    <div class="col-12 mt-2 d-inline-block ps-1 pe-1">
                        <label><small>Suchbegriff</small></label>
                        <div class="input-group">
                            {{ form_widget( eventform.searchText, { 'attr': {'class': 'form-control border-white'}} ) }}
                            <button class="btn btn-white p-2" type="submit">
                                <i class="far fa-fw fa-search"></i><span class="visually-hidden">Suchen</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row g-2 align-items-end d-flex">
                    <div class="col-12 col-md-auto mt-2 ps-1 pe-1">
                        <label><small>von</small></label>
                        <div class="input-group">
                            {{ form_widget( eventform.searchDateBegin, { 'attr': {'class': 'form-control btn btn-secondary ps-1 pe-1 text-start'}} ) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-auto mt-2 ps-1 pe-1">
                        <label><small>bis</small></label>
                        <div class="input-group">
                            {{ form_widget( eventform.searchDateEnd, { 'attr': {'class': 'form-control btn btn-secondary ps-1 pe-1 text-start'}} ) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-auto mt-2 ps-1 pe-1 ">
                        <div class="input-group">
                            {{ form_widget( eventform.categoryZielgruppe, { 'attr': {'class': 'form-select btn btn-secondary ps-1 pe-1 text-start'}} ) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-auto flex-grow-1  mt-2 ps-1 pe-1 text-start">
                        <div class="input-group">
                            {{ form_widget( eventform.categoryThemen, { 'attr': {'class': 'form-select btn btn-secondary ps-1 pe-1 text-start'}} ) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-auto mt-2 ps-1 pe-1">
                        <div class=" input-group">
                    <button class="btn btn-secondary ps-1 pe-1" type="submit">
                        <i class="far fa-fw fa-search"></i>&nbsp;Filtern
                        </button>
                        </div>
                    </div>
                </div>
                {{ form_end( eventform, {'class': 'form-search'} ) }}
                <div class="selected-filter my-4">
                    <a href="javascript:window.location.href='{{ absolute_url(path( "ibexa.url.alias", {"locationId": 52349 } )) }}#veranstaltungsfilter'" class="btn btn-outline-dark box-shadow-0">{{ 'zuk.event.filterReset'|trans }} <i class="far fa-times"></i></a>
                </div>
            </div>
        </div>
        <div class="ce-text">
        {% if searchText != "" %}
            <script>
                document.addEventListener("DOMContentLoaded", function(event) {
                    if(document.getElementById("veranstaltungsfilter")){
                        location.href = "#veranstaltungsfilter"
                    }
                });
            </script>
            {% if events.count > 0 %}
            <h2 class="mw-default text-center">
                <span class="subtitle">{{ 'zuk.event.serachresultsTitle'|trans }}</span>
                {{ 'zuk.event.searchFound'|trans({'%1':searchText}) }}
            </h2>
            {% include "@ibexadesign/events/latest_events.html.twig" with {'eventList': events, 'lgrows': 4} %}
            {% else %}
            <h2 class="mw-default text-center">
                <span class="subtitle">{{ 'zuk.event.serachresultsTitle'|trans }}</span>
                {{ 'zuk.event.searchNotFound'|trans({'%1':searchText}) }}
            </h2>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-2 g-md-4 justify-content-center m-default">
                    <div class="col-12">
            <a href="{{ path( "ibexa.url.alias", {"locationId": 52349 } ) }}" class="link-underlined fs-4">{{ 'zuk.event.all'|trans }}</a>
                    </div>
            </div>
        </div>
         {% endif %}
        {% else %}
            {% set string = "Filter nach " %}
            {% set found = false  %}
            {%  if eventform.vars.value.searchDateBegin %}
                {% set found = true %}
                {% set string = string ~ 'Startdatum, ' %}
            {% endif %}
            {%  if eventform.vars.value.searchDateEnd %}
                {% set found = true %}
                {% set string = string ~ 'Enddatum, ' %}
            {% endif %}
            {%  if eventform.vars.value.categoryThemen %}
                {% set found = true %}
                {% set string = string ~ 'Themen-Kategorie, ' %}
            {% endif %}
            {%  if eventform.vars.value.categoryZielgruppe %}
                {% set found = true %}
                {% set string = string ~ 'Zielgruppe, ' %}
            {% endif %}
            {% if found %}
        <script>
            document.addEventListener("DOMContentLoaded", function(event) {
                if(document.getElementById("veranstaltungsfilter")){
                    location.href = "#veranstaltungsfilter"
                }
            });
        </script>
        
            <h3 class="mw-default text-center">
                {{string|trim|trim(',') }}
                {% if events.totalCount == 0 %}
                    <span class="subtitle">{{ 'zuk.event.searchFilterNotFound'|trans }}</span>
                {% endif %}
            </h3>
            {% endif %}
            {% include "@ibexadesign/events/latest_events.html.twig" with {'eventList': events, 'lgrows': 4} %}
     {% endif %}
    </div>

{% endblock %}