{% load i18n %}
{% comment %}
Column selector of the Exporter form, also served on its own by
app_data:data_exporter_fields when the schema selector changes. Each checked box
posts one "columns" value; the browser sends them in DOM order, and that order is
the export's column order (see exporter._post_columns()).

The two mandatory columns render as a checked+disabled box plus a hidden input of
the same name at the same position: a disabled checkbox is never submitted, so the
hidden companion is what actually carries the value - in the right order, with no
JavaScript.
{% endcomment %}

<div id="cv-export-columns" class="cv-section-card">
<div class="cv-section-header">{% translate 'Columns' %}</div>

{% if catalog %}
{% comment %}
One button for both directions: its label is set by the page script from the
current state of the boxes (all checked -> "Select none", otherwise "Select all"),
so there is never a button that does nothing.
{% endcomment %}
<button type="button" class="btn btn-sm btn-outline-dark mb-3" id="cv-export-toggleall"
        data-label-all="{% translate 'Select all' %}"
        data-label-none="{% translate 'Select none' %}">
  {% translate 'Select all' %}
</button>

<div class="cv-export-colselect">
  {% for entry in catalog %}
  <div class="form-check cv-export-col">
    {% if entry.mandatory %}
    <input type="hidden" name="columns" value="{{ entry.name }}">
    <input class="form-check-input" type="checkbox" checked disabled
           id="cv-col-{{ forloop.counter }}">
    {% else %}
    <input class="form-check-input cv-export-col-box" type="checkbox" name="columns"
           value="{{ entry.name }}" id="cv-col-{{ forloop.counter }}"
           {% if entry.name in checked %}checked{% endif %}>
    {% endif %}
    <label class="form-check-label" for="cv-col-{{ forloop.counter }}">
      <span class="cv-export-col-name">{{ entry.name }}</span>
      {% if entry.label != entry.name %}<span class="cv-export-col-sep">&ndash;</span><span class="cv-export-col-label">{{ entry.label }}</span>{% endif %}
      {% if entry.group == "injected" %}<span class="cv-export-col-tag">{% translate 'injected' %}</span>{% endif %}
    </label>
  </div>
  {% endfor %}
</div>


{% else %}
<div class="cv-export-colselect-empty">{% translate 'Choose a schema first.' %}</div>
{% endif %}

</div>