{% extends no_layout is defined and no_layout == true ? view_base_layout : "@ibexadesign/pagelayout.html.twig" %}
{% block content %}
    <div class="content-view-full class-folder">
        <div class="border-box">
            <h1>{{ ibexa_field_value( content,'name') }}</h1>
            {% if content.fields['description'] is defined and not ibexa_field_is_empty( content, 'description' ) %}
                {{ ibexa_render_field( content,'description') }}
            {% endif %}
        </div>
        {% if content.fields['related_content'] is defined and not ibexa_field_is_empty( content, 'related_content' ) %}
            {% if not ibexa_field_is_empty( content, 'headline_related_content' ) %}
                <h3>
                    {{ ibexa_field_value( content,'headline_related_content') }}
                </h3>
            {% endif %}
            <div class="container pt-2 pb-2 pr-md-0">
                <div class="row">
                    {% for contentId in ibexa_field_value(content,"related_content").destinationContentIds %}
                        {{ render( controller( "ibexa_content:viewAction", {'contentId': contentId, 'viewType': 'teaser','params': {"fullDesign": true,"colWidth": 4, "hideImage": false, "equalHeight": true}} ) ) }}
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
    {% if content.fields['show_children'] is defined and ibexa_field_value( content, "show_children" ) == "1" and pagerSearch is defined %}
        {% for item in pagerSearch %}
            {{ ibexa_render(item, {'viewType': 'line'}) }}
        {% endfor %}
        {% if not isPreview is defined and pagerSearch.haveToPaginate() %}
            <div class="border-box pagenavigator clearfix">
                <div class="pagination-centered">
                    {{ pagerfanta( pagerSearch, 'twitter_bootstrap4', {'prev_message': 'previous'|trans({}, 'pagination'), 'next_message': 'next'|trans({},'pagination') } ) }}
                </div>
            </div>
        {% endif %}
    {% endif %}
    <div class="ce-filter" id="veranstaltungsfilter">
        <div class="filter my-5">
            {{ form_start( eventform, {'class': 'form-search'} ) }}
            <div class="align-items-center">
                <div class="col-12 mt-2 d-inline-block pl-0 pr-1">
                    <label><small>Suchbegriff</small></label>
                    <div class="input-group">
                        {{ form_widget( eventform.searchText, { 'attr': {'class': 'form-control'}} ) }}
                        <button class="btn btn-primary ml-2 pl-2 pr-2" type="submit">
                            <i class="fas fa-search"></i><span class="visually-hidden">&nbsp;Suchen</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="align-items-md-end d-md-flex">
                <div class="col-12 col-md-auto mt-2 pl-0 pr-1">
                    <label><small>von</small></label>
                    <div class="input-group">
                        {{ form_widget( eventform.searchDateBegin, { 'attr': {'class': 'form-control  btn btn-primary pl-1 pr-1 text-left'}} ) }}
                    </div>
                </div>
                <div class="col-12 col-md-auto mt-2 pl-1 pr-1">
                    <label><small>bis</small></label>
                    <div class="input-group">
                        {{ form_widget( eventform.searchDateEnd, { 'attr': {'class': 'form-control btn btn-primary pl-1 pr-1 text-left'}} ) }}
                    </div>
                </div>
                <div class="col-12 col-md-auto mt-2 pl-1 pr-1 ">
                    <div class="input-group">
                        {{ form_widget( eventform.categoryZielgruppe, { 'attr': {'class': 'form-control form-select  btn btn-primary pl-1 pr-1 text-left'}} ) }}
                    </div>
                </div>
                <div class="col-12 col-md-auto mt-2 pl-1 pr-1">
                    <div class="input-group">
                        {{ form_widget( eventform.categoryThemen, { 'attr': {'class': 'form-control form-select  btn btn-primary  pl-1 pr-1 text-left'}} ) }}
                    </div>
                </div>
                <div class="col-12 col-md-auto mt-2 pl-1 pr-1">
                    <div class=" input-group">
                        <button class="btn btn-secondary pl-1 pr-1" type="submit">
                            <i class="fas 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", {"contentId": 73360 } )) }}#veranstaltungsfilter'" class="btn btn-primary box-shadow-0">{{ 'zuk.event.filterReset'|trans }} <i class="text-white fa fa-times"></i></a>
            </div>
        </div>
    </div>
    {% 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">
                {{ 'zuk.event.serachresultsTitle'|trans }}: {{ '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">
                {{ 'zuk.event.serachresultsTitle'|trans }}:   {{ 'zuk.event.searchNotFound'|trans({'%1':searchText}) }}
            </h2>
            <div class="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", {"contentId": 73360 } ) }}" 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 mb-2">
                {{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 %}
{% endblock %}