{% extends "deliver_grant_funding/grant_base.html" %}
{% from "govuk_frontend_jinja/components/back-link/macro.html" import govukBackLink %}
{% from "govuk_frontend_jinja/components/notification-banner/macro.html" import govukNotificationBanner %}
{% from "govuk_frontend_jinja/components/summary-list/macro.html" import govukSummaryList %}
{% from "deliver_grant_funding/collections/_render_managed_expression_form.html" import render_managed_expression_form %}

{% set type_constants = question.form.collection.type.constants %}
{% set active_item_identifier = type_constants.active_nav %}

{% set page_title = "Add validation - " ~ question.name %}

{% block beforeContent %}
  {{ govukBackLink({ "text": "Back", "href": url_for("deliver_grant_funding.edit_question", grant_id=grant.id, question_id=question.id) }) }}
{% endblock beforeContent %}

{% block content %}
  {% set heading = "Edit validation" if expression else "Add validation" %}
  {% set submit_label = "Save validation" if expression else "Add validation" %}

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      {% if confirm_deletion_form %}
        {% set banner_html %}
          <p class="govuk-body govuk-!-font-weight-bold">Are you sure you want to delete this validation?</p>
          <form method="post" novalidate>
            {{ confirm_deletion_form.csrf_token }}

            <span class="govuk-button-group">
              {{ confirm_deletion_form.confirm_deletion(params={"text": "Yes, delete this validation", "classes": "govuk-button--warning govuk-!-margin-bottom-0"}) }}
              <a class="govuk-link govuk-link--no-visited-state govuk-!-margin-bottom-0" href="{{ url_for('deliver_grant_funding.edit_question_validation', grant_id=grant.id, expression_id=expression.id) }}">Cancel</a>
            </span>
          </form>
        {% endset %}

        {{ govukNotificationBanner(params={"role": "alert", "titleText": "Warning", "classes": "", "html": banner_html}) }}
      {% endif %}

      <h1 class="govuk-heading-l">{{ heading }}</h1>

      {{
        govukSummaryList({
          "rows": [
            {"key": {"text": "Section"}, "value": {"text": question.form.title} },
            {"key": {"text": "Question"}, "value": {"text": interpolate(question.text, with_interpolation_highlighting=True)} },
          ],
          "classes": "app-!-border-top-line"
        })
      }}
      {% if form is not none %}
        {% set label_html %}
          What does the answer <span class="govuk-visually-hidden">to {{ interpolate(question.text) }}</span> need to be?
        {% endset %}

        {{ render_managed_expression_form(form, label_html=label_html, submit_label=submit_label, grant_id=grant.id, question_id=question.id) }}

        {% if expression %}
          <div class="govuk-grid-row govuk-!-margin-top-7">
            <div class="govuk-grid-column-two-thirds">
              <h2 class="govuk-heading-m">Manage validation</h2>
              <p class="govuk-body">
                <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('deliver_grant_funding.edit_question_validation', grant_id=grant.id, question_id=question.id, expression_id=expression.id, delete='') }}"
                  >Delete validation</a
                >
              </p>
            </div>
          </div>
        {% endif %}
      {% else %}
        <p class="govuk-body">This question cannot be validated.</p>
      {% endif %}
    </div>
  </div>
{% endblock content %}