{% extends "deliver_grant_funding/grant_base.html" %}
{% from "govuk_frontend_jinja/components/button/macro.html" import govukButton %}
{% from "govuk_frontend_jinja/components/notification-banner/macro.html" import govukNotificationBanner %}
{% from "deliver_grant_funding/macros/dependency_banner.html" import dependency_banner %}
{% from "govuk_frontend_jinja/components/summary-list/macro.html" import govukSummaryList %}
{% from "deliver_grant_funding/partials/_advanced_formatting_options.html" import advancedFormattingOptions %}
{% from "deliver_grant_funding/macros/deliver_grant_funding_collection_breadcrumb.html" import deliver_grant_funding_collection_breadcrumb %}
{% from "deliver_grant_funding/partials/_question_data_options.html" import questionDataOptions %}

{% set page_title = "Edit question - " ~ db_form.title %}
{% set type_constants = db_form.collection.type.constants %}
{% set active_item_identifier = type_constants.active_nav %}

{% block beforeContent %}

  {% set parent_item = None %}
  {% set truncated=False %}
  {% if question.parent %}
    {% if question.parent.parent %}
      {% set truncated=True %}
    {% endif %}


    {% set parent_html %}
      <span class="govuk-visually-hidden">Question group:</span>
      <span>{{ question.parent.name }}</span>
    {% endset %}
    {% set parent_item={"html": parent_html, "href": url_for("deliver_grant_funding.list_group_questions", grant_id=grant.id, group_id=question.parent_id)} %}
  {% endif %}

  {{
    deliver_grant_funding_collection_breadcrumb(
        grant=grant,
        collection=db_form.collection,
        form=db_form,
        immediate_parent_breadcrumb_item=parent_item,
        this_page_breadcrumb_item={"text":"Edit " ~ question.name},
        truncated=truncated
    )
  }}
{% endblock beforeContent %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      {% with flashes = get_flashed_messages(category_filter=[enum.flash_message_type.QUESTION_CREATED]) %}
        {% if flashes %}
          {% set question_created_content %}
            {% if question.parent %}
              <a class="govuk-notification-banner__link" href="{{ url_for('deliver_grant_funding.list_group_questions', grant_id=grant.id, group_id=question.parent.id) }}">Return to the question group</a>
            {% else %}
              <a class="govuk-notification-banner__link" href="{{ url_for('deliver_grant_funding.list_section_questions', grant_id=grant.id, form_id=db_form.id) }}">Return to the section</a>
            {% endif %}
            to add more questions, or edit this question to add conditions and validations.
          {% endset %}
          {{
            govukNotificationBanner({
              "titleText": flashes[0],
              "html": question_created_content,
              "type": "success"
            })
          }}
        {% endif %}
      {% endwith %}

      {% with flashes = get_flashed_messages(category_filter=[enum.flash_message_type.DEPENDENCY_ORDER_ERROR.value, enum.flash_message_type.DATA_SOURCE_ITEM_DEPENDENCY_ERROR.value]) %}
        {% if flashes %}
          {% for error in flashes %}
            {{ dependency_banner(error, interpolate=interpolate) }}
          {% endfor %}
        {% endif %}
      {% endwith %}

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

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

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

      <h1 class="govuk-heading-l">Edit question</h1>

      <div class="govuk-body govuk-form-group">
        <p id="question-type-label" class="govuk-!-font-weight-bold govuk-!-margin-bottom-1">Question type</p>
        <p class="govuk-body" aria-labelledby="question-type-label">{{ question.data_type.value }}</p>
      </div>

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

        {# Duplicate the submit button, fully hidden, so that the default action for the form is to submit it (rather than add data to a field) #}
        {{ form.submit(params={"classes": "govuk-!-display-none"}) }}

        <div data-module="context-aware-editor" data-toolbar-enabled="false" data-i18n="{}">
          <div class="govuk-!-display-none" data-context nonce="{{ csp_nonce() }}">{{ context_keys_and_labels | tojson }}</div>
          {% set addDataButton %}
            {{ form.add_context(params={"html": "Reference data <span class='govuk-visually-hidden'>in question name</span>", "classes": "govuk-button--secondary app-context-aware--button", "value": "text"}) }}
          {% endset %}
          {{ form.text(params={"label": {"classes": "govuk-!-font-weight-bold"}, "attributes": {"data-module": "textarea-no-newlines", "data-context-aware-editor-target": ""}, "formGroup": {"classes": "app-context-aware--container", "afterInput": {"html": addDataButton} } }) }}
        </div>

        {{ form.name(params={"label": {"classes": "govuk-!-font-weight-bold"} }) }}

        <div data-module="context-aware-editor" data-toolbar-enabled="false" data-i18n="{}">
          <div class="govuk-!-display-none" data-context nonce="{{ csp_nonce() }}">{{ context_keys_and_labels | tojson }}</div>
          {% set addDataButton %}
            {{ form.add_context(params={"html": "Reference data <span class='govuk-visually-hidden'>in question hint</span>", "classes": "govuk-button--secondary app-context-aware--button", "value": "hint"}) }}
          {% endset %}
          {{ form.hint(params={"label": {"classes": "govuk-!-font-weight-bold"}, "attributes": {"data-module": "textarea-no-newlines", "data-context-aware-editor-target": ""}, "formGroup": {"classes": "app-context-aware--container", "afterInput": {"html": addDataButton} } }) }}
        </div>

        {% if question.data_type in [enum.question_type.RADIOS, enum.question_type.CHECKBOXES] %}
          {{ form.data_source_items(params={"label": {"classes": "govuk-!-font-weight-bold"} }) }}


          {% set conditionalHtml %}
            {{ form.none_of_the_above_item_text }}
          {% endset %}
          {{ form.separate_option_if_no_items_match(params={"items": [{"conditional": {"html": conditionalHtml} }]}) }}
        {% endif %}

        {{ questionDataOptions(form, question.data_type, enum) }}

        {{ advancedFormattingOptions(form, question.data_type, enum) }}

        <div class="govuk-form-group">
          <h2 class="govuk-heading-m">Guidance</h2>
          {% if question.parent and question.parent.same_page %}
            {# todo: temporary context - to be replaced with something sensible #}
            <p class="govuk-body">
              This question is part of a group of questions that are all on the same page. Guidance can be added to the
              <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('deliver_grant_funding.list_group_questions', grant_id=grant.id, group_id=question.parent.id) }}">question group</a>.
            </p>
          {% else %}
            <p class="govuk-body">Only add guidance if you need to give a longer explanation of how to answer the question, or to format your content with paragraphs, headings, lists or links.</p>

            {% if question.guidance_body %}
              {% set guidance_text %}
                <pre class="app-pre-markdown">{{ interpolate(question.guidance_body, with_interpolation_highlighting=True) }}</pre>
              {% endset %}
              {{
                govukSummaryList({
                  "rows": [
                    {"key": {"text": "Page heading"}, "value": {"text": question.guidance_heading}, "actions": {"items": [{"href": url_for('deliver_grant_funding.manage_guidance', grant_id=grant.id, question_id=question.id), "text": "Change", "visuallyHiddenText": "page heading"}] } },
                    {"key": {"text": "Guidance text"}, "value": {"html": guidance_text}, "actions": {"items": [{"href": url_for('deliver_grant_funding.manage_guidance', grant_id=grant.id, question_id=question.id), "text": "Change", "visuallyHiddenText": "guidance text"}] } },
                  ]
                })
              }}
            {% else %}
              <a class="govuk-button govuk-button--secondary" href="{{ url_for('deliver_grant_funding.manage_guidance', grant_id=grant.id, question_id=question.id) }}"> Add guidance </a>
            {% endif %}
          {% endif %}
        </div>

        <div class="govuk-form-group">
          <h2 class="govuk-heading-m govuk-!-margin-top-5">Conditions</h2>
          <p class="govuk-body">Add conditions to only show this question if the user has answered other questions in a particular way.</p>

          {% with component=question %}
            {% include 'deliver_grant_funding/partials/component-conditions-operator-table.html' %}
          {% endwith %}

          {% set rows = [] %}

          {% with component=question %}
            {% include 'deliver_grant_funding/partials/_implicit-conditions.html' %}
          {% endwith %}
          {% with component=question %}
            {% include 'deliver_grant_funding/partials/_explicit-conditions.html' %}
          {% endwith %}

          {% if rows %}
            {{ govukSummaryList({ "rows": rows, "classes": "app-tasklist-builder" }) }}
          {% endif %}
          {{
            govukButton({
              "text": "Add condition",
              "href": url_for('deliver_grant_funding.add_question_condition_select_calculation', grant_id=grant.id, component_id=question.id),
              "classes": "govuk-button--secondary govuk-!-margin-bottom-0",
            })
          }}
        </div>
        <div class="govuk-form-group">
          <h2 class="govuk-heading-m">Validations</h2>
          {% if managed_validation_available %}
            <p class="govuk-body">Add validations to show an error message to the user if the answer does not meet the requirements. For example, you can add a validation to stop users entering a number over a certain amount.</p>
            {% set rows = [] %}
            {% with component=question %}
              {% include 'deliver_grant_funding/partials/_explicit-validations.html' %}
            {% endwith %}

            {% if rows %}
              {{ govukSummaryList({ "rows": rows, "classes": "app-tasklist-builder" }) }}
            {% endif %}

            {{
              govukButton({
                "text": "Add more validation" if question.validations else "Add validation",
                "href": url_for("deliver_grant_funding.add_question_validation", grant_id=grant.id, question_id=question.id),
                "classes": "govuk-button--secondary govuk-!-margin-bottom-3"
              })
            }}
          {% else %}
            <p class="govuk-body">Validations are not available for this question type.</p>
          {% endif %}
        </div>

        {{ form.submit(params={"text": "Save", "classes": "govuk-!-margin-top-3"}) }}
      </form>

      <h2 class="govuk-heading-m govuk-!-margin-top-5">Manage question</h2>
      <p class="govuk-body">
        <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('deliver_grant_funding.edit_question', grant_id=grant.id, question_id=question.id, delete='') }}">Delete this question</a>
      </p>
    </div>
  </div>
{% endblock content %}