{% extends "_root.html" %}
{% block body %}
<h2>Authorize Application</h2>

<div class="client-info">
  <h3>{{ client_name|default("Unknown Application") }}</h3>
  {% if client_uri %}
  <p><a href="{{ client_uri }}" target="_blank">{{ client_uri }}</a></p>
  {% endif %}
  {% if client_description %}
  <p>{{ client_description }}</p>
  {% endif %}
  <p><strong>Client ID:</strong> <code>{{ client_id }}</code></p>
</div>

{% if requested_scopes %}
<div class="scopes-info">
  <h4>Requested Permissions</h4>
  <ul>
  {% for scope in requested_scopes %}
    <li>
      <strong>{{ scope }}</strong>
      {% if scope == "profile" %}- Access your name and profile information{% endif %}
      {% if scope == "email" %}- Access your email address{% endif %}
    </li>
  {% endfor %}
  </ul>
</div>
{% else %}
<div class="scopes-info">
  <h4>Requested Permissions</h4>
  <p><em>No specific permissions requested (authentication only)</em></p>
</div>
{% endif %}

<div class="user-info">
  <h4>Signing in as</h4>
  <p><strong>{{ user_name }}</strong> ({{ user_url }})</p>
</div>

<form method="post" action="/auth/confirm">
  <fieldset>
    <input type="hidden" name="pending_id" value="{{ pending_id }}" />
    
    <div class="button-group">
      <button type="submit" name="action" value="approve" class="approve">Allow</button>
      <button type="submit" name="action" value="deny" class="deny">Deny</button>
    </div>
  </fieldset>
</form>

<style>
.client-info {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
}
.client-info code {
  background: #e9ecef;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}
.scopes-info {
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
}
.scopes-info ul {
  margin: 0.5rem 0 0 1rem;
  padding: 0;
}
.user-info {
  background: #f3e5f5;
  border: 1px solid #ce93d8;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
}
.button-group {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.button-group button {
  flex: 1;
}
.button-group button.approve {
  background-color: #4caf50;
  border-color: #4caf50;
}
.button-group button.approve:hover {
  background-color: #45a049;
  border-color: #45a049;
}
.button-group button.deny {
  background-color: #f44336;
  border-color: #f44336;
}
.button-group button.deny:hover {
  background-color: #da190b;
  border-color: #da190b;
}
</style>
{% endblock %}