{% extends "base.html" %}

{% block content %}
<div class="row mb-4 align-items-center">
    <div class="col-md-7">
        <h1>Guests</h1>
        <p class="text-muted">Manage your guest relationships and view their stay history.</p>
    </div>
    <div class="col-md-5 text-md-end">
        <a href="{% url 'import_guests' %}" class="btn btn-outline-teal me-2">
            <i class="bi bi-file-earmark-arrow-up me-1"></i> Import CSV
        </a>
        <a href="/admin/core/guest/add/" class="btn btn-primary">
            <i class="bi bi-person-plus me-1"></i> New Guest
        </a>
    </div>
</div>

<div class="card p-4 shadow-sm border-0">
    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th>Guest Details</th>
                    <th>Email</th>
                    <th>Stays</th>
                    <th>Joined</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for guest in guests %}
                <tr>
                    <td>
                        <div class="fw-bold text-dark">{{ guest }}</div>
                        <small class="text-muted">{{ guest.phone|default:"No phone" }}</small>
                    </td>
                    <td>{{ guest.email }}</td>
                    <td>
                        <span class="badge bg-light text-teal border border-teal-subtle">
                            {{ guest.stay_count }} stay{{ guest.stay_count|pluralize }}
                        </span>
                    </td>
                    <td>{{ guest.created_at|date:"M d, Y" }}</td>
                    <td class="text-end">
                        <button class="btn btn-sm btn-outline-teal">Send Offer</button>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" class="text-center py-5">
                        <div class="text-muted mb-3">No guests found.</div>
                        <a href="{% url 'import_guests' %}" class="btn btn-sm btn-teal">Import your first guests</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
    .btn-outline-teal {
        color: var(--accent-teal);
        border-color: var(--accent-teal);
    }
    .btn-outline-teal:hover {
        background-color: var(--accent-teal);
        color: white;
    }
    .btn-teal {
        background-color: var(--accent-teal);
        color: white;
    }
    .btn-teal:hover {
        background-color: #0b7a6f;
        color: white;
    }
    .text-teal {
        color: var(--accent-teal) !important;
    }
    .border-teal-subtle {
        border-color: #99f6e4 !important;
    }
</style>
{% endblock %}