{%- macro _render_nav_bar() -%}
    {% set rel = event.get_relative_event_ids() %}

    <a class="i-button text-color subtle icon-home" href="{{ url_for_index() }}"
       title="{% trans %}Go to the Indico Home Page{% endtrans %}"></a>

    <span class="separator"></span>

    {% if rel.first is not none %}
        <a class="i-button text-color subtle icon-first" href="{{ url_for('events.display', confId=rel.first) }}"
           title="{% trans %}Oldest event{% endtrans %}"></a>
    {% endif %}

    {% if rel.prev is not none %}
        <a class="i-button text-color subtle icon-prev" href="{{ url_for('events.display', confId=rel.prev) }}"
           title="{% trans %}Older event{% endtrans %}"></a>
    {% endif %}

    <a class="i-button text-color subtle icon-collapse" href="{{ event.category.url }}"
       title="{% trans %}Up to category{% endtrans %}"></a>

    {% if rel.next is not none %}
        <a class="i-button text-color subtle icon-next" href="{{ url_for('events.display', confId=rel.next) }}"
           title="{% trans %}Newer event{% endtrans %}"></a>
    {% endif %}

    {% if rel.last is not none %}
        <a class="i-button text-color subtle icon-last" href="{{ url_for('events.display', confId=rel.last) }}"
           title="{% trans %}Newest event{% endtrans %}"></a>
    {% endif %}

    <span class="separator"></span>
{%- endmacro -%}


{%- macro _render_theme_selector() -%}
    <a class="i-button text-color subtle icon-layout arrow js-dropdown" data-toggle="dropdown"
       title="{% trans %}Change theme{% endtrans %}"></a>
    <ul class="dropdown">
        {% set endpoint = 'timetable.timetable' if event.type == 'conference' else 'events.display' %}
        {% for id, data in themes.items()|sort(attribute='1.name')
           if event.can_manage(session.user) or data.user_visible %}
            <li>
                {% if id == theme %}
                    <a class="disabled"><strong>{{ data.name }}</strong></a>
                {% else %}
                    <a href="{{ url_for(endpoint, event, view=id) }}">{{ data.name }}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{%- endmacro -%}


