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