{% 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 memberscontent %}
<div class="col-md-12">
  {% call m_box_content(_("Members")) %}
    {%- if is_manager %}
      <div style="
    position: relative;top: -9px;">
        <div class="btn-group" role="group" aria-label="..." style="float:right;position: relative;
top: 39px;">
          <a href="{{ url_for('.wizard_data_insertion',community_id=g.community.slug) }}" class="btn btn-default"
             style="background: ghostwhite;color: gray;"><i class="fa fa-rocket" aria-hidden="true"></i>
            {{ _("Add members") }}</a>
          <a class="btn btn-info pull-right"
             href="{{ url_for('.members_excel_export', community_id=g.community.slug) }}">
            <i class="glyphicon glyphicon-download-alt"></i> {{ _('Download list') }}
          </a>
        </div>

        {{ add_member() }}
      </div>
    {%- endif %}

    <p class="clearfix" style="border-bottom: 1px dashed #eeeeee;position: relative;top: 17px;margin-bottom: 32px;"></p>

    {% set table_id = uuid() %}
    <table class="table table-condensed table-striped members-table" 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 %}
</div>
{% 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 class="members-title">{{ _("Add a member") }}</h2>

  <div id="add-user-role" role="dialog">
    <form method="POST" class="form-inline" enctype="multipart/form-data" role="form">
      {{ csrf.field() }}

      <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 %}

