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

{% set tag = "home" %}

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

{% block title %}Add user - {{
    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 user to the {{repo.name}} project</strong>
    </div>
    <div class="card-block">
      <form action="{{ url_for('.add_user',
                       username=username, repo=repo.name,
                       namespace=repo.namespace) }}" method="post">

      <fieldset class="form-group">
        <label for="user"><strong>Username</strong></label>
        <input class="form-control" name="user" id="user"
          placeholder="Start typing to search users"
          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() {
  $('#user').selectize({
      valueField: 'user',
      labelField: 'user',
      searchField: 'user',
      maxItems: 1,
      create: false,
      load: function(query, callback) {
        if (!query.length) return callback();
        $.getJSON(
          "{{ url_for('api_ns.api_users') }}", {
            pattern: query.term
          },
          function( data ) {
            callback( data.users.map(function(x) { return { user: x }; }) );
          }
        );
      }
  });
});
</script>
{% endblock %}