{% extends "base.html" %}

{% block title %}{{ gettext('Import Students from CSV') }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-lg-8 offset-lg-2">
            <h1 class="page-title">{{ gettext('Import Students from CSV') }}</h1>
            
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{{ gettext('Instructions') }}</h5>
                </div>
                <div class="card-body">
                    <ul>
                        <li>{{ gettext('Upload a CSV file with student data') }}</li>
                        <li>{{ gettext('The file should be encoded in ISO-8859-1 (Latin-1)') }}</li>
                        <li>{{ gettext('Required columns: Apellidos, Nombre (will be split), C.I.A.L., Fecha Nac.') }}</li>
                        <li>{{ gettext('Optional columns: NIF/NIE/Pas., Registro, Expediente, Sexo, Grupo') }}</li>
                        <li>{{ gettext('The "Estudio" column will be discarded') }}</li>
                        <li>{{ gettext('Duplicate students (by CIAL code or NIF/NIE) will be skipped') }}</li>
                    </ul>
                    <p class="text-muted">
                        {{ gettext('Example CSV format:') }}<br>
                        <code>Nº Or.,"Apellidos, Nombre",Fecha Nac.,C.I.A.L.,NIF/NIE/Pas.,Registro,Expediente,Sexo,Grupo,Estudio</code>
                    </p>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{{ gettext('Upload CSV File') }}</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('import_students') }}" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="csv_file" class="form-label">{{ gettext('CSV File') }} *</label>
                            <input class="form-control" type="file" id="csv_file" name="csv_file" 
                                   accept=".csv" required>
                            <div class="form-text">{{ gettext('Select a CSV file to upload') }}</div>
                        </div>
                        
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ url_for('list_students') }}" class="btn btn-secondary">
                                <i class="bi bi-x-circle"></i> {{ gettext('Cancel') }}
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-upload"></i> {{ gettext('Import Students') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Sample Data Preview -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">{{ gettext('Sample Data Format') }}</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>{{ gettext('Nº Or.') }}</th>
                                    <th>{{ gettext('Apellidos, Nombre') }}</th>
                                    <th>{{ gettext('Fecha Nac.') }}</th>
                                    <th>{{ gettext('C.I.A.L.') }}</th>
                                    <th>{{ gettext('NIF/NIE/Pas.') }}</th>
                                    <th>{{ gettext('Registro') }}</th>
                                    <th>{{ gettext('Expediente') }}</th>
                                    <th>{{ gettext('Sexo') }}</th>
                                    <th>{{ gettext('Grupo') }}</th>
                                    <th>{{ gettext('Estudio') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>PERIQUITA DE LOS PALOTES, JUANITA</td>
                                    <td>24/08/2009</td>
                                    <td>B19L64119K</td>
                                    <td>24587243H</td>
                                    <td>4847</td>
                                    <td></td>
                                    <td>M</td>
                                    <td>1º FPB BÁSICA</td>
                                    <td>1º CFGB Servicios Socioculturales...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3 text-muted small">
                        {{ gettext('Note: The "Estudio" field will be discarded during import.') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}