{% extends 'base.html' %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card p-4 shadow-sm">
        <h4>Import Data Kelulusan (Excel/CSV)</h4>
        <div class="d-flex gap-2 mb-2">
          <a class="btn btn-outline-primary btn-sm" href="{% url 'kelulusan:dashboard_download_template_excel' %}">
            Download Template Excel
          </a>
        </div>

        <p class="text-muted">
          Kolom wajib: <code>nisn</code>, <code>full_name</code>, <code>kelas</code>, <code>status</code>, <code>issued_date</code>
          <br/>
          <small>
            Kolom <code>nomor_sk</code> opsional (jika kosong akan dibuat otomatis).
            Status hanya menerima <code>L</code> (Lulus) atau <code>T</code> (Tidak Lulus).
          </small>
        </p>

        <form method="post" enctype="multipart/form-data">
          {% csrf_token %}

          <div class="mb-3">
            <input class="form-control" type="file" name="file" accept=".xlsx,.xls,.csv" required />
          </div>

          <button class="btn btn-primary" type="submit">Import</button>
        </form>

        <hr/>

        {% if result %}
          <div class="mt-3">
            {% if result.ok %}
              <div class="alert alert-success mb-0">
                {{ result.message }}
              </div>
            {% else %}
              <div class="alert alert-danger mb-0">
                {{ result.message }}
              </div>
            {% endif %}

            {% if result.created or result.updated or result.skipped or result.errors %}
              <ul class="mt-3">
                <li>Created: {{ result.created }}</li>
                <li>Updated: {{ result.updated }}</li>
                <li>Skipped: {{ result.skipped }}</li>
                <li>Errors: {{ result.errors }}</li>
              </ul>
            {% endif %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock %}