{% extends "base.html" %}

{% block title %}Add Lead · Dashboard{% 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;
">
    ✅ Lead added 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);
">
    <p style="font-weight:600; color:#6b7280; margin:0 0 5px;">Create record</p>
    <h1 style="margin:0 0 10px; font-size: 24px; font-weight:700;">Add new lead</h1>
    <p style="margin:0; color:#374151;">Capture the essentials so your team can nurture the relationship without digging elsewhere.</p>
</section>

<!-- ================= FORM ================= -->
<section style="
    padding: 25px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
">
    <form action="/dashboard/add-lead" method="post">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom:20px;">
            <div style="display:flex; flex-direction:column;">
                <label for="name" style="font-weight:600; margin-bottom:5px;">Full name <span style="color:#6b7280">*</span></label>
                <input type="text" id="name" name="name" placeholder="Alex Daniels" required
                    style="padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px;">
            </div>
            <div style="display:flex; flex-direction:column;">
                <label for="email" style="font-weight:600; margin-bottom:5px;">Email address <span style="color:#6b7280">*</span></label>
                <input type="email" id="email" name="email" placeholder="alex@example.com" required
                    style="padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px;">
            </div>
            <div style="display:flex; flex-direction:column;">
                <label for="company" style="font-weight:600; margin-bottom:5px;">Company</label>
                <input type="text" id="company" name="company" placeholder="Company or organization"
                    style="padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px;">
            </div>
        </div>

        <div style="display:flex; flex-direction:column; margin-bottom:20px;">
            <label for="notes" style="font-weight:600; margin-bottom:5px;">Notes</label>
            <textarea id="notes" name="notes" rows="4" placeholder="Context, goals, or next steps"
                style="padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px;"></textarea>
        </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;">Add Lead</button>
        </div>
    </form>
</section>

{% endblock %}