{% 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_condition_custom_expression_field with context %}

{% set type_constants = component.form.collection.type.constants %}
{% set active_item_identifier = type_constants.active_nav %}
{% if expression %}
  {% set heading = "Edit a calculated condition" %}
  {% set submit_label = "Save calculated condition" %}
  {% set back_link = url_for("deliver_grant_funding.edit_question", grant_id=grant.id, question_id=component.id) if not component.is_group else url_for("deliver_grant_funding.list_group_questions", grant_id=grant.id, group_id=component.id) %}
{% else %}
  {% set heading =  "Create a calculated condition" %}
  {% set submit_label = "Add calculated condition" %}
  {% set back_link= url_for("deliver_grant_funding.add_question_condition_select_calculation", grant_id=grant.id, component_id=component.id) %}
{% endif %}

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

{% block beforeContent %}
  {{ govukBackLink({ "text": "Back", "href": back_link }) }}
{% 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 condition?</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 condition", "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_calculated_condition', grant_id=grant.id, component_id=component.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": component.form.title} },
            {
              "key": { "text": "This question" if not component.is_group else "This group" },
              "value": { "text": interpolate(component.text) },
            },
        ],
        "classes": "app-!-border-top-line"})
      }}
      <form method="post" novalidate>
        {{ form.csrf_token }}
        {{
          form.expression_name(params={
          "hint":{"text":'A brief description of what the calculated answer must be to meet the condition. For example, the '
          + ('question' if not component.is_group else 'group') + ' is shown when “Capital and revenue spend are more than the funding amount”.'},
          "label": {"classes": "govuk-!-font-weight-bold"},})
        }}
        {{ render_calculated_condition_custom_expression_field(form, component.is_group) }}
        {{ 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 condition</h2>
        <p class="govuk-body">
          <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('deliver_grant_funding.edit_calculated_condition', grant_id=grant.id, expression_id=expression.id,delete='') }}">Delete condition</a>
        </p>
      </div>
    </div>
  {% endif %}
{% endblock content %}