{% load i18n %}
<form id="map-search">
    {% if availableFilters.people %}
        <div class="line">
            <div class="result-filter check people" data-result-type="people">
                <div class="box">
                    {% if activeFilters.people %}
                        <i class="fa fa-check"></i>
                    {% endif %}
                </div>
                <div class="check__label">{% trans "People" %}</div>
            </div>
        </div>
    {% endif %}

    {% if availableFilters.events %}
        <div class="line">
            <div class="result-filter check events" data-result-type="events">
                <div class="box">
                    {% if activeFilters.events %}
                        <i class="fa fa-check"></i>
                    {% endif %}
                </div>
                <div class="check__label">{% trans 'Events' %}</div>
            </div>
        </div>
    {% endif %}

    {% if availableFilters.projects %}
        <div class="line">
            <div class="result-filter check projects" data-result-type="projects">
                <div class="box">
                    {% if activeFilters.projects %}
                        <i class="fa fa-check"></i>
                    {% endif %}
                </div>
                <div class="check__label">{% trans 'Projects' %}</div>
            </div>
        </div>
    {% endif %}

    {% if availableFilters.groups %}
        <div class="line">
            <div class="result-filter check groups" data-result-type="groups">
                <div class="box">
                    {% if activeFilters.groups %}
                        <i class="fa fa-check"></i>
                    {% endif %}
                </div>
                <div class="check__label">{% trans 'Groups' %}</div>
            </div>
        </div>
    {% endif %}
    
    <div class="large-space"></div>

    {% if not activeFilters.people or not activeFilters.events or not activeFilters.projects or not activeFilters.groups %}
        <div class="line">
            <a href="#" class="reset-filters">
                Alle anzeigen
            </a>
	    </div>
    {% endif %}

    <div class="line text-field">
        <input type="text" class="q" name="q" placeholder="Suche" value="{{ q }}" />
        <i class="fa fa-search icon-search{% if wantsToSearch %} hidden{% endif %}"></i>
        <div class="icon-loading sk-double-bounce{% if not wantsToSearch %} hidden{% endif %}">
            <div class="sk-child sk-double-bounce1"></div>
            <div class="sk-child sk-double-bounce2"></div>
        </div>
    </div>
    
    {% if topicsVisible %} 
        <div class="line topics">
            {{ topicsHtml|safe }}
        </div>
    {% else %}
        <div class="line link show-topics">
            <a href="#">
                <i class="fa fa-caret-down pull-right"></i>
                <span>Nach Themen filtern...</span>
            </a>
        </div>
    {% endif %}
    
    <div class="message"></div>
</form>

<div class="line button">
    <div data-layer="street"
        class="btn layer-button {% if layer == 'street' %} active {% endif %}">
        Street
    </div>

    <div data-layer="satellite"
        class="btn layer-button {% if layer == 'satellite' %} active {% endif %}">
        Satellite
    </div>

    <div data-layer="terrain"
        class="btn layer-button {% if layer == 'terrain' %} active {% endif %}">
        Terrain
    </div>
</div>
