{% extends base_template %}

{% block content %}

  <h1>
    {{ form['name'].render_view() }}
    <a class="btn btn-default pull-right" href="{{ url_for('.groups_group_edit', group_id=view.obj.id) }}"><i
        class="fa fa-pencil"></i> {{ _('Edit') }}</a>
  </h1>

  <p class="lead">{{ form['description'].render_view() }}</p>

  <h2>{{ _('Roles') }}</h2>

  <p>
    {%- for role in roles %}
      <span class="badge badge-default">{{ role }}</span>
    {%- endfor %}
  </p>

  <h2>{{ _('Members') }}</h2>

  <div id="add-user-role" role="dialog">
    <form method="POST" action="{{ url_for(".groups_group_edit", group_id=view.obj.id) }}" 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>

      {{ ADD_USER_BUTTON.render() }}
    </form>
  </div>


  <p>(<i class="glyphicon glyphicon-lock"></i>: {{ _('account disabled') }})</p>

  {% set table_id = uuid() %}
  <table class="table table-condensed table-striped" id="{{ table_id }}">
    <thead>
    <tr>
      <th class="hide">Last Name</th>
      <th class="hide">First Name</th>
      <th>Nom</th>
      <th></th>
    </tr>
    </thead>

    <tbody>
    {% for user in members %}
      <tr>
        <td class="hide">{{ user.last_name }}</td>
        <td class="hide">{{ user.first_name }}</td>
        <td>
          {%- if not user.can_login %}
            <i class="glyphicon glyphicon-lock" title="{{ _('account disabled') }}"></i><s>
          {%- endif %}

          <a href="{{ url_for(".users_user", user_id=user.id) }}">{{ user.name }}</a>
          <br/>
          (<i>{{ user.email }}</i>)
          {%- if not user.can_login %}</s>{%- endif %}
        </td>
        <td>
          <form action="{{ url_for(".groups_group_edit", group_id=view.obj.id) }}" method="POST"
                style="display: inline;">
            {{ csrf.field() }}
            <input type="hidden" name="user" value="{{ user.id }}">
            {{ REMOVE_USER_BUTTON.render() }}
          </form>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>


  {%- deferJS %}
    <script type="text/javascript">
      (function (factory) {
        require(['Abilian', 'jquery'], factory);
      })
      (function (Abilian, $) {
        function initSelect() {
          $("#user-select")
              .attr("style", "min-width: 220px")
              .select2({
                minimumInputLength: 2,
                ajax: {
                  url: "{{ url_for("users.json_list") }}",
                  dataType: 'json',
                  quietMillis: 100,
                  data: function (term, page) {
                    return {q: term};
                  },
                  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", "");
        };

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

{% endblock %}
