{% extends "deliver_grant_funding/grant_base.html" %}
{% from "govuk_frontend_jinja/components/back-link/macro.html" import govukBackLink %}
{% from "govuk_frontend_jinja/components/table/macro.html" import govukTable %}

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

{% set page_title = "Format " ~ session_data.name ~ " number columns" %}

{% block beforeContent %}
  {% set back_link = url_for("deliver_grant_funding.map_data_set_columns", grant_id=grant.id, collection_type=collection.type, collection_id=collection.id, data_source_id=session_data.data_source_id if session_data.is_replace == True else None) %}
  {{ govukBackLink({ "text": "Back", "href": back_link }) }}
{% endblock beforeContent %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h1 class="govuk-heading-l">
        <span class="govuk-caption-l">{{ collection.name }}</span>
        Format {{ session_data.name }} number columns
      </h1>
      <p class="govuk-body">Format the data set’s number columns as they should appear in the {{ type_constants.singular }}.</p>
      <p class="govuk-body">For example, adding the ‘kg’ suffix to format the column’s numbers like 100kg.</p>
    </div>
    <div class="govuk-grid-column-full">
      <form method="POST" novalidate>
        {{ form.csrf_token }}

        {% set rows = [] %}
        {% for mapping in session_data.column_mappings if mapping.requires_manual_formatting %}
          {% set idx = loop.index0 %}
          {% set preview_html = session_data.preview_data[mapping.column_name] | join('<br>') %}
          {% set settings_html %}
            <div>{{ form.columns[idx].form.prefix(params={"label": {"html": "Prefix (optional) <span class='govuk-visually-hidden'> for " ~ mapping.column_name ~ "</span>" }, "classes": "govuk-input--width-10"}) }}</div>
            <div>{{ form.columns[idx].form.suffix(params={"label": {"html": "Suffix (optional) <span class='govuk-visually-hidden'> for " ~ mapping.column_name ~ "</span>" }, "classes": "govuk-input--width-10"}) }}</div>
            {% if mapping.number_type == enum.number_type_enum.DECIMAL %}
              <div>{{ form.columns[idx].form.max_decimal_places(params={"label": {"html": "Decimal places<span class='govuk-visually-hidden'> for " ~ mapping.column_name ~ "</span>" }, "classes": "govuk-input--width-10"}) }}</div>
            {% endif %}
          {% endset %}
          {%
            do rows.append([
              {"text": mapping.column_name},
              {"html": preview_html},
              {"html": settings_html}
            ])
          %}
        {% endfor %}

        {{
          govukTable({
            "head": [
              {"text": "Column name", "classes": "govuk-!-width-one-quarter"},
              {"text": "Example data", "classes": "govuk-!-width-one-half"},
              {"text": "Formatting options"}
            ],
            "rows": rows
          })
        }}

        <div class="govuk-button-group">
          {{ form.submit }}
          <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('deliver_grant_funding.list_collection_data_sets', grant_id=grant.id, collection_type=collection.type, collection_id=collection.id) }}">Cancel</a>
        </div>
      </form>
    </div>
  </div>
{% endblock content %}