{% extends base_template %}
{% load i18n %}

{% block title %}{% trans "Please review our updated terms" %}{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">

      <div class="card shadow-sm">
        <div class="card-body p-4">

          <h1 class="h5 mb-1">{% trans "Our terms have changed" %}</h1>
          <p class="text-secondary small mb-4">
            {% blocktrans %}Open each document, then confirm you accept it. Each one is signed separately.{% endblocktrans %}
          </p>

          <ul class="list-group list-group-flush mb-4" id="ct-rows">
            {% for row in rows %}
              <li class="list-group-item px-0 py-3" data-ct-row>

                <div class="d-flex justify-content-between align-items-center gap-3">
                  <div class="me-auto">
                    {% comment %}
                      The title is a link on EVERY row, signed ones included: once
                      a document is signed its "Go to sign" button disappears, and
                      without this there is no way left to reopen the text you
                      just agreed to.
                    {% endcomment %}
                    <a href="{% url 'consent_trail:document' row.doc_type %}"
                       target="_blank" rel="noopener"
                       class="fw-semibold text-decoration-none">
                      {{ row.doc.title }}
                    </a>
                    <div class="text-secondary small">
                      {% trans "Version" %} {{ row.version }}
                      {% if row.is_fallback %}
                        · {% blocktrans with lang=authoritative_language_name %}shown in another language — only the {{ lang }} version is binding{% endblocktrans %}
                      {% endif %}
                    </div>
                  </div>

                  {% if row.pending %}
                    <a href="{% url 'consent_trail:document' row.doc_type %}"
                       target="_blank" rel="noopener"
                       class="btn btn-sm btn-outline-primary flex-shrink-0"
                       data-ct-open>
                      {% trans "Go to sign" %}
                    </a>
                  {% else %}
                    <span class="badge text-bg-success flex-shrink-0">
                      {% trans "Signed" %}
                    </span>
                  {% endif %}
                </div>

                {% if row.pending %}
                  {% comment %}
                    One form per document: its own POST, therefore its own
                    timestamp. A single form over every document would stamp them
                    all the same second and lose that.
                  {% endcomment %}
                  <form method="post" class="mt-2" data-ct-sign>
                    {% csrf_token %}
                    <input type="hidden" name="doc_type" value="{{ row.doc_type }}">
                    <input type="hidden" name="next" value="{{ next }}">

                    <div class="form-check mb-0">
                      <input class="form-check-input" type="checkbox"
                             id="ct-box-{{ row.doc_type }}" data-ct-box>
                      <label class="form-check-label small" for="ct-box-{{ row.doc_type }}">
                        {% trans "I have read and accept this document" %}
                      </label>
                    </div>
                    <div class="form-text" data-ct-hint>
                      {% trans "Open the document first to enable this." %}
                    </div>

                    {# Without JavaScript the checkbox cannot submit on its own. #}
                    <noscript>
                      <button type="submit" class="btn btn-sm btn-primary mt-2">
                        {% trans "Accept this document" %}
                      </button>
                    </noscript>
                  </form>
                {% elif row.acceptance %}
                  <div class="text-secondary small mt-2">
                    {% blocktrans with when=row.acceptance.accepted_at|date:"d/m/Y H:i" %}Accepted on {{ when }}{% endblocktrans %}
                  </div>
                {% endif %}

              </li>
            {% endfor %}
          </ul>

          {% if pending_count %}
            <button type="button" class="btn btn-primary w-100" disabled>
              {% trans "Continue" %}
            </button>
            <div class="form-text text-center">
              {% blocktrans count counter=pending_count %}One document still needs your signature.{% plural %}{{ counter }} documents still need your signature.{% endblocktrans %}
            </div>
          {% else %}
            <a href="{{ continue_url }}" class="btn btn-primary w-100">
              {% trans "Continue" %}
            </a>
          {% endif %}

        </div>
      </div>

    </div>
  </div>
</div>

<script>
/* Gate each row's checkbox on having opened its document, and submit on tick.
 *
 * Progressive enhancement, in the safe direction: the checkbox ships ENABLED in
 * the HTML and JavaScript is what disables it. Shipping it disabled would lock
 * every user out of the site the day a script fails to load — and this screen
 * blocks the whole application. Opening a link is a nudge, not proof of reading;
 * the server records consent on the POST regardless.
 */
(function () {
  Array.prototype.forEach.call(document.querySelectorAll('[data-ct-row]'), function (row) {
    var form = row.querySelector('[data-ct-sign]');
    if (!form) return;                       // already signed
    var box = form.querySelector('[data-ct-box]');
    var hint = form.querySelector('[data-ct-hint]');
    var link = row.querySelector('[data-ct-open]');
    if (!box || !link) return;

    box.disabled = true;

    link.addEventListener('click', function () {
      box.disabled = false;
      if (hint) hint.hidden = true;
    });

    box.addEventListener('change', function () {
      if (box.checked) {
        box.disabled = true;                 // no double submit
        form.submit();
      }
    });
  });
})();
</script>
{% endblock %}