{% 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">
<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.page.label }}</label>
{{ form.page }}
{% for error in form.page.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
</div>
<div class="col-sm-6 mb-3">
<label class="form-label">{{ form.size.label }}</label>
{{ form.size }}
{% for error in form.size.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
</div>
</div>
<div class="form-text">{% translate 'Optional row range - Size alone imports the first N rows; Page requires Size.' %}</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-6 mb-3">
<label class="form-label">{{ form.encoding.label }}</label>
{{ form.encoding }}
</div>
<div class="col-sm-6 mb-3">
<label class="form-label">{{ form.separator.label }}</label>
{{ form.separator }}
</div>
</div>

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

<!-- ================================================================= -->
<!-- ADVANCED USAGE (p_data_admin only)                                 -->
<!-- ================================================================= -->
{% if is_data_admin %}
{# form.force_action/form.force_schema/form.sync_mode only exist 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="row">
<div class="col-sm-6 mb-3">
<label class="form-label">{{ form.force_action.label }}</label>
{{ form.force_action }}
</div>
<div class="col-sm-6 mb-3">
<label class="form-label">{{ form.force_schema.label }}</label>
{{ form.force_schema }}
</div>
</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>
</div>
{% endif %}

</form>

{% endblock %}