{% from 'announcement/display.html' import render_announcements %}
{% from 'core/impersonation.html' import render_impersonation %}

{%- macro _toolbar_link(icon, href) -%}
    <ind-with-tooltip>
        <a class="i-button text-color subtle icon-only icon-{{ icon }}" href="{{ href }}">
            <span data-tip-content>{{ caller() }}</span>
        </a>
    </ind-with-tooltip>
{%- endmacro -%}


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

    {% call _toolbar_link('home', url_for_index()) %}{% trans %}Go to the Indico Home Page{% endtrans %}{% endcall %}

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

    {% if rel.first is not none %}
        {% call _toolbar_link('first', url_for('events.display', event_id=rel.first)) %}
            {%- trans %}Oldest event{% endtrans -%}
        {% endcall %}
    {% endif %}

    {% if rel.prev is not none %}
        {% call _toolbar_link('prev', url_for('events.display', event_id=rel.prev)) %}
            {%- trans %}Older event{% endtrans -%}
        {% endcall %}
    {% endif %}

    {% if event.category %}
        {% call _toolbar_link('collapse', event.category.url) %}
            {%- trans %}Up to category{% endtrans -%}
        {% endcall %}
    {% endif %}

    {% if rel.next is not none %}
        {% call _toolbar_link('next', url_for('events.display', event_id=rel.next)) %}
            {%- trans %}Newer event{% endtrans -%}
        {% endcall %}
    {% endif %}

    {% if rel.last is not none %}
        {% call _toolbar_link('last', url_for('events.display', event_id=rel.last)) %}
            {%- trans %}Newest event{% endtrans -%}
        {% endcall %}
    {% endif %}

    {% if event.category or rel.first or rel.prev or rel.next or rel.last %}
        <span class="separator"></span>
    {% endif %}
{%- endmacro -%}


{%- macro _render_theme_selector() -%}
    <ind-menu>
        <ind-with-tooltip>
            <button class="i-button text-color subtle icon-only icon-layout">
                <span data-tip-content>{% trans %}Change theme{% endtrans %}</span>
            </button>
        </ind-with-tooltip>
        <menu>
            {% set endpoint = 'timetable.timetable' if event.type == 'conference' else 'events.display' %}
            {% for group in themes.items()|sort(attribute='1.name')|groupby('1.user_visible')|reverse
               if group.grouper or event.can_manage(session.user) %}
                {% if not group.grouper %}
                    <li class="themes-separator"></li>
                {% endif %}
                {% for id, data in group.list %}
                    <li>
                        {% if id == theme %}
                            <a aria-current="true"><strong>{{ data.name }}</strong></a>
                        {% else %}
                            <a href="{{ url_for(endpoint, event, view=id) }}">{{ data.name }}</a>
                        {% endif %}
                    </li>
                {% endfor %}
            {% endfor %}
        </menu>
    </ind-menu>
{%- endmacro -%}


{%- macro _render_filters() -%}
    <ind-with-tooltip>
        <button class="i-button text-color subtle icon-only icon-filter filter-link {{ 'active' if filters_active }}">
            <span data-tip-content>
                {%- if filters_active -%}
                    {%- trans %}Filtering is enabled{% endtrans -%}
                {%- else -%}
                    {%- trans %}Add a filter{% endtrans -%}
                {%- endif -%}
            </span>
        </button>
    </ind-with-tooltip>

    <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' or (event.type == 'conference' and theme))
                             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') -%}

{{ render_impersonation(legacy=true) }}
{{ render_announcements(legacy=true) }}

<header 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 event.can_access(session.user) %}
                {% if print_url %}
                    {% call _toolbar_link('printer', print_url) %}
                        {%- trans %}Printable version{% endtrans -%}
                    {% endcall %}
                {% endif %}

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

                <div id="event-calendar-link" data-event-id="{{ event.id }}"
                     data-event-contrib-count="{{ event.contributions_count }}"
                     data-event-session-block-count="{{ event.session_block_count }}"
                     {% if event.series %}data-event-in-series{% endif %}></div>

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

                {% if event.can_generate_attachment_package(session.user) %}
                    {% call _toolbar_link('package-download', url_for('attachments.package', event)) %}
                        {%- trans %}Download material{% endtrans -%}
                    {% endcall %}
                {% endif %}

                {{ _render_theme_selector() }}
                {% if session.user %}
                    <span class="separator"></span>

                    <div id="favorite-link" data-event-id="{{ event.id }}"
                        {{ 'data-favorited' if event in session.user.favorite_events }}></div>
                {% endif %}

                <span class="separator"></span>
            {% endif %}

            {{ template_hook('url-shortener', event=event, classes='i-button text-color subtle icon-only icon-link') }}

            {% block management_button %}
                {% if show_management_button %}
                    <ind-with-tooltip>
                        <a class="i-button text-color subtle icon-only icon-edit"
                           href="{% block management_button_url %}{{ url_for('event_management.settings', event) }}{% endblock %}">
                            <span data-tip-content>{% trans %}Switch to the management area of this event{% endtrans %}</span>
                        </a>
                    </ind-with-tooltip>
                {% endif %}
            {% endblock %}

            {% if event.type == 'conference' and theme %}
                <span class="separator"></span>
                <a href="{{ event.url }}" class="i-button text-color subtle">
                    {%- trans %}Back to Conference View{% endtrans -%}
                </a>
            {% endif %}
        </div>

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

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

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