{% extends "base.html" %}
{% set title = _('Revision Dashboard') %}
{% set styles = ('dashboards', 'jquery-ui') %}
{% set classes = 'compare' %}

{% block title %}{{ page_title(title) }}{% endblock %}

{% block content %}

    <div class="dashboard">

        <h1>{{ title }}</h1>
        <form method="get" id="revision-filter">
            <div class="revision-field">
                <label for="id_locale">{{ _('Locale:') }}</label>
                {{ form.locale }}
            </div>

            <div class="revision-field">
                <label for="id_user">{{ _('User:') }}</label>
                {{ form.user }}
            </div>

            <div class="revision-field">
                <label for="id_topic">{{ _('Topic:') }}</label>
                {{ form.topic }}
            </div>
            <br />

            <div class="revision-field">
                <label for="id_start_date">{{ _('Start Date:') }}</label>
                {{ form.start_date }}
            </div>

            <div class="revision-field">
                <label for="id_end_date">{{ _('End Date:') }}</label>
                {{ form.end_date }}
            </div>

            <button type="submit">{{ _('Filter') }}</button>
            <input type="hidden" name="page" id="revision-page" value="{{ page }}" />
        </form>


        <div id="revision-replace-block">
        {% include 'dashboards/includes/revision_dashboard_body.html' %}
        </div>
    </div>

{% endblock %}


{% block js %}
{{ js('jquery-ui') }}

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

    var $revisionReplaceBlock = $('#revision-replace-block');
    var $localeInput = $('#id_locale');
    var $filterForm = $('#revision-filter');
    var $pageInput = $('#revision-page');
    var currentLocale = '{{ request.locale }}';

    var controlsTemplate = '\
    <div class="action-bar">\
        <ul id="page-buttons">\
            <li><a id="revert" href="$reverturl" class="button">{{ _('Revert') }}<i aria-hidden="true" class="icon-undo"></i></a></li><li><a id="view" href="$viewurl" class="button">{{ _('View Page') }}<i aria-hidden="true" class="icon-circle-arrow-right"></i></a></li><li class="page-edit"><a id="edit" href="$editurl" class="button">{{ _('Edit Page') }}<i aria-hidden="true" class="icon-pencil"></i></a></li><li class="page-history"><a id="history" href="$historyurl" class="button">{{ _('History') }}<i aria-hidden="true" class="icon-book"></i></a></li>\
        </ul>\
    </div>';

    // Create the autocomplete for user
    $('#id_user').mozillaAutocomplete({
        minLength: 3,
        labelField: 'label',
        autocompleteUrl: '{{ url("dashboards.user_lookup") }}',
        buildRequestData: function (req) {
            // Should add locale value here
            req.locale = getLocale();
            req.user = req.term;
            return req;
        }
    });

    // Create the autocomplete for topic
    $('#id_topic').mozillaAutocomplete({
        minLength: 3,
        labelField: 'label',
        autocompleteUrl: '{{ url("dashboards.topic_lookup") }}',
        buildRequestData: function (req) {
            // Should add locale value here
            req.locale = getLocale();
            req.topic = req.term;
            return req;
        }
    });

    // Enable keynav
    $revisionReplaceBlock.mozKeyboardNav({
        itemSelector: '.dashboard-row',
        onEnterKey: function (item) {
            $(item).trigger('mdn:click');
        },
        alwaysCollectItems: true
    });

    // Focus on the first item, if there
    focusFirst();

    // Create date pickers
    $('#id_start_date, #id_end_date').datepicker();

    // When an item is clicked, load its detail
    $revisionReplaceBlock.on('click mdn:click', '.dashboard-row', function (e) {
        var $this = $(this);
        var $detail;

        // Don't interrupt links and stop if a request is already running
        if (e.target.tagName == 'A' || $this.attr('data-running')) return;

        if ($this.attr('data-loaded')) {
            $this.find('.dashboard-detail').slideToggle();
        } else {
            $this.attr('data-running', 1);
            $.ajax({
                url: $this.attr('data-compare-url')
            }).then(function (content) {
                // Prepend the controls
                var controls = controlsTemplate
                                        .replace('$reverturl', $this.attr('data-revert-url'))
                                        .replace('$viewurl', $this.attr('data-view-url'))
                                        .replace('$editurl', $this.attr('data-edit-url'))
                                        .replace('$historyurl', $this.attr('data-history-url'));

                $detail = $('<div class="dashboard-detail">' + controls + content + '</div>').appendTo($this).slideDown();
                $this.attr('data-loaded', 1);
                $this.removeAttr('data-running');
            });
        }
    });

    // AJAX loads for pagination
    $revisionReplaceBlock.on('click', '.pagination a', function (e) {
        e.preventDefault();
        $pageInput.val(this.href.split('page=')[1]);
        $filterForm.submit();
    });

    // Filter form submission handler; loads content via AJAX, updates URL state
    $filterForm.on('submit', function (e) {
        e.preventDefault();
        var $this = $(this);

        if ('pushState' in history) {
            history.pushState(null, '', location.pathname + '?' + $this.serialize());
        }

        $.ajax({
            url: $this.attr('action'),
            data: $this.serialize()
        }).then(function (content) {
            replaceContent(content);
            $this.trigger('ajaxComplete');

            // Reset the page count to 0 in case of new filter
            $pageInput.val(1);
        });
    });

    // Returns the current locale
    function getLocale() {
        return $localeInput.get(0).value || currentLocale;
    }

    // Focuses on the first row in the table
    function focusFirst() {
        var first = $revisionReplaceBlock.find('.dashboard-row').first();
        first.length && first.get(0).focus();
    }

    // Replaces table body content and scrolls to top of the page
    function replaceContent(content) {
        $revisionReplaceBlock.fadeOut(function () {
            $(this).html(content).fadeIn(function () {
                focusFirst();
            });

            // Animate to top!
            $('html, body').animate({
                scrollTop: $revisionReplaceBlock.offset().top
            }, 2000);
        });
    }

})(jQuery);
</script>
{% endblock %}