{% extends "layout.html" %}
{% block content %}
<div class="page-wide">
  <div class="panel">
    <div class="panel-title">Map Columns {% if kind == 'excel' %}& Select Sheet{% endif %}</div>

    <form method="post" action="/import/department/preview-mapped" style="display:flex; flex-direction:column; gap:12px;">
      <input type="hidden" name="map_slug" value="{{ map_slug }}">
      <input type="hidden" name="timesheet_id" value="{{ timesheet_id }}">
      <input type="hidden" name="mode" value="{{ mode|default('department') }}">

      <div class="panel toolbar" style="gap:12px; flex-wrap:wrap; align-items:center;">
        {% if kind == 'excel' and sheets_info|length > 1 %}
          <label class="label">Sheet</label>
          <select class="select" name="sheet_name" onchange="onSheetChange(this)" required>
            {% for s in sheets_info %}
              <option value="{{ s.sheet_name }}" {% if s.sheet_name == sheet_name %}selected{% endif %}>{{ s.sheet_name }}</option>
            {% endfor %}
          </select>
        {% else %}
          <input type="hidden" name="sheet_name" value="{{ sheet_name }}">
          <div class="muted">Source: {{ sheet_name }}</div>
        {% endif %}

        <label class="checkbox" style="display:flex; gap:6px; align-items:center;">
          <input type="checkbox" name="restrict_to_period" value="1" {% if restrict_to_period %}checked{% endif %}>
          Only include rows within the selected time period
        </label>
        <a class="btn" href="/import/department?timesheet_id={{ timesheet_id }}">Start over</a>
        <a class="btn" href="/viewer?timesheet_id={{ timesheet_id }}">Back to Viewer</a>
      </div>

      <div class="muted">
        Choose which columns from the {{ 'sheet' if kind == 'excel' else 'file' }} map to your fields. Defaults are auto-detected.
      </div>

      {% set selected = (sheets_info | selectattr('sheet_name', 'equalto', sheet_name) | list | first) %}
      {% set headers = selected.header_vals %}
      {% set auto = selected.auto_map %}

      <div class="table-wrap">
        <table class="table">
          <thead>
            <tr>
              <th>Field</th>
              <th>Column</th>
            </tr>
          </thead>
          <tbody>
            {% for key, label, required in target_fields %}
            <tr>
              <td>
                {{ label }}
                {% if required %}<span class="badge warn" title="Required field">Required</span>{% endif %}
              </td>
              <td>
                <select class="select" name="{{ key }}" {% if required %}required{% endif %}>
                  <option value="None">— None —</option>
                  {% for i in range(headers|length) %}
                    {% set hv = headers[i] %}
                    {% set hv_disp = (hv|string) if hv is not none else '' %}
                    <option value="{{ i }}"
                      {% if auto and auto.get(key) is not none and auto.get(key) == i %}selected{% endif %}>
                      {{ i }} — {{ hv_disp }}
                    </option>
                  {% endfor %}
                </select>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
        <button class="btn primary" type="submit">Build Preview</button>
        <button class="btn" type="button" onclick="window.location.href='/import/department/map?map_slug={{ map_slug }}&sheet_name={{ sheet_name }}'">Reset defaults</button>
      </div>
    </form>

    <div class="muted" style="margin-top:8px;">
      
    </div>
  </div>
</div>

<script>
  function onSheetChange(sel) {
    const sheet = sel && sel.value ? sel.value : '';
    const params = new URLSearchParams({ map_slug: '{{ map_slug }}', sheet_name: sheet });
    window.location.href = '/import/department/map?' + params.toString();
  }
</script>
{% endblock %}