{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">HR Excel Imports</h2>
      <p class="text-sm text-slate-500">Import employees, leave types, opening leave balances and salary structures with validation preview before commit.</p>
    </div>
    <a href="/employees" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Employees</a>
  </div>

  {% if errors %}<div class="rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700">{{ errors|join(', ') }}</div>{% endif %}
  {% if message %}<div class="rounded-xl border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-700">{{ message }}</div>{% endif %}

  <div class="grid gap-4 lg:grid-cols-2">
    {% for key, label in import_types.items() %}
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="flex items-start justify-between gap-3">
        <div>
          <h3 class="font-semibold text-slate-900">{{ label }}</h3>
          <p class="mt-1 text-xs text-slate-500">Download template, fill data, upload and preview before import.</p>
        </div>
        <a href="/employees/imports/template/{{ key }}" class="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Template</a>
      </div>
      <form method="post" action="/employees/imports/preview" enctype="multipart/form-data" class="mt-4 space-y-3">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <input type="hidden" name="import_type" value="{{ key }}">
        <input type="file" name="import_file" accept=".xlsx,.xlsm" required class="block w-full rounded-xl border border-slate-300 px-3 py-2 text-sm file:mr-3 file:rounded-lg file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-slate-700">
        <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Upload & Preview</button>
      </form>
    </div>
    {% endfor %}
  </div>

  <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
    <div class="font-semibold">Important</div>
    <p class="mt-1">For System Admin/Firm Admin using all-branch context, provide <code>branch_id</code> in Excel or switch to a specific active branch before importing. Existing rows are updated based on employee code, leave code, or employee/effective date as applicable.</p>
  </div>
</div>
{% endblock %}