{% extends 'layout/base.html' %}
{% from 'forms/_form.html' import form_header, form_rows, form_footer  %}
{% from 'message_box.html' import message_box %}

{# Implement this macro in child templates
    {% macro result_group_entries(items) %}
        {% for item in items %}
            <tr class="result-group-entry">
                <td>{{ item }}</td>
            </tr>
        {% endfor %}
    {% endmacro %}
#}

{% block page_class %}fixed-width-standalone-page{% endblock %}

{% block page_actions -%}
    {% if calendar_link_supported|default(false) -%}
        <div class="toolbar">
            <a href="#"
               class="i-button icon-calendar"
               title="{% trans %}Generate iCalendar link{% endtrans %}"
               data-href="{{ url_for('.request_calendar_link') }}"
               data-title="{% trans %}Generate iCalendar link{% endtrans %}"
               data-ajax-dialog
               data-reload-after></a>
        </div>
    {%- endif -%}
{%- endblock %}

{% block content %}
    {% if calendar_link_supported|default(false) and calendar_link %}
        {% call message_box('success') %}
            {%- set link_start -%}
                <a href="{{ calendar_link }}"
                   class="js-copy-to-clipboard"
                   title="{% trans %}Copy link to clipboard{% endtrans %}"
                   data-clipboard-text="{{ calendar_link }}"
                   data-clipboard-action="copy">
            {%- endset -%}
            {%- set link_end -%}
                </a>
            {%- endset -%}

            {% trans %}
                Your {{ link_start }}calendar link{{ link_end }} has been generated.
            {% endtrans %}
        {% endcall %}
    {% endif %}

    <div class="i-box-group vert">
        <div class="i-box">
            {{ form_header(form, method='get', action=action|default('')) }}
            {{ form_rows(form) }}
            {% call form_footer(form) %}
                <input class="i-button big highlight" type="submit" value="{% trans %}Search{% endtrans %}">
            {% endcall %}
        </div>

        {% if results is not none %}
            <div class="i-box overview-results">
                {% if not results %}
                <table>
                    <tr class="no-results-title">
                        <td>
                            {% trans %}No results found{% endtrans %}
                        </td>
                    </tr>
                </table>
                {% else %}
                    {% block result_list %}
                        <table>
                            {% for key, items in results.items() %}
                                <tr class="result-group-title">
                                    <td colspan="100%">
                                        {{ result_group_title(key) if result_group_title is defined else key }}
                                    </td>
                                </tr>
                                {{ result_group_entries(items) }}
                            {% endfor %}
                        </table>
                    {% endblock %}
                {% endif %}
            </div>
        {% endif %}
    </div>

    <script>
        (function() {
            'use strict';

            var mapping = {
                '#abs_start_date': '#rel_start_date',
                '#rel_start_date': '#abs_start_date',
                '#abs_end_date': '#rel_end_date',
                '#rel_end_date': '#abs_end_date'
            };

            $(Object.keys(mapping).join(', ')).on('input change', function() {
                if ($(this).val()) {
                    $(mapping['#' + this.id]).val('');
                }
            });
        })();
    </script>
{% endblock %}
