{% extends "includes/_layout.html" %}
{% import "includes/_macros.html" as ui %}

{% block title %}
{% set bugs_total = all_bugs["DATA"]|map(attribute='bugs')|map('length')|sum %}
{% if bugs_total == 1 %}
    {% set bugs_word = " bug" %}
{% else %}
    {% set bugs_word = " bugs" %}
{% endif %}

<h2 style="nowrap">
    {{ report.text + " [" + bugs_total|string + bugs_word + "]" }}
    <a data-toggle="modal" class="help-sign" data-target="#legend-modal">
        <i class="fa fa-question-circle"></i>
    </a>
</h2>
{% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-12">
        <p>
            {% for bug_data in all_bugs["DATA"] %}
                {% if bug_data.bugs|length > 0 %}
                    {% set bugs_len_str = bug_data.bugs|length|string %}
                    <a type="button" class="btn btn-w-m btn-white btn-default dim btn-dim"
                       href="#{{ bug_data['display_name'] }}">{{ bug_data['display_name']}}: {{ bugs_len_str }}</a>
                {% endif %}
            {% endfor %}
        </p>
    </div>

</div>
<div class="row">
    <div class="col-md-9">
        {% for bug_data in all_bugs["DATA"] %}
            {% if bug_data.bugs|length > 0 %}
                {% set bugs_len_str = bug_data.bugs|length|string %}
                {% call ui.render_ibox(bug_data['display_name'] + ': ' + bugs_len_str + ' bugs',
                                       id=bug_data['display_name'],
                                       content_classes='no-padding') %}
                {% if bug_data['name'] == 'maintenance_report' %}
                    {{ ui.render_maint_bug_table(bug_data.bugs, filters) }}
                {% else %}
                    {{ ui.render_bug_table(bug_data.bugs, filters) }}
                {% endif %}
                {% endcall %}
            {% endif %}
        {% endfor %}
    </div>

    <div class="col-md-3">
        {% call ui.render_ibox('Configure filters', collapsible=False) %}
            <form class="form-horizontal searchform">

            <!-- milestone -->
            {% if milestone_names %}
            {{ ui.render_multiselect(milestones, filters, 'milestone', 'Milestone...') }}
            {% endif %}

            <!-- status -->
            {{ ui.render_multiselect(report['options']['status'], filters, 'status', 'Status...') }}
            {{ ui.render_multiselect(report['options']['importance'], filters, 'importance', 'Importance...') }}
            {{ ui.render_team_multiselect(teams, filters, 'assignee', 'Assigned team...') }}
            {{ ui.render_input_field('tags_select', ' '.join(filters['tags']), 'Include tag(s)...') }}

            <div class="collapse-group">
                <div class="center-block" style="text-align: center">
                    <a id='advanced_filters_toggle' data-toggle="collapse" href="#advanced_filters_group">
                        Toggle advanced filters
                    </a>
                </div>
                <div id="advanced_filters_group"
                     class='collapse {% if is_advanced_filter_set(filters) %}in{% endif %}'>
                    <div class="hr-line-dashed"></div>

                    {{ ui.render_input_field('assigned_person_select',
                                             ' '.join(filters['assigned_person']),
                                             'Assigned person(s)...') }}
                    {{ ui.render_team_multiselect(teams, filters, 'reporter', 'Reporter...') }}
                    {{ ui.render_team_multiselect(teams, filters, 'verifier', 'Verifier...') }}
                    {{ ui.render_input_field('exclude_tags_select',
                                             ' '.join(filters['exclude_tags']),
                                             'Excluded tag(s)...') }}

                    <div class="hr-line-dashed"></div>

                    {{ ui.render_date_range_select('date_created',
                                                   filters['created_from'],
                                                   filters['created_to'],
                                                   "Creation date (from/to)")}}
                    {{ ui.render_date_range_select('date_fix_committed',
                                                   filters['fix_committed_from'],
                                                   filters['fix_committed_to'],
                                                   "Fix committed date (from/to)")}}
                    {{ ui.render_date_range_select('date_fix_released',
                                                   filters['fix_released_from'],
                                                   filters['fix_released_to'],
                                                   "Fix released date (from/to)")}}

                </div>
            </div>

            <div class="hr-line-dashed"></div>

            <div class="form-group">
                <div class="col-lg-3">
                    <button type="button" class="btn btn-sm btn-white" onclick="apply_filters()">
                        <i class="fa fa-search"></i> Search
                    </button>
                </div>
                <div class="col-lg-9">
                    <div class="btn-group-sm pull-right">
                        <button id="btn_reset" type="button"
                                class="btn btn-sm btn-white" onclick="reset_search_form()">
                            <i class="fa fa-undo"></i>
                        </button>
                        <button id="btn_csv" type="button"
                                class="btn btn-sm btn-white" onclick="get_csv()">
                            <i class="fa fa-download"></i>
                        </button>
                    </div>

                </div>
            </div>

            </form>
        {% endcall %}
    </div>

</div>

<script src="{{ url_for('static', filename='js/search_filter.js') }}"></script>

<script>
    var multiselects = ['milestone_select', 'status_select', 'importance_select',
        'assignee_select', 'reporter_select', 'verifier_select'];

    var datepickers = ['date_created', 'date_fix_committed', 'date_fix_released'];


    function reset_search_form() {
        multiselects.forEach(function(i) {
           $('#'+i).multipleSelect('uncheckAll');
        });

        $('#milestone_select').val("");
        $('#status_select').val("");
        $('#importance_select').val("");
        $('#assignee_select').val("");
        $('#criteria_select').val("");
        $('#tags_select').val("");
        $('#exclude_tags_select').val("");

        datepickers.forEach(function(i) {
            $('#' + i + '_from').datepicker('setDate', null);
            $('#' + i + '_to').datepicker('setDate', null);
        });
    }

    $(document).ready(function () {
        /* Following functions are declared in dashboard.js */

        enableMultiselects(multiselects);
        enableDatePickers(datepickers);

        addToolTip('tags_select', 'List of tags separated by space.');
        addToolTip('exclude_tags_select', 'List of excluded tags separated by space.');
        addToolTip('assigned_person_select', 'List of launchpad IDs separated by space.');

        addToolTip('btn_reset', 'Reset input form');
        addToolTip('btn_csv', 'Get CSV');
    });
</script>

<div class="modal inmodal" id="legend-modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">{{ report.text }}</h4>
            </div>
            <div class="modal-body">
                <pre>{{ report["description"].strip() }}</pre>

                <div class="hr-line-dashed"></div>

                {% if all_bugs["DATA"]|length > 1 %}
                    <pre>{{ all_bugs["DATA"][1]['report_legend'] }}</pre>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}