{% extends "base.html" %}
{% load i18n %}
{% load orbit %}

{% block title %}
Authorization request
{% endblock %}

{% block content %}
<div class="segment full whitespace-normal form">
  <form class="segment half sm-full whitespace-normal" method="post" action="{% url 'oidc_provider:authorize' %}">
    <h2 class="text-underline text-bold text-center text-color-primary" style="font-size: 2em;">Authorization</h2>
    {% csrf_token %}
    {{ hidden_inputs }}
    <div>
      {% if scopes|length > 0 %}
      <p class="text-semibold text-color-heading">{% trans "L'application" %} <strong>{{ client.name }}</strong> {% trans "demande à accéder à ces informations te concernant :" %}</p>
      <ul>
        {% for scope in scopes %}
        <li><strong>{{ scope.name }}</strong><br><i>{{ scope.description }}</i></li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="text-semibold text-color-heading">The <strong>BSGN Agrifood Community Platform</strong> needs to access your profile.</p>
      {% endif %}
    </div>
    <div class="segment full margin-top-xlarge">
      <div class="segment block labelled-avatar two-lines">
        <div class="segment margin-right-xsmall">
          <div class="avatar">
            <img src="{% if user.account.picture %}{{ user.account.picture }}{% else %}{% orbit 'client.defaultAvatar' %}{% endif %}">
          </div>
        </div>
        <div class="segment text-left">
          <div class="text-semibold text-color-heading">{% firstof user.name user.username user.email %}</div>
          <div class="text-color-heading">{% firstof user.email %}</div>
        </div>
      </div>
    </div>
    <div class="segment full whitespace-normal margin-top-xxlarge">
      <div class="submit-button segment full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase color-primary bordered">
        <input class="segment half" style="background-color: var(--color-primary); color: white" name="allow" type="submit" value="I agree" />
      </div>
      <div class="segment full margin-top-xsmall">
        <a class="segment half text-xsmall button text-bold text-uppercase color-primary bordered" href="{% url 'logout' %}">{% trans "Back" %}</a>
      </div>
    </div>
  </form>
  <div class="segment full margin-top-large">
    <a class="link" style="color: var(--color-primary); font-size: 0.8em;" href="https://bsgn.spacecoop.eu/legal_T&C.html">Terms & Conditions</a>&nbsp;-&nbsp;<a class="link" style="color: var(--color-primary); font-size: 0.8em;" href="https://bsgn.spacecoop.eu/legal_DPP.html">Privacy Policy</a>
  </div>
</div>
{% endblock %}
