{% extends "public/base.html" %}
{% block title %}My Account — {{ site.site_name }}{% endblock %}

{% block content %}
<div style="min-height:60vh;display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem">
  <div style="width:100%;max-width:460px">

    <div style="text-align:center;margin-bottom:2rem">
      <div style="width:56px;height:56px;background:#033152;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
        <i class="fa-solid fa-user" style="color:#fff;font-size:1.3rem"></i>
      </div>
      <h1 style="font-size:1.5rem;font-weight:800;color:#033152;margin:0 0 6px">My Account</h1>
      <p style="font-size:.9rem;color:#6b7280;margin:0">Enter your details to access your orders and account history.</p>
    </div>

    {% if error %}
    <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:12px 16px;margin-bottom:1.25rem;display:flex;align-items:center;gap:10px;font-size:.88rem;color:#dc2626">
      <i class="fa-solid fa-circle-exclamation"></i> {{ error }}
    </div>
    {% endif %}

    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:2rem;box-shadow:0 4px 24px rgba(3,49,82,.08)">
      <form method="post">
        {% csrf_token %}

        <div style="margin-bottom:1.1rem">
          <label style="display:block;font-size:.8rem;font-weight:700;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em">Surname</label>
          <input type="text" name="surname" required autocomplete="family-name"
            style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:.65rem .85rem;font-size:.95rem;color:#1f2937;outline:none;box-sizing:border-box"
            placeholder="e.g. Smith">
        </div>

        <div style="margin-bottom:1.1rem">
          <label style="display:block;font-size:.8rem;font-weight:700;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em">Email Address</label>
          <input type="email" name="email" required autocomplete="email"
            style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:.65rem .85rem;font-size:.95rem;color:#1f2937;outline:none;box-sizing:border-box"
            placeholder="e.g. john@example.com">
        </div>

        <div style="margin-bottom:1.1rem">
          <label style="display:block;font-size:.8rem;font-weight:700;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em">Mobile Number</label>
          <input type="tel" name="mobile" required autocomplete="tel"
            style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:.65rem .85rem;font-size:.95rem;color:#1f2937;outline:none;box-sizing:border-box"
            placeholder="e.g. 07700 000000">
        </div>

        <div style="margin-bottom:1.5rem">
          <label style="display:block;font-size:.8rem;font-weight:700;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em">Postcode</label>
          <input type="text" name="postcode" required autocomplete="postal-code"
            style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:.65rem .85rem;font-size:.95rem;color:#1f2937;outline:none;box-sizing:border-box"
            placeholder="e.g. EC1A 1BB">
        </div>

        <button type="submit" style="width:100%;background:#033152;color:#fff;border:none;border-radius:8px;padding:.75rem;font-size:.95rem;font-weight:700;cursor:pointer">
          Access My Account &rarr;
        </button>
      </form>
    </div>

    <p style="text-align:center;margin-top:1.25rem;font-size:.82rem;color:#9ca3af">
      These details must match what you provided at checkout.
    </p>

  </div>
</div>
{% endblock %}