{% extends 'dg_core/base.html' %}
{% load i18n dg_core %}

{% block title %}{% blocktranslate with name=application.name %}Connect {{ name }}{% endblocktranslate %}{% endblock %}

{% block content %}
<div class="py-4 mx-auto" style="max-width: 32rem">
{% if error %}
  <h1 class="h3 mb-3">{% translate "Cannot connect" %}</h1>
  {% if refused_host %}
    <div class="alert alert-danger">
      {% url 'dg_connect:connect' as connect_url %}
      {% blocktranslate trimmed with host=refused_host %}
        The app from <strong>{{ host }}</strong> may not connect by signing in here. Make a personal token
        for it under <a href="{{ connect_url }}">Connect an agent</a> instead.
      {% endblocktranslate %}
    </div>
  {% else %}
    <div class="alert alert-danger">{{ error.description|default:error.error }}</div>
  {% endif %}
{% else %}
  <h1 class="h3 mb-3">{% blocktranslate with name=application.name %}Connect {{ name }}{% endblocktranslate %}</h1>
  <p>{% blocktranslate trimmed with name=application.name person=user|person_name %}{{ name }} asks to act as you, {{ person }}, in:{% endblocktranslate %}</p>
  <ul>{% for area in areas %}<li>{{ area }}</li>{% endfor %}</ul>
  <p class="text-body-secondary small">
    {% blocktranslate trimmed %}
      It reaches only what you may use yourself, and loses an app the moment you do. You can disconnect it at
      any time under Connect an agent.
    {% endblocktranslate %}
    {% if redirect_host %}{% blocktranslate trimmed with host=redirect_host %}After allowing, you go back to <strong>{{ host }}</strong>.{% endblocktranslate %}{% endif %}
  </p>
  <form method="post">
    {% csrf_token %}
    {% for field in form %}{% if field.is_hidden %}{{ field }}{% endif %}{% endfor %}
    {{ form.non_field_errors }}
    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-outline-secondary w-50">{% translate "Cancel" %}</button>
      <button type="submit" name="allow" value="on" class="btn btn-primary w-50">{% translate "Allow" %}</button>
    </div>
  </form>
{% endif %}
</div>
{% endblock %}