{% extends 'ddm_core/page_with_form.html' %}

{% load static %}

{% block page_title %}Create New File Blueprint{% endblock %}

{% block main_heading %}Create New File Blueprint{% endblock %}

{% block submit_label %}Create File Blueprint{% endblock %}

{% block cancel_target %}{% url 'ddm_datadonation:overview' project.url_id %}{% endblock %}

{% block main_form %}
  <form method='post'>
    {% csrf_token %}
    {{ form.media }}

    {% if form.errors or rule_formset.errors or path_formset.errors %}
      {% include "ddm_core/form_components/_general_form_errors.html" with override_standard_errors=True %}
    {% endif %}

    {{ form.non_field_errors }}

    <div class="ddm-accordion mt-2" id="accordionFormA">

      {# General Settings #}
      {% with content_include_path="ddm_datadonation/blueprint/form_sections/general_settings.html" %}
        {% with accordion_description="Name and associated Uploader" %}
          {% include "ddm_core/components/accordion_card.html" with extra_classes="mb-4" accordion_id="GeneralSettings" accordion_title="General Settings" is_expanded=True %}
        {% endwith %}
      {% endwith %}

      {# Display Settings #}
      {% with content_include_path="ddm_datadonation/blueprint/form_sections/display_settings.html" %}
        {% with accordion_description="What participants see on the donation page" %}
          {% include "ddm_core/components/accordion_card.html" with extra_classes="mb-4" accordion_id="DisplaySettings" accordion_title="Display Settings" is_expanded=True %}
        {% endwith %}
      {% endwith %}

    </div>

    <h5 class="mt-5 fw-bold mb-3">Data Extraction Configuration</h5>
    <div class="ddm-accordion mt-2" id="accordionFormB">

      {# File Identification #}
      {% with content_include_path="ddm_datadonation/blueprint/form_sections/file_identification_settings.html" %}
        {% with accordion_description="Only necessary if Blueprint belongs to a Zip Uploader" %}
          {% include "ddm_core/components/accordion_card.html" with accordion_id="IdentificationSettings" accordion_title="File Identi<wbr>fication" is_expanded=True %}
        {% endwith %}
      {% endwith %}

      {# File Validation #}
      {% with content_include_path="ddm_datadonation/blueprint/form_sections/file_validation_settings.html" %}
        {% with accordion_description="How an identified file is validated" %}
          {% include "ddm_core/components/accordion_card.html" with accordion_id="ValidationSettings" accordion_title="File Validation" is_expanded=True %}
        {% endwith %}
      {% endwith %}

      {# Data Extraction #}
      {% with content="You can configure the data extraction once you have created the File Blueprint." %}
        {% with accordion_description="You can configure the data extraction once you have created the Blueprint." %}
          {% include "ddm_core/components/accordion_card.html" with accordion_id="DataExtractionSettings" accordion_title="Data Extraction Rules" is_expanded=False is_disabled=True %}
        {% endwith %}
      {% endwith %}

    </div>

    <div class="ddm-btn-group">
      <div>{# Spacing element #}</div>
      <div class="inner-btn-group">
        <div><a class="ddm-btn-base ddm-btn-secondary" href="{% url 'ddm_datadonation:overview' project.url_id %}">Cancel</a></div>
        <div><input class="ddm-btn-base ddm-btn-green" type="submit" value="Create Blueprint"></div>
      </div>
    </div>

  </form>
{% endblock %}

{% block breadcrumbs %}
  <a href="{% url 'ddm_projects:list' %}">Projects</a><i class="bi bi-chevron-right"></i>
  <a href="{% url 'ddm_projects:detail' project.url_id %}">"{{ project.name|truncatechars:15 }}" Project</a><i class="bi bi-chevron-right"></i>
  <a href="{% url 'ddm_datadonation:overview' project.url_id %}">Data Donation</a><i class="bi bi-chevron-right"></i>
  Create File Blueprint
{% endblock %}

{% block scripts %}
  {{ block.super }}
  {{ file_uploader_meta|json_script:'file_uploader_meta' }}
  <script src="{% static 'ddm_datadonation/js/blueprint-general-ui-helpers.js' %}"></script>
  <script src="{% static 'ddm_datadonation/js/file-path-form-helper.js' %}"></script>
  <script src="{% static 'ddm_datadonation/js/accordion-form-error-indicator.js' %}"></script>
{% endblock scripts %}