{% extends "social/base.html" %}

{% macro m_user_list(users, form_action, form_action_label) %}
   {%- if users %}
     {%- if is_admin %}
     <form action="{{ url_for('.group_post', group_id=group.id) }}" method="POST">
       {{ csrf_token }}
       <input type="hidden" name="action" value="{{ form_action }}" />
     {%- endif %}
       <table class="table table-striped table-condensed">
         <tbody>
           {%- for user in users %}
             <tr>
               <td>
                 <a href="{{ url_for(user) }}">
                   <img src="{{ user_photo_url(user, size=16) }}" alt="{{ user.name }}" title="{{ user.name }}" style="margin-bottom: 4px;" />
                   {{ user.name }}
                 </a>
               </td>
               <td>{{ user.email }}</td>
               {%- if is_admin %}
               <td>
                 <button class="btn btn-danger" name="user" value="{{ user.id }}" title="{{ form_action_label }}"><i class="fa fa-ban"></i></button>
               </td>
               {%- endif %}
             </tr>
           {%- endfor %}
         </tbody>
       </table>
     {%- if is_admin %}
     </form>
     {%- endif %}
   {%- endif %}
{% endmacro %}

{% block content %}
  <div class="header">
    <img src="{{ url_for(".group_mugshot", group_id=group.id, s=140) }}" class="avatar avatar-140" alt="" />

    <div class="info">
      <h2 class="title">{{ group.name }}</h2>

      <div class="job-title">{{ group.description or '' }}</div>
      {#
      <form action="." method="post" style="margin-top: 10px;">
        {{ csrf_token }}
        {% if g.user.is_member_of(group) %}
          <button class="btn" name="action" value="leave">{{ _("Leave") }}</button>
        {% else %}
          <button class="btn" name="action" value="join">{{ _("Join") }}</button>
        {% endif %}
      </form>
      #}
    </div>
         
    <ul class="nav nav-tabs clear">
      {%- for tab in tabs %}
        {%- if tab.id == active_tab_id %}
          <li class="active"><a href="{{ tab.link }}">{{ _(tab.label) }}</a></li>
        {%- else %}
          <li><a href="{{ tab.link }}">{{ _(tab.label) }}</a></li>
        {%- endif %}
      {%- endfor %}
    </ul>

  </div>

  {#
  {% if g.is_manager or g.user.is_admin_of(group) %}
    admin...
  {% endif %}
  #}
  <h3>{{ _("Group admins") }}</h3>
  {%- if is_admin %}
  <form action="{{ url_for('.group_post', group_id=group.id) }}" method="POST">
    {{ csrf_token }}
    <input type="text" id="admin-select" name="user" />
    <button type="submit" class="btn" name="action" value="add-admin"><i class="fa fa-plus"></i></button>
  </form>
  {%- endif %}

  {{ m_user_list(group.admins, 'remove-admin', _('remove from administrators')) }}

  <h3>{{ _("Group members") }}</h3>

  {%- if is_admin %}
  <form action="{{ url_for('.group_post', group_id=group.id) }}" method="POST">
    {{ csrf_token }}
    <input type="text" id="user-select" name="user" />
    <button type="submit" class="btn" name="action" value="add"><i class="fa fa-plus"></i></button>
  </form>
  {%- endif %}
  {{ m_user_list(group.members, 'remove', _('remove from group')) }}

{% endblock %}

{% block js %}
<script type="text/javascript">
  $(document).ready(function() {
    $("#user-select").attr("style", "width: 220px").select2({
      minimumInputLength: 2,
      ajax: {
        url: "{{ url_for("social.users_json") }}",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
          return { q: term };
        },
        results: function (data, page) {
          return {results: data.results, more: false};
        }
      },
      allowClear: true
    });
    $("#s2id_user-select a span").text("");
    $("input#user-select").attr("value", "");

    $("#admin-select").attr("style", "width: 220px").select2({
      minimumInputLength: 2,
      ajax: {
        url: "{{ url_for(".group_json", group_id=group.id) }}",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
          return { q: term };
        },
        results: function (data, page) {
          return {results: data.results, more: false};
        }
      },
      allowClear: true
    });
    $("#s2id_admin-select a span").text("");
    $("input#admin-select").attr("value", "");

  });
</script>
{% endblock %}
