{% extends "deliver_grant_funding/grant_base.html" %}
{% from "govuk_frontend_jinja/components/back-link/macro.html" import govukBackLink %}
{% from "govuk_frontend_jinja/components/summary-list/macro.html" import govukSummaryList %}
{% from "govuk_frontend_jinja/components/notification-banner/macro.html" import govukNotificationBanner %}
{% from "deliver_grant_funding/macros/render_calculated_form_fields.html" import render_calculated_validation_custom_expression_field, render_calculated_validation_custom_message_field with context %}

{% set type_constants = question.form.collection.type.constants %}
{% set active_item_identifier = type_constants.active_nav %}
{% if expression %}
  {% set heading = "Edit a calculated validation" %}
  {% set submit_label = "Save calculated validation" %}
  {% set back_link_href= url_for("deliver_grant_funding.edit_question", grant_id=grant.id, question_id=question.id) %}
{% else %}
  {% set heading =  "Create a calculated validation" %}
  {% set submit_label = "Add calculated validation" %}
  {% set back_link_href= url_for("deliver_grant_funding.add_question_validation", grant_id=grant.id, question_id=question.id) %}
{% endif %}

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

{% block beforeContent %}
  {{ govukBackLink({ "text": "Back", "href": back_link_href }) }}
{% endblock beforeContent %}

{% block content %}
  <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_custom_question_validation', grant_id=grant.id, question_id=question.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": "This question"}, "value": {"text": interpolate(question.text, with_interpolation_highlighting=True)} },
          ],
          "classes": "app-!-border-top-line"
        })
      }}

      <form method="post" novalidate>
        {{ form.csrf_token }}


        {% set customExpressionHint %}
          <p class="govuk-body">Use number question references, calculation symbols and numbers to describe what the answer needs to be. Start with referencing this question.</p>

          <p class="govuk-body govuk-!-margin-bottom-0">For example, if this question asks for the total spend and the answer should equal previous answers for capital spend plus revenue spend, the calculation would be:</p>

          <div class="govuk-inset-text govuk-!-margin-top-0">
            <span class="app-context-aware-editor--valid-reference">((total spend))</span> == <span class="app-context-aware-editor--valid-reference">((capital spend))</span> +
            <span class="app-context-aware-editor--valid-reference">((revenue spend))</span>
          </div>
        {% endset %}
        {% set customMessageHint %}
          <p class="govuk-body">For example, “Total spend cannot be more than capital spend plus revenue spend”</p>
        {% endset %}
        {{ render_calculated_validation_custom_expression_field(form,customExpressionHint) }}
        {{ render_calculated_validation_custom_message_field(form,customMessageHint) }}
        {{ form.submit(params={"text": submit_label, "classes": "govuk-!-margin-top-6"}) }}
      </form>
    </div>
  </div>
  {% 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_custom_question_validation', grant_id=grant.id, question_id=question.id, expression_id=expression.id, delete='') }}"
            >Delete validation</a
          >
        </p>
      </div>
    </div>
  {% endif %}
{% endblock content %}