{% extends 'expat_life/base.html' %}
{% load static %}
{% block title %}Public Guest Profiles{% endblock %}

{% block content %}
<section class="py-5 bg-light">
    <div class="container">
        <div class="mb-4">
            <h1 class="fw-bold">Guest Profiles</h1>
            <p class="text-muted">
                Browse approved guest profiles. Public visitors see limited featured profiles, while approved dating partners may access more profiles based on permission level.
            </p>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <form method="get" class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Nationality</label>
                        <select name="nationality" class="form-select">
                            <option value="">All Nationalities</option>
                            {% for value, label in nationality_choices %}
                                <option value="{{ value }}" {% if selected_nationality == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Gender</label>
                        <select name="gender" class="form-select">
                            <option value="">All Genders</option>
                            {% for value, label in gender_choices %}
                                <option value="{{ value }}" {% if selected_gender == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Monthly Budget</label>
                        <select name="monthly_budget" class="form-select">
                            <option value="">All Budgets</option>
                            {% for value, label in budget_choices %}
                                <option value="{{ value }}" {% if selected_budget == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-12 d-flex flex-wrap gap-2">
                        <button class="btn btn-dark" type="submit">Apply Filters</button>
                        <a href="{% url 'expat_life:public_foreigners_list' %}" class="btn btn-outline-secondary">Reset</a>
                    </div>
                </form>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-12 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                <div>
                    <h5 class="fw-bold mb-1">Available Guest Profiles</h5>
                    {% if total_results > 0 %}
                        <p class="text-muted mb-0">
                            Showing {{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ total_results }} profile{{ total_results|pluralize }}
                        </p>
                    {% else %}
                        <p class="text-muted mb-0">
                            No guest profiles found for the selected filters.
                        </p>
                    {% endif %}
                </div>

                {% if page_obj.paginator.num_pages > 1 %}
                    <div class="text-muted small">
                        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="row g-4">
            {% for profile in profiles %}
            <div class="col-md-6 col-lg-4">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                    {% if profile.profile_image %}
                        <img src="{{ profile.profile_image.url }}"
                             class="card-img-top"
                             style="height: 280px; object-fit: cover;"
                             alt="{{ profile.lead.full_name|default:profile.user.username }}">
                    {% else %}
                        <div class="d-flex align-items-center justify-content-center bg-white"
                             style="height: 280px;">
                            <i class="bi bi-person-badge fs-1 text-muted"></i>
                        </div>
                    {% endif %}

                    <div class="card-body d-flex flex-column p-4">
                        <div class="mb-2">
                            {% if profile.is_featured %}
                                <span class="badge bg-warning text-dark">Featured</span>
                            {% endif %}
                            {% if profile.is_public %}
                                <span class="badge bg-success">Public</span>
                            {% endif %}
                        </div>

                        <h5 class="fw-bold mb-2">
                            {{ profile.lead.full_name|default:profile.user.get_full_name|default:profile.user.username }}
                        </h5>

                        <p class="text-muted mb-2">
                            {% if profile.lead.nationality %}
                                <i class="bi bi-globe2 me-1"></i>{{ profile.lead.nationality }}
                            {% endif %}
                            {% if profile.lead.country %}
                                {% if profile.lead.nationality %} | {% endif %}
                                <i class="bi bi-geo-alt-fill me-1"></i>{{ profile.lead.country }}
                            {% endif %}
                        </p>

                        <ul class="list-unstyled small text-muted mb-3">
                            {% if profile.lead.gender %}
                                <li class="mb-1"><strong>Gender:</strong> {{ profile.lead.get_gender_display }}</li>
                            {% endif %}
                            {% if profile.lead.monthly_budget %}
                                <li class="mb-1"><strong>Budget:</strong> {{ profile.lead.get_monthly_budget_display }}</li>
                            {% endif %}
                            {% if profile.lead.duration_of_stay %}
                                <li class="mb-1"><strong>Stay:</strong> {{ profile.lead.duration_of_stay }}</li>
                            {% endif %}
                            {% if profile.lead.remote_worker %}
                                <li><strong>Remote Worker:</strong> Yes</li>
                            {% endif %}
                        </ul>

                        <div class="mt-auto">
                            <a href="{% url 'expat_life:public_foreigner_detail' profile.pk %}" class="btn btn-outline-dark btn-sm">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="alert alert-info rounded-4">
                    No guest profiles found for the selected filters.
                </div>
            </div>
            {% endfor %}
        </div>

        {% if page_obj.paginator.num_pages > 1 %}
        <div class="row mt-5">
            <div class="col-12">
                <nav aria-label="Guest profile list pagination">
                    <ul class="pagination justify-content-center flex-wrap gap-1">

                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link rounded-pill px-3"
                                   href="?{% if query_string %}{{ query_string }}&{% endif %}page=1">First</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link rounded-pill px-3"
                                   href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.previous_page_number }}">Previous</a>
                            </li>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if num == page_obj.number %}
                                <li class="page-item active">
                                    <span class="page-link rounded-pill px-3">{{ num }}</span>
                                </li>
                            {% elif num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}
                                <li class="page-item">
                                    <a class="page-link rounded-pill px-3"
                                       href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ num }}">{{ num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link rounded-pill px-3"
                                   href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.next_page_number }}">Next</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link rounded-pill px-3"
                                   href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.paginator.num_pages }}">Last</a>
                            </li>
                        {% endif %}

                    </ul>
                </nav>
            </div>
        </div>
        {% endif %}
    </div>
</section>

<style>
    .pagination .page-link {
        border: 1px solid #dee2e6;
        color: #212529;
        min-width: 44px;
        text-align: center;
        transition: all 0.2s ease;
    }

    .pagination .page-link:hover {
        background-color: #212529;
        color: #fff;
        border-color: #212529;
        transform: translateY(-1px);
    }

    .pagination .page-item.active .page-link {
        background-color: #212529;
        border-color: #212529;
        color: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .pagination .page-item.disabled .page-link {
        border-color: #dee2e6;
        color: #adb5bd;
        background-color: #f8f9fa;
    }
</style>
{% endblock %}