{% 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>
      </fieldset>

      <p class="buttons indent">
        <input type="button" value="Cancel" class="btn btn-secondary cancel_btn">
        <input type="submit" class="btn btn-primary" id="add_update_button" value="Add">
        {{ form.csrf_token }}
      </p>
    </form>
    <p class="center"> <strong>Access Levels</strong> </p>
    <p class="justify">
    <strong>Ticket</strong>: A user or a group with this level of access can only edit metadata
      of an issue. This includes changing the status of an issue, adding/removing
      tags from them, adding/removing assignees and every other option which can
      be accessed when you click "Edit Metadata" button in an issue page. However,
      this user can not "create" a new tag or "delete" an existing tag because,
      that would involve access to settings page of the project which this user
      won't have. It also won't be able to "delete" the issue because, it falls
      outside of "Edit Metadata".
    </p>
    <p class="justify">
    <strong>Commit</strong>: A user or a group with this level of access can do everything what
      a user/group with ticket access can do + it can do everything on the project
      which doesn't include access to settings page. It can "Edit Metadata" of an issue
      just like a user with ticket access would do, can merge a pull request, can push
      to the main repository directly, delete an issue, cancel a pull request etc.
    </p>
    <p class="justify">
    <strong>Admin</strong>: The user/group with this access has access to everything on the project.
      All the "users" of the project that have been added till now are having this access.
      They can change the settings of the project, add/remove users/groups on the project.
    </p>
    </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() {
  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 }}";
    if (user_access !== "None") {
      $("#" + "{{ user_access.access }}").attr("selected", "selected");
    }
    $("#card-topic").html("<strong>Update user access in {{repo.name}}</strong>");
    $("#add_update_button").attr("value", "Update");
  }

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