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

{% block head %}
<link rel="stylesheet" href="{% static 'vantage/vantage-form.css' %}">
<link rel="stylesheet" href="{% static 'vantage/vantage-import.css' %}">
{% endblock %}

{% block content %}
<div class="v-page-head">
  <div>
    <h1 class="v-page-title">{% translate "Map columns" %}</h1>
    <p class="v-page-description">
      {% blocktranslate count counter=row_count %}{{ counter }} row{% plural %}{{ counter }} rows{% endblocktranslate %} · {{ encoding }} ·
      {% blocktranslate %}delimiter <span class="v-mono">{{ delimiter }}</span>{% endblocktranslate %}
    </p>
  </div>
  <div class="v-page-actions">
    <form method="post" action="{{ upload_url }}">
      {% csrf_token %}
      <input type="hidden" name="discard" value="{{ token }}">
      <button class="v-btn v-btn-secondary" type="submit">{% translate "Start over" %}</button>
    </form>
  </div>
</div>

<ol class="v-import-steps" aria-label="{% translate "Import steps" %}">
  <li class="v-import-step-done"><span class="v-import-step-n">1</span> {% translate "Upload" %}</li>
  <li aria-current="step"><span class="v-import-step-n">2</span> {% translate "Map columns" %}</li>
  <li><span class="v-import-step-n">3</span> {% translate "Preview" %}</li>
</ol>

{% if error %}
  <div class="v-form-alert" data-tone="error" role="alert" tabindex="-1">
    <p class="v-form-alert-title">{% translate "This mapping cannot be used." %}</p>
    <p>{{ error }}</p>
  </div>
{% endif %}

<form method="post" action="{{ preview_url }}">
  {% csrf_token %}

  <section class="v-card v-import-card">
    <div class="v-card-head">
      <h2 class="v-card-title">{% translate "Your columns" %}</h2>
      <p class="v-muted">
        {% blocktranslate trimmed %}Each column feeds one field, or nothing. The first values from your file are
        shown so you can check the guess without opening the spreadsheet again.{% endblocktranslate %}
      </p>
    </div>
    <div class="v-table-wrap">
      <table class="v-table v-import-table">
        <thead>
          <tr>
            <th scope="col">{% translate "Column in your file" %}</th>
            <th scope="col">{% translate "First values" %}</th>
            <th scope="col">{% translate "Field it writes" %}</th>
          </tr>
        </thead>
        <tbody>
          {% for column in columns %}
            <tr>
              <th scope="row" class="v-import-header">{{ column.header }}</th>
              <td class="v-import-samples">
                {% for sample in column.samples %}
                  <span class="v-import-sample">{{ sample|default:"—" }}</span>
                {% endfor %}
              </td>
              <td>
                <label class="v-sr-only" for="v-map-{{ column.index }}">
                  {% blocktranslate with header=column.header %}Field for column {{ header }}{% endblocktranslate %}
                </label>
                <select class="v-select" name="map-{{ column.index }}" id="v-map-{{ column.index }}">
                  <option value=""{% if not column.target %} selected{% endif %}>{% translate "Skip this column" %}</option>
                  {% for option in options %}
                    <option value="{{ option.name }}"{% if option.name == column.target %} selected{% endif %}>
                      {{ option.label }}{% if not option.writable %} {% translate "(identifier only)" %}{% endif %}
                    </option>
                  {% endfor %}
                </select>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <section class="v-card v-import-card">
    <div class="v-card-head">
      <h2 class="v-card-title">{% translate "What to do with each row" %}</h2>
    </div>
    <div class="v-card-body v-import-options">
      <div class="v-form-field">
        <label class="v-form-label" for="v-import-key">{% translate "Match existing records on" %}</label>
        <select class="v-select" name="key_field" id="v-import-key"
                aria-describedby="v-import-key-help">
          <option value=""{% if not default_key %} selected{% endif %}>{% translate "Nothing — every row is new" %}</option>
          {% for option in keys %}
            <option value="{{ option.name }}"{% if option.name == default_key %} selected{% endif %}>
              {{ option.label }}
            </option>
          {% endfor %}
        </select>
        <p class="v-form-help v-muted" id="v-import-key-help">
          {% comment %}
            Only unique columns are offered. Matching on something non-unique would pick
            an arbitrary row to overwrite, which is the worst kind of silent data loss.
          {% endcomment %}
          {% blocktranslate trimmed %}Only the primary key and unique columns can identify a record, and only if you
          mapped one above.{% endblocktranslate %}
        </p>
      </div>

      <fieldset class="v-form-field">
        <legend class="v-form-label">{% translate "Then" %}</legend>
        {% for mode in modes %}
          <label class="v-import-radio">
            <input type="radio" name="mode" value="{{ mode.value }}"
                   {% if mode.value == default_mode %}checked{% endif %}>
            <span>{{ mode.label }}</span>
          </label>
        {% endfor %}
        <p class="v-form-help v-muted">
          {% blocktranslate trimmed %}Only the modes your permissions allow are listed. Updating needs the change
          permission; an upsert needs both.{% endblocktranslate %}
        </p>
      </fieldset>
    </div>
    <div class="v-import-foot">
      <a class="v-btn v-btn-ghost" href="{{ list_url }}">{% translate "Cancel" %}</a>
      <button class="v-btn v-btn-primary" type="submit">{% translate "Preview changes" %}</button>
    </div>
  </section>
</form>
{% endblock %}