{# vim: set ts=2 et sts=2 sw=2: #}
{% extends "base.html" %}
{% set title = _('Revision Dashboard') %}
{% set scripts = ('dashboards',) %}
{% set styles = ('dashboards', 'wiki') %}
{% set crumbs = [(None, title)] %}
{% set classes = 'compare' %}

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

{% block content %}
<section id="content">
  <div class="wrap">
    <div id="content-main" class="full">
  <article class="dashboard">
    <h1>{{ title }}</h1>
    <section>

    <h3>{{ _('Revision Filter') }}</h3>
    <form method="get" id="revision-filter">
      <label for="dash-locale">{{ _('Locale') }}:</label>
      <select name="locale" id="dash-locale">
        <option value="">{{ _('All Locales') }}</option>
        {% for code, name in settings.LANGUAGE_CHOICES -%}
          <option value="{{ code }}" {{ code|ifeq(request.GET.locale, "selected") }}>
            {{ name }}
          </option>
        {%- endfor %}
      </select>

      <label for="revision-dashboard-user">{{ _('User') }}:</label>
      <input name="user" id="revision-dashboard-user" value="{{ request.GET.user }}" />

      {% if waffle.flag('revision-dashboard-newusers') %}
        <label for="revision-dashboard-newusers">{{ _('New users only')}}</label>
        <input type="checkbox" name="newusers" id="revision-dashboard-newusers" {% if request.GET.newusers %}checked{% endif %} />
      {% endif %}


      <label for="revision-dashboard-topic">{{ _('Topic') }}:</label>
      <input name="topic" id="revision-dashboard-topic" value="{{ request.GET.topic }}" />

      <input type="submit" value="{{ _('Filter') }}" />
    </form>

    <table id="revisions-table">
      <thead>
        <tr>
          <th class="revision-head-article">{{ _('Article') }}</th>
          <th class="revision-head-date">{{ _('Date') }}</th>
          <th class="revision-head-author">{{ _('Author') }}</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    </section>
    <section id="revisions-compare">
      <section id="action-bar">
      <ul id="page-buttons">
        <li> <a id="revert" href="#"><i class="icon-undo"></i>{{ _('Revert') }}</a> </li>
        <li> <a id="view" href="#"><i class="icon-circle-arrow-right"></i>{{ _('View Page') }}</a> </li>
        <li class="page-edit"><a id="edit" href="#"><i class="icon-pencil"></i>{{ _('Edit Page') }}</a> </li>
        <li class="page-history"><a id="history" href="#"><i class="icon-book"></i>{{ _('History') }}</a> </li>
        <li id="ban-user"></li>
      </ul>
      </section>

      <h2>{{ _('Revision Diff') }}</h2>
      <div id="revision-address"></div>
      <section id="diff-view">
        <p>{{ _('Click an item in the revision list above to see details.') }}</p>
      </section>
    </section>
  </article>
    </div>
  </div>
</section>
{% endblock %}


{% block js %}
<script>
$(document).ready(function(){
  var $revTable       = $('#revisions-table'),
      $revTableBody   = $('tbody', $revTable),
      $revisionForm   = $('#revision-filter'),
      $actionBar      = $('#action-bar'),
      $localeInput    = $('#dash-locale'),
      currentLocale   = '{{ request.locale }}',
      localeKey       = '{LOCALE}',
      baseURL         = '/' + localeKey + '/dashboards/revisions',
      $revisionDashboardUser = $('#revision-dashboard-user'),
      $revisionDashboardTopic = $('#revision-dashboard-topic'),
      lastSelected;
  $actionBar.hide();
  $revTableBody.click(getRecordDetail);

  // Create the autocomplete for user
  $revisionDashboardUser.mozillaAutocomplete({
    minLength: 3,
    labelField: 'label',
    autocompleteUrl: '{{ url('dashboards.user_lookup') }}',
    onSelect: function(item, isSilent) {
      // Do something upon selection
      if(!isSilent) loadRecords();
    },
    buildRequestData: function(req) {
      // Should add locale value here
      req.locale = getLocale();
      req.user = req.term;
      return req;
    }
  });

  // Create the autocomplete for topic
  $revisionDashboardTopic.mozillaAutocomplete({
    minLength: 3,
    labelField: 'label',
    autocompleteUrl: '{{ url('dashboards.topic_lookup') }}',
    onSelect: function(item, isSilent) {
      // Do something upon selection
      if(!isSilent) loadRecords();
    },
    buildRequestData: function(req) {
      // Should add locale value here
      req.locale = getLocale();
      req.topic = req.term;
      return req;
    }
  });

  function getLocale() {
    return $localeInput.get(0).value || currentLocale;
  }

  function getSourceURL() {
    return baseURL.replace(localeKey, getLocale()) + '?' + $revisionForm.serialize();
  }

  // Upon form submission, get records
  $revisionForm.submit(function(e) {
    e.preventDefault();
    loadRecords();

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

  // When the username is clicked, filter
  $revTable.delegate('a.creator', 'click', function(ev) {
    ev.preventDefault();
    $revisionDashboardUser.val($(ev.target).text())
    loadRecords();
  });

  // Triggers a change in record source
  function loadRecords() {
    var settings = $revTable.dataTable.settings[0];
    settings.sAjaxSource = getSourceURL();
    $revTable.dataTable.ext.oApi._fnAjaxUpdate(settings);
  }

  // Fires off an AJAX request to get the necessary data
  function getRecordDetail(e){
    var parent        =   $(e.target).parents('tr').get(0),
        data          =   $revTable.fnGetData(parent),
        $diffView     =   $('#diff-view'),
        $revertLink   =   $('a#revert'),
        $viewLink     =   $('a#view'),
        $editLink     =   $('a#edit'),
        $historyLink  =   $('a#history'),
        $banUserItem  =   $('#ban-user');

    if(e.target.tagName == 'A') return;

    // Manage selection colors
    if(lastSelected) {
      lastSelected.removeClass('selected')
    }
    lastSelected = $(parent).addClass('selected');

    // Update the revision address block
    $('#revision-address').text(data.title + " - " + data.doc_url);

    // Load diff content
    $('a', $actionBar).attr('href', '');
    $actionBar.show();
    $diffView.html(gettext('Loading ...'));
    $diffView.load(data.compare_url, function(resp, status, xhr){
      if (status == 'error') {
        $diffView.html('Error: ' + xhr.status + ' ' + xhr.statusText);
      } else {
        $revertLink.attr('href', data.revert_url);
        $viewLink.attr('href', data.doc_url);
        $editLink.attr('href', data.edit_url);
        $historyLink.attr('href', data.history_url);
        $banUserItem.html(data.ban_link);
      }
    });
  }

  // Create the feature-rich table
  $revTable.dataTable({
    'bPaginate': false,
    'bLengthChange': false,
    'bFilter': false,
    'bSort': false,
    'bAutoWidth': false,
    'aoColumns': [
      {'mData': 'richTitle'},
      {'mData': 'date'},
      {'mData': 'creator'}
    ],
    'sScrollY': '300px',
    'sDom': 'frtiS',
    'oScroller':{
      'loadingIndicator': true,
      'serverWait': 500
    },
    'bServerSide': true,
    'bDeferRender': true,
    'sAjaxSource': getSourceURL()
  });
});
</script>
{% endblock %}