{% extends "admin/base.html" %}
{% load static %}

{% block title %}{{ title }} - Pemilos Admin{% endblock %}

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">Pemilos Admin</a></h1>
{% endblock %}

{% block content %}
<div id="content-main">
    <div class="module" style="max-width: 700px; margin: 0 auto; padding: 20px;">
        <h1 style="color: #667eea; margin-bottom: 10px;">
            <i class="fas fa-file-import"></i> {{ title }}
        </h1>
        <p style="color: #666; margin-bottom: 30px;">{{ subtitle }}</p>

        <!-- Upload Form -->
        <form method="post" enctype="multipart/form-data" style="background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.08);">
            {% csrf_token %}

            <div style="margin-bottom: 25px;">
                <label for="id_excel_file" style="display: block; font-weight: 600; margin-bottom: 10px; color: #333;">
                    <i class="fas fa-file-excel" style="color: #217346;"></i> Pilih File Excel
                </label>
                {{ form.excel_file }}
                <small style="color: #888;">Format yang didukung: .xlsx, .xls</small>
            </div>

            <div style="margin-top: 25px;">
                <button type="submit" class="button default" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; border: none; padding: 12px 30px; border-radius: 8px; cursor: pointer; font-weight: 500; box-shadow: 0 3px 10px rgba(17,153,142,0.3);">
                    <i class="fas fa-upload"></i> Import Data
                </button>
                <a href="{% url 'admin:voting_student_changelist' %}" class="button" style="background: #6c757d; color: white; text-decoration: none; padding: 12px 30px; border-radius: 8px; display: inline-block;">
                    <i class="fas fa-arrow-left"></i> Kembali
                </a>
            </div>
        </form>

        <!-- Instructions -->
        <div style="margin-top: 30px; padding: 25px; background: #e7f3ff; border-radius: 15px; border-left: 5px solid #667eea;">
            <h4 style="color: #667eea; margin-bottom: 15px;">
                <i class="fas fa-info-circle"></i> Petunjuk Import
            </h4>
            <ul style="color: #444; line-height: 2; padding-left: 20px;">
                <li>Download <a href="{% url 'admin:download_student_template' %}" style="color: #667eea; font-weight: 600;">template Excel</a> terlebih dahulu</li>
                <li>Isi data dengan kolom: <strong>NISN</strong>, <strong>Nama</strong>, <strong>Kelas</strong>, <strong>Jurusan</strong></li>
                <li>NISN harus unik, tidak boleh kosong</li>
                <li>Data duplikat (NISN sama) akan dilewati otomatis</li>
                <li>Simpan file dalam format <strong>.xlsx</strong></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
{% endblock %}