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

<!-- ================================================================= -->
<!-- CSV FILE IMPORT                                                    -->
<!-- ================================================================= -->
<div class="import-section-card">
<div class="import-section-header">{% translate 'CSV File Import' %}</div>

<form action="" method="post" enctype="multipart/form-data"> {% csrf_token %}
<input type="hidden" name="mode" value="csv">

<div class="form-group">
<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="mb-3">
<label class="form-label">{% translate 'Choose a File ...' %}</label>
<div class="input-group">
<input type="file" class="form-control" name="file" aria-describedby="id_csv_file_helptext" id="id_csv_file">
<span class="btn btn-outline-secondary" id="id_csv_clear">X</span>
</div>
</div>
<script>
    document.getElementById("id_csv_clear").addEventListener("click", function () {
        document.getElementById("id_csv_file").value = "";
    });
</script>

<div class="mb-3">
<label class="form-label">{% translate 'Schema (optional)' %}</label>
<select class="form-select" name="schema">
  <option value="">-----------</option>
  {% for schema in schemas %}<option value="{{ schema.classname }}">{{ schema.displayname }}</option>
  {% endfor %}
</select>
<div class="form-text">{% translate 'Ignored if the CSV has its own "schema" column, or if a Pipeline is selected below.' %}</div>
</div>

<div class="mb-3">
<label class="form-label">{% translate 'Pipeline (optional)' %}</label>
<select class="form-select" name="pipeline">
  <option value="">-----------</option>
  {% for pipeline in pipelines %}<option value="{{ pipeline.keyname }}">{{ pipeline.displayname }}</option>
  {% endfor %}
</select>
<div class="form-text">{% translate 'If set, overrides schema, encoding and separator below.' %}</div>
</div>

<div class="row">
<div class="col-sm-6 mb-3">
<label class="form-label">{% translate 'Encoding' %}</label>
<select class="form-select" name="encoding">
  {% for value, label in csv_form.encoding.field.choices %}<option value="{{ value }}" {% if value == "utf-8" %}selected{% endif %}>{{ label }}</option>
  {% endfor %}
</select>
</div>

<div class="col-sm-6 mb-3">
<label class="form-label">{% translate 'Separator' %}</label>
<select class="form-select" name="separator">
  {% for value, label in csv_form.separator.field.choices %}<option value="{{ value }}" {% if value == "," %}selected{% endif %}>{{ label }}</option>
  {% endfor %}
</select>
</div>
</div>

</form>
</div>

<!-- ================================================================= -->
<!-- YAML/JSON FILE IMPORT                                              -->
<!-- ================================================================= -->
<div class="import-section-card">
<div class="import-section-header">{% translate 'YAML / JSON File Import' %}</div>

<form action="" method="post" enctype="multipart/form-data"> {% csrf_token %}
<input type="hidden" name="mode" value="file">

<div class="form-group">
<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="mb-3">
<label class="form-label">{% translate 'Choose a File ...' %}</label>
<div class="input-group">
<input type="file" class="form-control" name="file" aria-describedby="id_file_helptext" id="id_file">
<span class="btn btn-outline-secondary" id="id_clear">X</span>
</div>
</div>
<script>
    document.getElementById("id_clear").addEventListener("click", function () {
        document.getElementById("id_file").value = "";
    });
</script>

<div class="mb-3">
<label class="form-label">{% translate 'Pipeline (optional)' %}</label>
<select class="form-select" name="pipeline">
  <option value="">-----------</option>
  {% for pipeline in pipelines %}<option value="{{ pipeline.keyname }}">{{ pipeline.displayname }}</option>
  {% endfor %}
</select>
</div>

</form>
</div>

{% endblock %}