{% extends 'ddm/admin/generic/page_with_form.html' %}

{% 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 'data-donation-overview' project.pk %}{% endblock %}

{% block breadcrumbs %}
<a href="{% url 'project-list' %}">Projects</a> /
<a href="{% url 'project-detail' project.pk %}">"{{ project.name|truncatechars:15 }}" Project</a> /
<a href="{% url 'data-donation-overview' project.pk %}">Data Donation</a> /
Create File Blueprint
{% endblock %}

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

    <div class="ddm-admin-form">
      {% for field in form %}
        {% if field.name not in "expected_fields,expected_fields_regex_matching,regex_path,exp_file_format,csv_delimiter,json_extraction_root" %}
          <p>
            {{ field.label_tag }}
            {{ field.errors }}
            <span class="helptext">{{ field.help_text }}</span><br>
            {{ field }}
          </p>
        {% endif %}
      {% endfor %}
    </div>

    {% include "ddm/admin/data_donation/donation_blueprint/block_file_validation.html" %}

    <div class="ddm-admin-form">
      {% for field in form %}
        {% if field.name in "expected_fields,expected_fields_regex_matching,regex_path,exp_file_format,csv_delimiter,json_extraction_root" %}
          <p>
            {{ field.label_tag }}
            {{ field.errors }}
            <span class="helptext">{{ field.help_text }}</span>
            {{ field }}
          </p>
        {% endif %}
      {% endfor %}
    </div>

    {% include "ddm/admin/data_donation/donation_blueprint/block_data_extraction.html" %}

    <div class="pb-3"><i>You will be able to define the extraction rules once you have saved and created the File blueprint.</i></div>

    <input class="ddm-btn" type="submit" value="Create Blueprint">
    <p class="mt-3">
      <a href="{% url 'data-donation-overview' project.pk %}">&#129040; Back</a>
    </p>
  </form>
{% endblock %}

{% block scripts %}
{{ block.super }}
{{ file_uploader_meta|json_script:'file_uploader_meta' }}
<script>
  const file_uploader_meta = JSON.parse(document.getElementById("file_uploader_meta").textContent);

  function hideOrShowCsvDelimiter() {
    if( $( "#id_exp_file_format" ).val() == "csv") {
      $( "#id_csv_delimiter" ).parent().show();
    } else {
      $( "#id_csv_delimiter" ).parent().hide();
    }
  }

  function hideOrShowRegexPath() {
    if( file_uploader_meta[$( "#id_file_uploader" ).val()] == "zip file" ) {
      $( "#id_regex_path" ).parent().show();
    } else {
      $( "#id_regex_path" ).parent().hide();
    }
  }

  function hideOrShowJsonRoot() {
    if( $( "#id_exp_file_format" ).val() == "json") {
      $( "#id_json_extraction_root" ).parent().show();
    } else {
      $( "#id_json_extraction_root" ).parent().hide();
    }
  }

  $(function() {
    hideOrShowCsvDelimiter();
    hideOrShowRegexPath();
    hideOrShowJsonRoot();
  });
  $( "#id_exp_file_format" ).change(function() {
    hideOrShowCsvDelimiter();
    hideOrShowJsonRoot();
  });
  $( "#id_file_uploader" ).change(function() { hideOrShowRegexPath() });
</script>
{% endblock scripts %}
