{% extends "master.html" %}

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

{% from "_browseheader.html" import browse_header %}
{% from "_render_repo.html" import searchbox %}
{% from "_projectstring.html" import projectstring, projecticon %}


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

{% block content %}
<div class="bg-light border border-top-0 pt-2">
  <div class="container">
        {{browse_header(select=tag)}}
  </div>
</div>
<div class="container mt-5">
  <div class="row mb-3">
  <div class="col align-self-center">
    <h3 class="font-weight-bold">
      Groups <span class="badge badge-secondary">{{ groups | length }}</span>
    </h3>
  </div>
  <div class="col-auto form-inline">
    {{searchbox(select="groups")}}
  </div>
  </div>
  <div class="row">
    {% if groups %}
      {% for group in groups %}
        <div class="col-lg-4 col-md-6">
          <div class="border mb-4">
            <div class="media p-2">
              <div class="align-self-start mr-3"><span class="fa fa-users fa-fw fa-4x text-muted"></span></div>
              <div class="media-body align-self-center">
                  <a href="{{ url_for('ui_ns.view_group', group=group.group_name)}}">
                    <div class="nowrap"><strong>{{ group.group_name }}</strong></div>
                  </a>
                  <div class="nowrap"><small>{{ group.display_name }}</small></div>
              </div>
            </div>
            <div class="bg-light border-top py-1 px-2 mt-0">
                <small>Formed {{ group.created |humanize }}</small>
              <div class="float-right text-muted">
                <span title="{{projectstring(plural=True)}}" data-toggle="tooltip" class="mr-1">
                  <span class="fa {{projecticon()}} pr-1"></span>
                  {{group.projects | count }}
                </span>
                <span title="Members" data-toggle="tooltip">
                  <span class="fa fa-user pr-1"></span>
                   {{group.users | count}}
                </span>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    {% else %}
    <p>No groups have been created on this pagure instance yet</p>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block jscripts %}
    {{ super() }}
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='vendor/selectize/selectize.min.js') }}?version={{ g.version}}" type="text/javascript"> </script>

<script type="text/javascript" nonce="{{ g.nonce }}">
$(document).ready(function() {
  $('#headerSearch').on('keypress keydown keyup', function(e) {
    if (e.which == 13) {
        e.preventDefault();
        return false;
    }
  });

  $('#term').selectize({
    valueField: 'name',
    labelField: 'name',
    searchField: 'group',
    maxItems: 1,
    create: false,
    onType: function(value){
      if (value == ""){
      this.close();
      }
    },
    onChange: function(value){
      if (value != ""){
        $('#headerSearch').submit();
      }
    },
    load: function(query, callback) {
      if (!query.length) return callback();
      $.getJSON(
        "{{ url_for('api_ns.api_groups') }}", {
          pattern: query,
          extended:1,
        },
        function( data ) {
          callback( data.groups );
        }
      );
    },
    render: {
      option: function(item, escape) {
        return '<div>'
          +   '<div class="groupicon-search pull-xs-left">'
          +     '<span class="fa fa-users"></span>'
          +   '</div>'
          +   '<div class="title">'
          +     '<span class="name">'
          +       '<strong>' + escape(item.name) + '</strong>'
          +     '</span>'
          +   '</div>'
          +   '<div class="description">'
          +     '<small>' + escape(item.description) + '</small>'
          +   '</div>'
          + '</div>';
      }
    }
  });
});
</script>
{% endblock %}