{% extends "social/base.html" %}

{% from "social/macros.html" import m_box %}

{% block content %}

  {% call m_box(_("User directory")) %}

    <form style="margin-bottom: 0;" method="POST">

      <table class="table table-striped table-condensed" id="users-table">
        <thead>
        <tr>
          <th style="width: 8%;"></th>
          <th style="width: 56%;">Nom</th>
          <th style="width: 18%;">Inscription</th>
          <th style="width: 18%;">Dernière activité</th>
        </tr>
        </thead>

        <tbody>
        <tr>
          <td colspan="4">
            Loading data...
          </td>
        </tr>

        {#
          <a href="{{ url_for(".user", user_id=user.id) }}"><img src="{{ url_for(".mugshot", user_id=user.id, s=45)  }}"></a>
        </td>

        <td class="identity">
          <div class="info">
            <a href="{{ url_for(".user", user_id=user.id) }}">{{ user.name }}</a>
          </div>
        </td>

        <td>
          {{ user.created_at|age }}
        </td>

        <td>
          {{ user.last_active|age }}
        </td>

        <td>
          {% if user != g.user %}
            <form action="{{ user._url }}" method="post">
              <input type="hidden" name="return_url" value="{{ request.url }}">
              {% if not g.user.is_following(user) %}
                <button class="btn btn-small btn-primary" name="action" value="follow">{{ _("Follow") }}</button>
              {% else %}
                <button class="btn btn-small btn-danger" name="action" value="unfollow">{{ _("Unfollow") }}</button>
              {% endif %}
            </form>
          {% endif %}
        </td>
      </tr>
    {% endfor %}
#}
        </tbody>
        <tfoot>
        <tr>
          <th style="width: 8%;"></th>
          <th style="width: 56%;">Nom</th>
          <th style="width: 18%;">Inscription</th>
          <th style="width: 18%;">Dernière activité</th>
        </tr>
        </tfoot>
      </table>
    </form>

    {%- deferJS %}
      <script>
        'use strict';
        require(
            ['Abilian', 'jquery', 'jquery.dataTables'],
            function (Abilian, $, jqDT) {

              function initUsersTable() {
                var users_table = $('#users-table').dataTable({
                  aoColumns: [
                    {asSorting: []},
                    {asSorting: ["asc", "desc"]},
                    {asSorting: ["asc", "desc"]},
                    {asSorting: ["asc", "desc"]}
                  ],
                  {# see http://datatables.net/ref #}
                  sPaginationType: "bootstrap",
                  bFilter: true,
                  bLengthChange: false,
                  bStateSave: true,
                  iDisplayLength: 50,
                  //sDom:           'lrtip',
                  bProcessing: true,
                  bServerSide: true,
                  sAjaxSource: "{{ url_for(".users_dt_json") }}"
                });
              }

              Abilian.fn.onAppInit(initUsersTable)
            }
        );
      </script>
    {%- enddeferJS %}

    <div style="clear: both;"></div>
  {% endcall %}

{% endblock %}
