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

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

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

{% block content %}

<form action="{% url 'app_data:data_exporter' %}" method="post" id="cv-export-form"> {% csrf_token %}

<div class="form-group mb-4">
<button type="submit" class="btn btn-danger">{% translate 'Export' %}</button>
</div>

<div class="row">
<div class="col-lg-8">

<!-- ================================================================= -->
<!-- SOURCE                                                            -->
<!-- ================================================================= -->
<div class="cv-section-card">
<div class="cv-section-header">{% translate 'Source' %}</div>

<div class="mb-3">
  <label class="form-label" for="schema">{% translate 'Schema' %}</label>
  <select class="form-select" name="schema" id="schema" required
          hx-get="{% url 'app_data:data_exporter_fields' %}"
          hx-target="#cv-export-columns"
          hx-swap="outerHTML">
    <option value="">{% translate 'Choose a schema...' %}</option>
    {% for s in schemas %}
    <option value="{{ s.classname }}"{% if s.classname == schema_name %} selected{% endif %}>{{ s.displayname }} ({{ s.classname }})</option>
    {% endfor %}
  </select>
</div>

<div class="mb-3">
  <label class="form-label" for="query">{% translate 'Search query' %}</label>
  <input type="text" class="form-control" name="query" id="query" value="{{ values.query }}"
         placeholder="{% translate 'blank for every object' %}">
  <div class="form-text">{% translate 'Same syntax as the list page search box. Leave it blank to export every object.' %}</div>
</div>

</div>

<!-- ================================================================= -->
<!-- FORMAT                                                            -->
<!-- ================================================================= -->
<div class="cv-section-card">
<div class="cv-section-header">{% translate 'Format' %}</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="format" value="csv" id="format-csv"{% if values.format == "csv" %} checked{% endif %}>
  <label class="form-check-label" for="format-csv">{% translate 'CSV' %}</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="format" value="yaml" id="format-yaml"{% if values.format == "yaml" %} checked{% endif %}>
  <label class="form-check-label" for="format-yaml">{% translate 'YAML' %}</label>
</div>
<div class="form-check mb-3">
  <input class="form-check-input" type="radio" name="format" value="json" id="format-json"{% if values.format == "json" %} checked{% endif %}>
  <label class="form-check-label" for="format-json">{% translate 'JSON' %}</label>
</div>

<div class="row">
  <div class="col-sm-6 mb-3">
    <label class="form-label" for="delimiter">{% translate 'CSV delimiter' %}</label>
    <select class="form-select form-select-sm" name="delimiter" id="delimiter">
      <option value=""{% if not values.delimiter %} selected{% endif %}>{% translate 'Default' %} ({{ default_csv_delimiter }})</option>
      <option value=","{% if values.delimiter == "," %} selected{% endif %}>, ({% translate 'comma' %})</option>
      <option value=";"{% if values.delimiter == ";" %} selected{% endif %}>; ({% translate 'semicolon' %})</option>
      <option value="&#9;"{% if values.delimiter == "	" %} selected{% endif %}>{% translate 'Tab' %}</option>
      <option value="|"{% if values.delimiter == "|" %} selected{% endif %}>| ({% translate 'pipe' %})</option>
    </select>
  </div>
  <div class="col-sm-6 mb-3">
    <label class="form-label" for="encoding">{% translate 'CSV encoding' %}</label>
    <select class="form-select form-select-sm" name="encoding" id="encoding">
      {% for enc in supported_encoding %}
      <option value="{{ enc }}"{% if enc == values.encoding %} selected{% endif %}>{{ enc }}</option>
      {% endfor %}
    </select>
  </div>
</div>

</div>

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

<div class="mb-3">
  <label class="form-label" for="action">{% translate 'Add an _action field' %}</label>
  <select class="form-select form-select-sm" name="action" id="action">
    <option value="">{% translate 'None' %}</option>
    {% for a in actions %}
    <option value="{{ a }}"{% if a == values.action %} selected{% endif %}>{{ a }}</option>
    {% endfor %}
  </select>
  <div class="form-text">{% translate 'Prefills the action every row would take if this export were re-imported. <code>noop</code> is the safe choice.' %}</div>
</div>

<div class="row">
  <div class="col-sm-6 mb-3">
    <label class="form-label" for="refs">{% translate 'Inline refs' %} ({% translate 'YAML / JSON' %})</label>
    <input type="text" class="form-control form-control-sm" name="refs" id="refs" value="{{ values.refs }}"
           placeholder="{% translate 'e.g. user,site  (* = all)' %}">
  </div>
  <div class="col-sm-6 mb-3">
    <label class="form-label" for="rev">{% translate 'Revisions' %} ({% translate 'YAML / JSON' %})</label>
    <input type="number" class="form-control form-control-sm" name="rev" id="rev" min="1" value="{{ values.rev }}"
           placeholder="{% translate 'number of revisions' %}">
  </div>
</div>

<div class="form-text">
  {% blocktranslate %}Exports matching more than {{ max_sync }} objects run as a background task.{% endblocktranslate %}
</div>

</div>

</div><!-- col left -->

<div class="col-lg-4">
{% include 'app_data/exporter_columns.html' %}
</div><!-- col right -->

</div><!-- row -->

</form>

{% if task_handle %}
<!-- EXPORT PROGRESS Modal - opened on submit of a large (async) export -->
<div class="modal fade" id="cv-export-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 included - is replaced by the progress
      partial, so the heading can follow the task's state instead of being stuck
      on "in progress" after it has finished.
      {% endcomment %}
      <div id="cv-export-progress"
           hx-get="{% url 'app_data:data_exporter_progress' task_handle %}"
           hx-trigger="load"
           hx-swap="outerHTML">
        <div class="modal-header">
          <h1 class="modal-title fs-5">{% translate 'Export 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-export-modal')).show();
});
</script>
{% endif %}

{% endblock %}

{% block script %}
<script>
/* Column selector: one button toggling every optional box all / none. Everything
   is delegated from the document rather than bound to the elements, because the
   whole selector is replaced by htmx every time the schema changes - a bound
   handler would be lost on the first swap. */

function cvExportToggleLabel() {
    const button = document.getElementById('cv-export-toggleall');
    if (!button) { return; }
    const boxes = document.querySelectorAll('.cv-export-col-box');
    const allChecked = boxes.length > 0 && [...boxes].every(box => box.checked);
    button.textContent = allChecked ? button.dataset.labelNone : button.dataset.labelAll;
}

document.addEventListener('click', function (event) {
    if (!event.target.closest('#cv-export-toggleall')) { return; }
    const boxes = document.querySelectorAll('.cv-export-col-box');
    const allChecked = [...boxes].every(box => box.checked);
    boxes.forEach(function (box) { box.checked = !allChecked; });
    cvExportToggleLabel();
});

/* a box ticked by hand can be what makes the set complete (or no longer so) */
document.addEventListener('change', function (event) {
    if (event.target.classList.contains('cv-export-col-box')) { cvExportToggleLabel(); }
});

document.addEventListener('DOMContentLoaded', cvExportToggleLabel);
document.addEventListener('htmx:afterSwap', cvExportToggleLabel);
</script>
{% endblock %}