{% extends "layout.html" %}
{% block content %}
<div class="page-wide">
  <div class="panel">
    <div class="panel-title">Preview Import</div>

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

      <div class="table-wrap">
        <table class="table">
          <thead>
            <tr>
              <th style="width:36px;"><input type="checkbox" id="chkAll"></th>
              <th>Employee</th>
              <th>Status</th>
              <th class="num">Rows</th>
            </tr>
          </thead>
          <tbody>
            {% for row in preview %}
            <tr>
              <td style="text-align:center;">
                <input type="checkbox" class="chkRow" data-name="{{ row.employee_name }}">
              </td>
              <td>{{ row.employee_name }}</td>
              <td>{{ row.status }}</td>
              <td class="num">{{ row.row_count }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <input type="hidden" name="selected_names" id="selected_names" value="">
      <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
        <button class="btn primary" type="submit" onclick="return gatherSelection();">Import Selected</button>
        <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>
    </form>

    <div class="muted" style="margin-top:8px;">
      Existing employees will have new rows appended (duplicates are skipped). New employees will be created automatically.
      {% if mode == 'initial' %}
        After import, the time period dates will be derived from the imported rows and you’ll assign weeks.
      {% else %}
        Dates not previously assigned to a week in this time period will be skipped.
      {% endif %}
    </div>
  </div>
</div>

<script>
  document.getElementById('chkAll').addEventListener('change', function() {
    var checked = this.checked;
    document.querySelectorAll('.chkRow').forEach(function(chk) { chk.checked = checked; });
  });
  function gatherSelection() {
    var names = [];
    document.querySelectorAll('.chkRow:checked').forEach(function(chk) { names.push(chk.getAttribute('data-name')); });
    if (names.length === 0) { alert('Please select at least one employee.'); return false; }
    document.getElementById('selected_names').value = names.join(',');
    return true;
  }
</script>
{% endblock %}