{% extends "community/_base.html" %}

{% from "macros/box.html" import m_box_content, m_box_menu %}
{% import "community/members_macros.html" as macros with context %}

{% block content %}
  {% call m_box_content(_("Members")) %}
    {%- set is_manager = g.community.has_permission(current_user, 'manage') %}

    {%- if is_manager %}
      {{ add_member() }}
    {%- endif %}

    <h2>{{ _("Current members") }}</h2>

    <p class="clearfix">
      (<i class="glyphicon glyphicon-lock"></i>: {{ _('account disabled') }})
      {%- if is_manager  %}
        <a class="btn btn-info pull-right" href="{{ url_for('.members_excel_export', community_id=g.community.slug) }}">
          <i class="fa fa-justify"></i> {{ _('Download list') }}
        </a>
      {%- endif %}
    </p>

    {% set table_id = uuid() %}
    <table class="table table-condensed table-striped" id="{{ table_id }}">
      <thead>
        {{ macros.thead() }}
      </thead>

      <tbody>
      {% for user, m_id, role, last_activity_date in memberships %}
        <tr>
          {{ macros.member_row(user, m_id, role, last_activity_date) }}
        </tr>
      {% endfor %}
      </tbody>
    </table>
    <script type="application/json">
        {{ macros.table_config() }}
    </script>

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

             function initMembersTable() {
                 var id = "#{{ table_id }}",
                     table = $(id),
                     configNode = table.get(0).nextElementSibling,
                     config = JSON.parse(configNode.textContent);

                 $(id).dataTable(config);
             }

             Abilian.fn.onAppInit(initMembersTable);
         }
     );
    </script>
    {%- enddeferJS %}
    <div class="clearfix"></div>
  {% endcall %}
{% endblock %}

{% block sidebar %}
  {%- set actions = actions.for_category('members:menu') %}
  {%- if actions %}
    {% call m_box_menu() %}
      <ul class="nav nav-list">
        {%- for action in actions %}
          <li>{{ action.render() }}</li>
        {%- endfor %}
      </ul>
    {% endcall %}
  {%- endif %}
{% endblock %}


{% macro add_member() %}
  <h2>{{ _("Add a member") }}</h2>

  <div id="add-user-role" role="dialog">
    <form method="POST" class="form-inline" enctype="multipart/form-data" role="form">
      {{ csrf_token }}

      <div class="form-group">
        <label for="user-select">{{ _('User') }}</label>
        <input class="form-control" type="text" id="user-select" name="user" />
      </div>

      <div class="form-group">
        <label for="role-select">{{ _('Role') }}</label>
        <select id="role-select" name="role" class="form-control" style="width: auto;">
          <option value="member" default="default">{{ _("Member") }}</option>
          <option value="manager">{{ _("Manager") }}</option>
        </select>
      </div>

      <button class="btn btn-primary" type="submit" name="action"
          value="add-user-role">{{ _("Add") }}</button>
    </form>
  </div>

  {%- deferJS %}
  <script>
require(
    ['Abilian', 'jquery'],
    function(Abilian, $) {

     Abilian.fn.onAppInit(
         function() {
       $("#user-select")
            .attr("style", "min-width: 220px")
            .select2({
         minimumInputLength: 2,
         ajax: {
           url:         "{{ url_for("social.users_json") }}",
           dataType:    'json',
           quietMillis: 100,
           data:        function(term, page) {
             return { q: term, with_membership: {{ g.community.id | tojson }} };
           },
           results:     function(data, page) {
             return {results: data.results, more: false};
           }
         },
         allowClear:    true,
         formatResult: function(state, container, query, escapeMarkup) {
           var markup = [], text;
           window.Select2.util.markMatch(state.name, query.term, markup, escapeMarkup);
           text = '<b>' + markup.join("") + '</b>';
           if (state.role) {
             text+= ' <small class="label label-default pull-right">' + escapeMarkup(state.role) + '</small> ';
           }

           if (state.email) {
             text += ' <br /><i>' + escapeMarkup(state.email) + '</i> ';
           }
           return text;
         }
       });

       $("#s2id_user-select a span").text("");
       $("input#user-select").attr("value", "");
         });
    });
  </script>
  {%- enddeferJS %}
{% endmacro %}

{# Do we need this one ?
{% block modals %}
  {% include "community/_modals.html" %}
{% endblock %}
#}
