{% extends "repo_master.html" %}
{% from "_formhelper.html" import render_field_in_row %}

{% set tag = "groups" %}

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

{% block title %}Add group - {{
    repo.namespace + '/' if repo.namespace }}{{ repo.name }}{% endblock %}


{% block repo %}

<div class="row col-sm-6 col-sm-offset-3">
  <div class="card">
    <div class="card-header">
      <strong>Add group to the {{repo.name}} project</strong>
    </div>
    <div class="card-block">
      <form action="{{
        url_for('.add_group_project',
            username=username, repo=repo.name, namespace=repo.namespace)
        }}" method="post">

      <fieldset class="form-group">
        <label for="group"><strong>Username</strong></label>
        <input class="form-control" name="group" id="group"
          placeholder="Start typing to search groups"
          value="" />
      </fieldset>

      <p class="buttons indent">
        <input type="button" value="Cancel" class="btn btn-secondary" onclick="history.back();">
        <input type="submit" class="btn btn-primary" value="Add">
        {{ form.csrf_token }}
      </p>
    </form>
    </div>
  </div>
</div>

{% endblock %}

{% block jscripts %}
{{ super() }}
<script type="text/javascript"
        src="{{ url_for('static', filename='selectize.min.js') }}"></script>
<script type="text/javascript">
$( document ).ready(function() {
  $('#group').selectize({
      valueField: 'group',
      labelField: 'group',
      searchField: 'group',
      maxItems: 1,
      create: {{ (not config.get('ENABLE_GROUP_MNGT', False)) | lower }},
      load: function(query, callback) {
        if (!query.length) return callback();
        $.getJSON(
          "{{ url_for('api_ns.api_groups') }}", {
            pattern: query.term
          },
          function( data ) {
            callback( data.groups.map(function(x) { return { group: x }; }) );
          }
        );
      }
  });
});
</script>
{% endblock %}