{% 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 type="text/javascript">
'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 %}
