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