{% if repo %}
{% extends "repo_master.html" %}
{% else %}
{% extends "master.html" %}
{% endif %}
{% from "_formhelper.html" import render_bootstrap_field %}

{% set tag = "home" %}
{% block title %}Create token{% endblock %}

{% macro render_page() %}
<div class="container p-t-3">
  <div class="row">
    <div class="col-md-8 mx-auto mt-5">
      <div class="card">
        <div class="card-header">
          <strong>Create a new token</strong>
        </div>
        <div class="card-block p-3">
          <p>
            From the list below, select one or more actions you want to
            authorize this token for.
          </p>
          <p>
            After that, click 'Create' to generate a token with the selected
            permissions.
          </p>
          {% if repo %}
          <form action="{{
              url_for('ui_ns.add_token', username=username,
                      repo=repo.name, namespace=repo.namespace)
          }}" method="post">
          {% else %}
          <form action="{{ url_for('ui_ns.add_api_user_token') }}" method="post">
          {% endif %}
          {{ render_bootstrap_field(
              form.description, field_description="Small description of this API token") }}
          <strong><label for="acls">ACLs</label></strong><br/>

          {% for acl in acls %}
          <div>
            <label class="c-input c-checkbox">
              <input type="checkbox" name="acls" value="{{ acl.name }}">
              <span class="c-indicator"></span>
              {{ acl.description }}
            </label>
          </div>
          {% endfor %}
          <div class="p-t-2">
            <input type="submit" class="btn btn-primary" value="Create">
            {% if repo %}
            <a class="btn btn-secondary" href="{{ url_for('ui_ns.view_settings',
                username=username, repo=repo.name, namespace=repo.namespace)
                }}">Cancel</a>
            {% else %}
            <a class="btn btn-secondary" href="{{ url_for('ui_ns.user_settings')
                }}#nav-api-tab">Cancel</a>
            {% endif %}
            <span class="btn toggle_all">Toggle all</span>
            {{ form.csrf_token }}
          </div>
        </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" nonce="{{ g.nonce }}">
  function toggle() {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = !checkboxes[i].checked;
    }
  }
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('.toggle_all').addEventListener('click', toggle);
  });
</script>
{% endmacro %}


{% block content %}
    {{ render_page() }}
{% endblock %}

{% block repo %}
    {{ render_page() }}
{% endblock %}