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

{% load static %}

{% block page_title %}Blueprint Settings{% endblock page_title %}

{% block main_heading %}Blueprint Settings{% endblock main_heading %}

{% block main_heading_addendum %}
  <div>
    <p class="m-0 text-muted">ID: {{ object.pk }}</p>
  </div>
{% endblock main_heading_addendum %}

{% block form_content %}

  {% 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 %}

  {% if not rule_formset.forms %}
    <div class="alert alert-warning" role="alert">
      Currently, no Extraction Rules are defined for this Blueprint. This means that no data will be extracted when participants
      upload their data.
    </div>
  {% endif %}

  {# General Settings #}
  {% include "ddm_datadonation/blueprint/form_sections/general_settings.html" %}

  {# Display Settings #}
  {% include "ddm_datadonation/blueprint/form_sections/display_settings.html" %}


  <h5 class="mt-5 fw-bold mb-3 fc-grey">Data Extraction Configuration</h5>
  <div class="row">
    <div class="col-sm-1 data-flow-container">
      <div class="data-flow-border-top"></div>
      <div><i class="bi bi-1-circle-fill"></i></div>
      <div class="data-flow-border-bottom"></div>
    </div>

    <div class="col-12 col-sm-11">
      {# File Identification #}
      {% include "ddm_datadonation/blueprint/form_sections/file_identification.html" %}
    </div>

    <div class="col-sm-1 data-flow-container">
      <div class="data-flow-border-top"></div>
      <div><i class="bi bi-2-circle-fill"></i></div>
      <div class="data-flow-border-bottom"></div>
    </div>

    <div class="col-12 col-sm-11">
      {# File Validation #}
      {% include "ddm_datadonation/blueprint/form_sections/file_validation.html" %}
    </div>

    <div class="col-sm-1 data-flow-container">
      <div class="data-flow-border-top"></div>
      <div><i class="bi bi-3-circle-fill"></i></div>
      <div class="data-flow-border-bottom border-0"></div>
    </div>

    <div class="col-12 col-sm-11">
      {# Data Extraction #}
      {% include "ddm_datadonation/blueprint/form_sections/data_extraction.html" %}
    </div>

  </div>

  {# Delete Section #}
  {% include "ddm_datadonation/blueprint/form_sections/delete.html" %}

  {{ file_uploader_meta|json_script:'file_uploader_meta' }}
{% endblock form_content %}

{% block scripts %}
  {{ block.super }}
  <script src="{% static 'ddm_datadonation/js/blueprint-edit-ui-helpers.js' %}"></script>
  <script src="{% static 'ddm_datadonation/js/file-path-form-helper.js' %}"></script>
  <script src="{% static 'ddm_datadonation/js/processing-rule-modal.js' %}"></script>
  <script src="{% static 'ddm_datadonation/js/processing-rule-formset-error-indicator.js' %}"></script>
  <script src="{% static 'ddm_datadonation/js/blueprint-general-ui-helpers.js' %}"></script>
  <script src="{% static 'ddm_datadonation/js/accordion-form-error-indicator.js' %}"></script>
{% endblock scripts %}