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

  url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}?version={{ g.version}}"/>

{% endblock %}

{% block content %}

        {{browse_header(select=tag)}}

      Groups {{ groups | length }}

    {{searchbox(select="groups")}}

    {% if groups %}

      {% for group in groups %}

                    
{{ group.group_name }}

                  
<small>{{ group.display_name }}</small>

                <small>Formed {{ group.created |humanize }}</small>

                  {{group.projects | count }}

                   {{group.users | count}}

      {% endfor %}

    {% else %}

    
No groups have been created on this pagure instance yet

    {% endif %}

{% endblock %}

{% block jscripts %}

    {{ super() }}

  url_for('static', filename='vendor/selectize/selectize.min.js') }}?version={{ g.version}}" type="text/javascript"> 

<script nonce="{{ g.nonce }}" type="text/javascript"></script>

$(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 '
'

          +   '
'

          +     ''

          +   ''

          +   '
'

          +     ''

          +       '' + escape(item.name) + ''

          +     ''

          +   ''

          +   '
'

          +     '<small>' + escape(item.description) + '</small>'

          +   ''

          + '';

      }

    }

  });

});

{% endblock %}