{%- macro _render_filters() -%}
    {%- set filter_link_tooltip -%}
        {%- if filters_active -%}
            {%- trans %}Filtering is enabled{% endtrans -%}
        {%- else -%}
            {%- trans %}Add a filter{% endtrans -%}
        {%- endif -%}
    {%- endset -%}

    <a class="i-button icon-filter filter-link {{ 'active' if filters_active }}"
       title="{{ filter_link_tooltip|forceescape }}"></a>

    <div id="event-filters" class="event-filters">
        <form id="filterForm" style="margin: 0;">
            <div style="float: right;">
                <input type="submit" class="btn" value="Apply filter">&nbsp;
                <input type="button" id="removeFilterButton" class="btn" value="Remove filter">
            </div>

            <strong>{% trans %}Focus on:{% endtrans %}&nbsp;</strong>

            {% if dates|length > 1 %}
                <select id="datesSelect" name="showDate" style="font-size: 8pt;">
                    {% set selected_date = request.args.get('showDate', 'all') %}
                    <option value="all" {{ 'checked' if selected_date == 'all' }}>
                        {%- trans %}All days{% endtrans -%}
                    </option>
                    {% for date in dates %}
                        <option value="{{ date.isoformat() }}" {{ 'selected' if selected_date == date.isoformat() }}>
                            {{- date|format_date() -}}
                        </option>
                    {% endfor %}
                </select>
            {% endif %}

            {% if event.sessions %}
                <select id="showSessionSelect" name="showSession" style="font-size: 8pt;">
                    {% set selected_session = request.args.get('showSession', 'all') %}
                    <option value="all" {{ 'checked' if selected_session == 'all' }}>
                        {%- trans %}All sessions{% endtrans -%}
                    </option>
                    {% for s in event.sessions|sort(attribute='title') %}
                        <option value="{{ s.friendly_id }}" {{ 'selected' if selected_session == s.friendly_id|string }}>
                            {{- s.title|truncate(50) -}}
                        </option>
                    {% endfor %}
                </select>

                <span style="white-space: nowrap; margin-left: 65px;">
                    {% set hide_contribs = event.sessions and request.args.detailLevel == 'session' %}
                    <input id="hideContributionsCheckbox" type="checkbox" name="detailLevel" style="margin-right: 5px;"
                           value="session" {{ 'checked' if hide_contribs }}>
                    <strong id="hideContributionsLabel" style="cursor: pointer;">
                        {%- trans %}Hide Contributions{% endtrans -%}
                    </strong>
                </span>
            {% endif %}
        </form>
    </div>

    {# TODO: get rid of this awful legacy js... #}
    <script>
        (function() {
            'use strict';

            var filterButtonClicked = false;
            var filterButtonState = false;
            var filtersActive = {{ filters_active|tojson }};

            function filterToggle() {
                if (!filterButtonClicked) {
                    // When clicked for the first time append the div to the correct container
                    $('#pageSubHeader').append($('#event-filters').detach());
                    filterButtonClicked = true;
                }

                filterButtonState = !filterButtonState;
                $('#event-filters').toggle(filterButtonState);
            }

            // Setup the filter button in the toolbar
            $('.filter-link').on('click', function(e) {
                e.preventDefault();
                filterToggle();
            });

            // When remove filter button clicked, if needed reset the form and do submit otherwise
            // just hide the filter div
            $('#removeFilterButton').on('click', function() {
                // Reset the form
                $('#hideContributionsCheckbox').prop('checked', false);
                $('#datesSelect').val('all');
                $('#showSessionSelect').val('all');

                if (filtersActive) {
                    $('#filterForm').submit();
                } else {
                    filterToggle();
                }
            });

            // Make the hide contributions label clickable
            $('#hideContributionsLabel').on('click', function() {
                $('#hideContributionsCheckbox').trigger('click');
            });

            if (filtersActive) {
                _.defer(filterToggle);
            }
        })();
    </script>
{%- endmacro -%}


{%- set dates = event.iter_days(tzinfo=event.tzinfo)|list -%}
{%- set show_filter_button = event.type == 'meeting' and (dates|length > 1 or event.sessions) -%}
{%- set filters_active = show_filter_button and (request.args.get('showDate', 'all') != 'all' or
                                                 request.args.get('showSession', 'all') != 'all' or
                                                 request.args.get('detailLevel', 'contribution') != 'contribution') -%}
{{ template_hook('global-announcement') }}

<div class="page-header page-header-dark event-page-header">
    <div class="main-action-bar flexrow f-j-space-between f-a-center">
        <div class="button-bar flexrow f-j-start">
            {% if event.type != 'conference' or show_nav_bar %}
                {{ _render_nav_bar() }}
            {% endif %}

            {% if print_url %}
                <a class="i-button text-color subtle icon-print" href="{{ print_url }}"
                   title="{% trans %}Printable version{% endtrans %}"></a>
            {% endif %}

            {% if show_filter_button %}
                {{ _render_filters() }}
            {% endif %}

            <a class="i-button text-color subtle icon-calendar js-export-ical" id="exportIcal{{ event.id }}" data-id="{{ event.id }}"
               title="{% trans %}Export to iCal{% endtrans %}"></a>
            {{ template_hook('event-ical-export', event=event) }}

            {% if event.type == 'meeting' %}
                <a class="i-button text-color subtle icon-file-pdf" title="{% trans %}Export to PDF{% endtrans %}"
                   data-href="{{ url_for('timetable.export_pdf', event) }}"
                   data-ajax-dialog></a>
            {% endif %}

            <a class="i-button text-color subtle icon-package-download" href="{{ url_for('attachments.package', event) }}"
               title="{% trans %}Download material{% endtrans %}"></a>

            {{ _render_theme_selector() }}

            <span class="separator"></span>

            <a class="i-button text-color subtle icon-edit"
               href="{{ url_for('event_management.settings', event) }}"
               title="{% trans %}Switch to the management area of this event{% endtrans %}"></a>

        </div>

        {{ render_session_bar(protected_object=event, local_tz=event.display_tzinfo.zone) }}
    </div>

    {# This div is used for inserting content under the header such as the filtering options for meetings #}
    <div id="pageSubHeader"></div>
</div>

{% if event.type != 'conference' %}
    {%- include 'flashed_messages.html' -%}
{% endif %}

<script>
    $(document).ready(function() {
        $('.js-export-ical').on('click', function(evt) {
            evt.preventDefault();
            $(this).trigger('menu_select');
        });
    });
</script>