{% extends "layouts/dashboard.html" %}
{% load i18n %}

{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">{% translate "Dashboard" %}</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <a href="{% url 'accounts:manage_users' %}" class="hover:text-ruforum-primary transition-colors">{% translate "Users" %}</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">{% translate "Bulk import" %}</span>
</nav>
{% endblock %}

{% block content %}
<div class="mx-auto max-w-3xl">

  <header class="mb-6">
    <p class="font-meta text-[11px] font-semibold uppercase tracking-[0.14em] text-ruforum-primary">{% translate "User management" %}</p>
    <h1 class="mt-1 font-display text-3xl font-semibold leading-tight text-ruforum-text">{% translate "Bulk import users" %}</h1>
    <p class="mt-1 max-w-[65ch] text-sm text-ruforum-text-muted">
      {% blocktranslate %}Upload a CSV to create multiple accounts at once. Each new user receives an activation email so they can set their own password.{% endblocktranslate %}
    </p>
  </header>

  {% if errors %}
  <div class="mb-5 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
    <p class="font-semibold mb-1">{% translate "Couldn't read the CSV." %}</p>
    <ul class="list-disc list-inside">
      {% for e in errors %}<li>{{ e }}</li>{% endfor %}
    </ul>
  </div>
  {% endif %}

  {% if report %}
  <div class="mb-6 rounded-2xl border border-ruforum-border bg-white overflow-hidden">
    <div class="grid grid-cols-1 divide-y divide-ruforum-border md:grid-cols-3 md:divide-x md:divide-y-0">
      <div class="px-5 py-5">
        <p class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">{% translate "Read" %}</p>
        <p class="mt-2 font-display text-3xl font-semibold tabular-nums leading-none text-ruforum-text">{{ report.total }}</p>
      </div>
      <div class="px-5 py-5">
        <p class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-emerald-700">{% translate "Created" %}</p>
        <p class="mt-2 font-display text-3xl font-semibold tabular-nums leading-none text-emerald-700">{{ report.created|length }}</p>
        <p class="mt-1 font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">{% translate "Activation emails sent" %}</p>
      </div>
      <div class="px-5 py-5">
        <p class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-rose-600">{% translate "Skipped" %}</p>
        <p class="mt-2 font-display text-3xl font-semibold tabular-nums leading-none text-rose-600">{{ report.skipped|length }}</p>
        <p class="mt-1 font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">{% translate "Fix the source and re-upload" %}</p>
      </div>
    </div>
    {% if report.skipped %}
    <div class="border-t border-ruforum-border">
      <div class="px-5 py-3 bg-ruforum-surface-warm">
        <p class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">{% translate "Skipped rows" %}</p>
      </div>
      <table class="data-table">
        <thead>
          <tr>
            <th class="td-num">{% translate "Line" %}</th>
            <th>{% translate "Email" %}</th>
            <th>{% translate "Reason" %}</th>
          </tr>
        </thead>
        <tbody>
          {% for s in report.skipped %}
          <tr>
            <td class="td-num font-meta text-[11px] tabular-nums text-ruforum-text-muted">{{ s.line }}</td>
            <td class="text-ruforum-text">{{ s.email|default:"—" }}</td>
            <td class="text-rose-600">{{ s.reason }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
  </div>
  {% endif %}

  <form method="post" enctype="multipart/form-data" class="card divide-y divide-ruforum-border">
    {% csrf_token %}
    <div class="px-6 py-4">
      <p class="form-section-label">{% translate "Choose CSV" %}</p>
    </div>
    <div class="px-6 py-5 space-y-5">
      <div>
        <label for="csv-upload" class="field-label">{% translate "CSV file" %}</label>
        <input id="csv-upload" type="file" name="csv" accept=".csv" required>
      </div>

      <div class="rounded-lg border border-ruforum-border bg-ruforum-surface-warm px-4 py-3">
        <div class="flex items-baseline justify-between gap-3">
          <p class="font-meta text-[11px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">{% translate "Required columns" %}</p>
          <a href="{% url 'accounts:manage_bulk_import_template' %}"
             class="font-meta text-[11px] font-semibold uppercase tracking-[0.10em] text-ruforum-primary hover:text-ruforum-primary-hover transition-colors"
             download>
            <svg class="inline-block h-3 w-3 align-[-1px] mr-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
            </svg>
            {% translate "Download template" %}
          </a>
        </div>
        <p class="mt-1 font-mono text-xs text-ruforum-text">email, first_name, last_name</p>
        <p class="mt-3 font-meta text-[11px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">{% translate "Optional columns" %}</p>
        <p class="mt-1 font-mono text-xs text-ruforum-text">phone, institution, role</p>
        <p class="mt-3 text-xs text-ruforum-text-muted leading-relaxed">
          {% blocktranslate %}<strong>institution</strong> is matched by name against the partner list — unmatched names are left blank. <strong>role</strong> defaults to <code>learner</code> when omitted. Each created account is sent an activation email so they can set their own password. Lines starting with <code>#</code> are treated as comments and skipped.{% endblocktranslate %}
        </p>
      </div>
    </div>
    <div class="flex items-center justify-end gap-3 px-6 py-4">
      <a href="{% url 'accounts:manage_users' %}" class="btn-secondary">{% translate "Cancel" %}</a>
      <button type="submit" class="btn-primary">{% translate "Upload and create" %}</button>
    </div>
  </form>
</div>
{% endblock %}