{% extends "subadmin/base.html" %}
{% block title %}Edit Visitor{% endblock %}
{% block eyebrow %}Management{% endblock %}
{% block page_title %}Edit Visitor{% endblock %}
{% set active = 'visitors' %}

{% block head %}
<style>
    .sa-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
    .sa-field { display:flex; flex-direction:column; gap:6px; }
    .sa-field label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#475569; }
    .sa-field input { padding:12px 16px; border:1.5px solid #e2e8f0; border-radius:12px; font-size:14px; color:#0f172a; background:#f8fafc; }
    .sa-field input:focus { outline:none; border-color:#2c7da0; background:#fff; box-shadow:0 0 0 3px rgba(44,125,160,0.1); }
    .sa-form-actions { display:flex; gap:12px; justify-content:flex-end; padding-top:16px; border-top:1px solid #e2e8f0; }
    .sa-btn { padding:12px 26px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; border:none; text-decoration:none; display:inline-flex; align-items:center; }
    .sa-btn-dark { background:#0f2b3d; color:#fff; } .sa-btn-dark:hover { background:#1b5e7a; }
    .sa-btn-outline { background:#f1f5f9; color:#334155; border:1.5px solid #cbd5e1; }
    @media(max-width:640px){ .sa-form-grid{grid-template-columns:1fr;} }
</style>
{% endblock %}

{% block content %}
<div class="sa-card">
    <div class="sa-card-header">
        <div>
            <p class="sa-eyebrow">Visitor #{{ visitor.id }}</p>
            <h2>Edit Visitor Details</h2>
        </div>
    </div>
    <div class="sa-card-body">
        <form method="POST" action="/subadmin/visitors/edit/{{ visitor.id }}">
            <div class="sa-form-grid">
                <div class="sa-field">
                    <label>Name *</label>
                    <input type="text" name="name" value="{{ visitor.name }}" required>
                </div>
                <div class="sa-field">
                    <label>Mobile Number</label>
                    <input type="text" name="mobile_number" value="{{ visitor.mobile_number or '' }}">
                </div>
                <div class="sa-field">
                    <label>Email</label>
                    <input type="email" name="email" value="{{ visitor.email or '' }}">
                </div>
            </div>
            <div class="sa-form-actions">
                <a href="/subadmin/visitors" class="sa-btn sa-btn-outline">Cancel</a>
                <button type="submit" class="sa-btn sa-btn-dark">Save Changes</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}