{% macro render_api_token(token, repo, username, form) -%}
<div class="form-group{% if token.expired %} expired_api_keys{% endif %}">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <span class="fa fa-key"></span>
          <strong> {{ token.description or '' }}</strong>
        </span>
      </div>
      <div class="input-group-prepend">
        <span class="input-group-text">
          <a href="#"
            data-toggle="modal" data-target="#acls{{ token.id }}">
            {{token.acls_list_pretty|length}} ACLs
          </a>
        </span>
        <div class="modal fade" id="acls{{ token.id }}" tabindex="-1"
              role="dialog" aria-labelledby="ACLs" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                  <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">ACLs</h4>
              </div>
              <div class="modal-body">
                <ul>
                  {% for acl in token.acls_list_pretty %}
                    <li>{{ acl }}</li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <input class="form-control bg-white font-monospace" type="text" value="{{ token.id }}" readonly>
      {% if token.expired %}
        <span class="input-group-prepend">
          <span class="input-group-text text-danger">
            <small class="font-weight-bold">Expired on {{ token.expiration.date() }}</small>
          </span>
        </span>
      {% else %}
        <span class="input-group-prepend">
          <span class="input-group-text text-success">
            <small class="font-weight-bold">Active until {{ token.expiration.date() }}</small>
          </span>
        </span>
      {% endif %}
      {% if not token.expired %}
        {% if repo %}
          <form action="{{ url_for(
            'ui_ns.revoke_api_token',
            repo=repo.name,
            username=username,
            namespace=repo.namespace,
            token_id=token.id) }}"
            method="post" class="icon">
        {% else %}
          <form action="{{ url_for(
                'ui_ns.revoke_api_user_token', token_id=token.id) }}"
            method="post" class="icon">
        {% endif %}
        <button class="btn btn-outline-danger revoke_token_btn" type="submit"
            title="Revoke token">
          <i class="fa fa-trash"></i>
        </button>
        {{ form.csrf_token }}
      </form>
      {% endif %}
      {% if repo %}
      <form action="{{ url_for(
          'ui_ns.renew_api_token',
          repo=repo.name,
          username=username,
          namespace=repo.namespace,
          token_id=token.id) }}"
          method="post" class="icon">
      {% else %}
      <form action="{{ url_for('ui_ns.renew_api_user_token', token_id=token.id) }}"
          method="post" class="icon">
      {% endif %}
      <button class="btn btn-outline-primary renew_token_btn" type="submit"
          title="Renew token">
        <i class="fa fa-refresh"></i>
      </button>
      {{ form.csrf_token }}
      </form>
    </div>
  </div>
{%- endmacro %}

