{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
<H2>{% translate 'Import Tool' %}</H2>
<hr>{% endblock %}

{% block content %}

<form action="" method="post" enctype="multipart/form-data"> {% csrf_token %}

<div class="form-group mb-4">
<button type="submit" name="submit" value="verify" class="btn btn-secondary">{% translate 'Check' %}</button>
<button type="submit" name="submit" value="import" class="btn btn-danger">{% translate 'Import' %}</button>
</div>

<div class="import-section-card">
<div class="import-section-header">{% translate 'File' %}</div>

<div class="mb-3">
{{ form.file }}
<div class="form-text">{{ form.file.help_text }}</div>
{% for error in form.file.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
</div>
</div>

<!-- ================================================================= -->
<!-- COMMON OPTIONS                                                     -->
<!-- ================================================================= -->
<div class="import-section-card">
<div class="import-section-header">{% translate 'Common Options' %}</div>

<div class="mb-3 form-check">
{{ form.sync_mode }}
<label class="form-check-label" for="{{ form.sync_mode.id_for_label }}">{{ form.sync_mode.label }}</label>
<div class="form-text">{{ form.sync_mode.help_text }}</div>
</div>

<div class="mb-3">
<label class="form-label">{{ form.pipeline.label }}</label>
{{ form.pipeline }}
</div>

{% for error in form.non_field_errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
<div class="row">
<div class="col-sm-6 mb-3">
<label class="form-label">{{ form.first.label }}</label>
{{ form.first }}
{% for error in form.first.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
</div>
<div class="col-sm-6 mb-3">
<label class="form-label">{{ form.last.label }}</label>
{{ form.last }}
{% for error in form.last.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
</div>
</div>
<div class="form-text">{% translate 'Optional row range, both bounds included - row 1 is the first data row (a CSV header does not count). Blank imports the whole file.' %}</div>
</div>

<!-- ================================================================= -->
<!-- CSV SPECIFIC OPTIONS                                               -->
<!-- ================================================================= -->
<div class="import-section-card">
<div class="import-section-header">{% translate 'CSV Specific Options' %}</div>
<div class="form-text mb-3">{% translate 'Only used when the uploaded file is a .csv file.' %}</div>

<div class="row">
<div class="col-sm-4 mb-3">
<label class="form-label">{{ form.encoding.label }}</label>
{{ form.encoding }}
</div>
<div class="col-sm-4 mb-3">
<label class="form-label">{{ form.separator.label }}</label>
{{ form.separator }}
{% for error in form.separator.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
</div>
<div class="col-sm-4 mb-3 import-check-col form-check">
{{ form.split_multivalue }}
<label class="form-check-label" for="{{ form.split_multivalue.id_for_label }}">{{ form.split_multivalue.label }}</label>
</div>
</div>

<div class="form-text mb-3">{{ form.separator.help_text }}</div>

{% if is_data_admin %}
{# form.force_schema only exists on ImportForm when is_admin=True was passed in - #}
{# this guard is load-bearing, not cosmetic: never remove it without also checking views_importer.py #}
<div class="mb-3">
<label class="form-label">{{ form.force_schema.label }}</label>
{{ form.force_schema }}
<div class="form-text">{{ form.force_schema.help_text }}</div>
</div>
{% endif %}
</div>

<!-- ================================================================= -->
<!-- ADVANCED USAGE (p_data_admin only)                                 -->
<!-- ================================================================= -->
{% if is_data_admin %}
{# form.force_action only exists on ImportForm when is_admin=True was passed in - #}
{# this guard is load-bearing, not cosmetic: never remove it without also checking views_importer.py #}
<div class="import-section-card">
<a class="import-section-header import-section-toggle collapsed" data-bs-toggle="collapse" href="#advancedImportOptions" role="button" aria-expanded="false" aria-controls="advancedImportOptions">
{% translate 'Advanced Usage' %}
</a>

<div class="collapse" id="advancedImportOptions">
<div class="mb-3">
<label class="form-label">{{ form.force_action.label }}</label>
{{ form.force_action }}
</div>
</div>
</div>
{% endif %}

</form>

{% if task_handle %}
<!-- IMPORT PROGRESS Modal - opened on submit of an import (every import is a task) -->
<div class="modal fade" id="cv-import-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      {% comment %}
      The whole modal content - title and footer included - is replaced by the
      progress partial, so both follow the task's state instead of being stuck
      on "in progress" after it has finished.
      {% endcomment %}
      <div id="cv-import-progress"
           hx-get="{% url 'app_data:data_import_progress' task_handle %}"
           hx-trigger="load"
           hx-swap="outerHTML">
        <div class="modal-header">
          <h1 class="modal-title fs-5">{% translate 'Import in progress' %}</h1>
        </div>
        <div class="modal-body">
          <div class="cv-export-result-empty">{% translate 'Starting...' %}</div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    new bootstrap.Modal(document.getElementById('cv-import-modal')).show();
});
</script>
{% endif %}

{% endblock %}