{% extends "repo_master.html" %}

{% set tag = "home" %}

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

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

{% block repo %}
<div class="row col-sm-8 col-sm-offset-2">
  <div class="card">
    <div class="card-header" id="card-topic">
      <strong>Add user to the {{repo.name}} project</strong>
    </div>
    <div class="card-block">
      <form action="{{ url_for('ui_ns.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="">

        <select class="form-control" id="access" name="access">
          {% for access in access_levels %}
            <option value="{{ access }}" id="{{ access }}"> {{ access }} </option>
          {% endfor %}
        </select>

        <input class="form-control" name="branches" id="branches" class="hidden"
          placeholder="A comma separated list of branches" value=""/>
      </fieldset>

      <p class="buttons indent">
        <input type="submit" class="btn btn-primary" id="add_update_button" value="Add">
        <input type="button" value="Cancel" class="btn btn-secondary cancel_btn">
        {{ form.csrf_token }}
      </p>
    </form>
    {% include '_access_levels_descriptions.html' %}
    </div>
  </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}}"></script>

<script type="text/javascript" nonce="{{ g.nonce }}">
$( document ).ready(function() {
  $("#branches").hide();

  var user_to_update = "{{ user_to_update }}";
  if (!user_to_update || user_to_update === "None") {
    $('#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 }; }) );
            }
          );
        }
    });
  } else {
    $("#user").attr("value", user_to_update);
    $("#user").attr("readonly", true);
    var user_access = "{{ user_access }}";
    console.log("{{ user_access.branches }}");
    if (user_access !== "None") {
      $("#" + "{{ user_access.access }}").attr("selected", "selected");
    }
    $("#branches").val("{{ user_access.branches or ''}}");
    $("#card-topic").html("<strong>Update user access in {{repo.name}}</strong>");
    $("#add_update_button").attr("value", "Update");
  }

  if ($("#access").val() == "collaborator") {
    $("#branches").show();
  };

  $("#access").on("change", function() {
    var _acc = $("#access");
    if (_acc.val() == "collaborator") {
        $("#branches").show();
    } else {
        $("#branches").hide();
    }
  });

});
</script>
{% endblock %}
