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