{% extends "master.html" %}

{% block title %}Groups{% endblock %}
{% set tag = "groups" %}

{% from "_browseheader.html" import browse_header %}

{% block header %}
<link href="{{ url_for('static', filename='selectize.bootstrap3.css') }}"
  rel="stylesheet" />
{% endblock %}

{% block content %}
<div class="repo-header p-t-1">
  <div class="container">
        {{browse_header(select=tag)}}
  </div>
</div>
<div class="container p-t-2">
  <h2 class="m-b-1">
    Groups <span class="label label-default">{{ groups | length }}</span>
    {% if authenticated and config.get('ENABLE_GROUP_MNGT', False) %}

      <button type="button" id="new_user_btn" data-target="#add_group"
        class="btn btn-success pull-xs-right" data-toggle="modal">
        New Group
      </button>

    {% endif %}
  </h2>

  {% if authenticated %}
  <div class="modal fade" id="add_group" tabindex="-1" role="dialog" aria-labelledby="add_group" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Create New Group</h4>
        </div>
        <form action="{{ url_for('.add_group') }}" method="post">
          <div class="modal-body">
            <fieldset>
              <strong>Group Name:</strong>
              <input class="form-control" id="group_name" name="group_name" title="Group name" />
              {%- if admin %}
              {{ form.group_type()|safe }}
              {%- endif %}
              {{ form.csrf_token }}
            </fieldset>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <input type="submit" class="btn btn-primary" value="Add">
          </div>
        </form>
      </div>
    </div>
  </div>
  {% endif %}

  {% if total_page and total_page > 1 %}
  <nav class="text-center">
    <ul class="pagination">
      <li {% if page <= 1%} class="disabled" {% endif %}>
      <a href="{{ url_for('view_groups') }}?page={{page - 1}}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Newer</span>
        </a>
      </li>
      <li class="active">page {{ page }} of {{total_page}}</li>
      <li {% if page >= total_page %}class="disabled"{%endif%}>
        <a href="{{ url_for('view_groups') }}?page={{page + 1}}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">Older</span>
        </a>
      </li>
    </ul>
  </nav>
  {% endif %}

  <section class="user_list">
    {% if groups %}
      {% for group in groups %}
        <div class="col-lg-4 col-md-6">
          <div class="project_wrapper m-b-1">
              <div class="projecticon pull-xs-left"><span class="oi" data-glyph="people"></span></div>
              <a class="project_link logo_link" href="{{ url_for('view_group', group=group.group_name)}}">
                <div class="repo_name" title={{ group.group_name }}>
                  <strong>{{ group.display_name }}</strong>
                </div>
             </a>
             <div class="repo_desc">
              <small>Formed {{ group.created |humanize }}</small>
            </div>
            <div class="project_metadata">
              <div style="text-align:right;" class="p-r-1 text-muted"><span title="Projects" data-toggle="tooltip"><span class="oi" data-glyph="document"></span> {{group.projects | count }}</span> &nbsp;<span title="Members" data-toggle="tooltip"><span class="oi" data-glyph="person"></span> {{group.users | count}}</span></div>
            </div>
          </div>
        </div>
      {% endfor %}
    {% else %}
    <p>No groups have been created on this pagure instance yet</p>
    {% endif %}
  </section>
</div>
{% endblock %}

{% block jscripts %}
    {{ super() }}
<script src="{{ url_for('static', filename='selectize.min.js') }}" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function() {
  $('#headerSearch').on('keypress keydown keyup', function(e) {
    if (e.which == 13) {
        e.preventDefault();
        return false;
    }
  });
  {% if config.get('ENABLE_GROUP_MNGT', False) %}
  $('#add_group').on(
    'shown.bs.modal', function () {
      $('#group_name').focus()
    }
  );
  {% endif %}

  $('#term').selectize({
    valueField: 'group',
    labelField: 'group',
    searchField: 'group',
    onType: function(value){
      if (value == ""){
      this.close();
      }
    },
    onChange: function(value){
      if (value != ""){
        $('#headerSearch').submit();
      }
    },
    maxItems: 1,
    create: false,
    load: function(query, callback) {
      if (!query.length) return callback();
      $.getJSON(
        "{{ url_for('api_ns.api_groups') }}", {
          pattern: query
        },
        function( data ) {
          callback( data.groups.map(function(x) { return { group: x }; }) );
        }
      );
    }
  });
});
</script>
{% endblock %}