{% extends "base.html" %}

{% block title %}Upload Leads CSV{% endblock %}

{% block content %}

<!-- ================= ALERTS ================= -->
{% if error %}
<div style="
    background:#fde2e2;
    border-left:5px solid #dc3545;
    padding:15px;
    margin-bottom:20px;
    border-radius:6px;
    font-size:16px;
    color:#842029;
">
    ❌ {{ error }}
</div>
{% endif %}

{% if success == 1 %}
<div style="
    background:#d4f8d4;
    border-left:5px solid #28a745;
    padding:15px;
    margin-bottom:20px;
    border-radius:6px;
    font-size:16px;
    color:#1e4620;
">
    ✅ CSV uploaded successfully!
</div>
{% endif %}

<!-- ================= PAGE HEADER ================= -->
<section style="
    margin-bottom: 20px;
    padding: 20px 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
">
    <!-- <p style="font-weight:600; color:#6b7280; margin:0 0 5px;">Bulk import</p> -->
    <h1 style="margin:0 0 10px; font-size: 24px; font-weight:700;">Upload a CSV file</h1>
    <p style="margin:0; color:#374151;">Map your spreadsheet columns to lead fields in seconds. We’ll ignore duplicates by email.</p>
</section>

<!-- ================= FORM ================= -->
<section style="
    padding: 25px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    text-align:center;
">
    <form action="/dashboard/upload-csv" method="post" enctype="multipart/form-data" style="display:flex; flex-direction:column; align-items:center; gap:20px;">
        <div style="display:flex; flex-direction:column; align-items:center; gap:10px;">
            <label for="file" style="font-weight:600; font-size:14px;">Select CSV file</label>
            <input id="file" class="file-input" type="file" name="file" accept=".csv" required
                style="padding:12px; border:1px solid #ccc; border-radius:6px; font-size:14px;">
            <p style="color:#6b7280; font-size:13px; margin:0;">
                Accepted format: UTF-8 CSV with headers: <strong>name, email, company</strong>
            </p>
        </div>

        <div style="display:flex; gap:10px;">
            <a href="/dashboard/leads"
                style="padding:10px 20px; border-radius:6px; background:#e5e7eb; color:#111322; text-decoration:none; font-weight:600;">Cancel</a>
            <button type="submit"
                style="padding:10px 20px; border-radius:6px; background:#1d3a8a; color:white; font-weight:600; border:none; cursor:pointer;">Upload CSV</button>
        </div>
    </form>
</section>

{% endblock %}