{% extends "_base.html" %}
{% block content %}
<h1>Authorize Client</h1>
<p>Client ID: <code>{{ client_id }}</code></p>

<style>
  .form-grid {
    display: grid;
    grid-template:
      "a a"
      "b c" / 1fr 1fr;
    column-gap: 1rem;
  }
</style>
<div class="form-grid">
  <form method="post" style="display: contents">
    <div style="grid-area: a">
      {% if sub_missing %}
        <input
          type="text"
          name="sub"
          placeholder="sub"
          required
          autofocus
          aria-invalid="true"
          aria-describedby="sub-missing"
        />
        <small id="sub-missing">The field is missing</small>
      {% else %}
        <input type="text" name="sub" placeholder="sub" required autofocus />
      {% endif %}
    </div>
    <button type="submit">Authorize</button>
  </form>
  <form method="post">
    <button type="submit" name="action" value="deny" class="contrast">Deny</button>
  </form>
</div>
<p>You will be redirected to {{ redirect_uri }}</p>

{% if predefined_users %}
<h2 id="heading-auth-predefined">Authenticate predefined users</h2>
<form method="post" aria-labelledby="heading-auth-predefined">
{% for sub in predefined_users %}
  <button class="outline" style="width: auto" type="submit" name="sub" value="{{ sub }}">{{ sub }}</button>
{% endfor %}
</form>
{% endif %}

{% if recent_subjects %}
<h2 id="heading-auth-previous">Authenticate previous users</h2>
<form method="post" aria-labelledby="heading-auth-previous">
{% for subject in recent_subjects %}
  <button class="outline secondary" style="width: auto" type="submit" name="sub" value="{{ subject }}">{{ subject }}</button>
{% endfor %}
</form>
{% endif %}

{% endblock %}