{% extends "base.html" %}

{% set title = _('Localization Dashboard') %}
{% set scripts = ('dashboards',) %}
{% set styles = ('dashboards', 'wiki') %}
{% set crumbs = [(None, title)] %}
{% set classes = 'compare' %}

{% block title %}{{ _("Localization Dashboard") }}{% endblock %}

{% block content %}
<section id="content">
<div class="wrap">
  <div id="content-main" class="full">
    <article class="dashboard">
      <h1>{{ _("Localization Dashboard") }}</h1>
      <section> 

        <h3>{{ _('Filter') }}</h3>
        <form id="revision-filter" method="get">
        
          <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="l10n-dashboard-topic">{{ _('Topic') }}:</label>
          <input name="topic" id="l10n-dashboard-topic" value="{{ request.GET.topic }}" />
          
          <label for="localization-flags">{{ _("Localization Flags") }}:</label>
          <select name="localization_flags" id="localization-flags">
            <option value=""></option>
            <option value="inprogress"{{ selected('inprogress', filters['localization_flags']) }}>Localization in Progress</option>
          </select>
          
          <label for="orderby">{{ _("Order by") }}:</label>
          <select name="orderby" id="orderby">
            {% for order in filter_data.orderby_list %}
              <option value="{{ order[0] }}">{{ order[1] }}</option>
            {% endfor %}
          </select>
          
          <input type="submit" value="{{ _('Filter') }}" />
          
        </form>
        
        <table id="revisions-table">
            <thead>
                <tr>
                    <th class="revision-head-locale">{{ _('Locale') }}</th>
                    <th class="revision-head-article">{{ _('Locale article') }}</th>
                    <th class="revision-head-rev-date">{{ _('Locale revision date') }}</th>
                    <th class="revision-head-parent-artile">{{ _('English article') }}</th>
                    <th class="revision-head-parent-rev-date">{{ _('English revision date') }}</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        
      </section>
    </article>
  </div>
</div>
</section>
{% endblock %}

{% block js %}
<script>
$(function() {
  var $revTable       = $('#revisions-table'),
      $revisionForm   = $('#revision-filter'),
      $localeInput    = $('#dash-locale'),
      currentLocale   = '{{ request.locale }}',
      localeKey       = '{LOCALE}',
      baseURL         = '/' + localeKey + '/dashboards/fetch_localization_data',
      $l10nDashboardTopic = $('#l10n-dashboard-topic');

  // Create the autocomplete for topic
  $l10nDashboardTopic.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());
    }
  });

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

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