{% extends 'hosting_app/base_hosting.html' %}
{% load static %}

{% block title %}Public Hosts | Host in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       PUBLIC HOST VENUE LIST — PREMIUM PUBLIC STYLE
    ========================================================= */

    .public-host-page {
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 30%),
            radial-gradient(circle at top right, rgba(116, 49, 41, 0.12), transparent 34%),
            linear-gradient(180deg, #fffaf5 0%, #ffffff 48%, #fff7ef 100%);
        min-height: 100vh;
        color: #2d1716;
        overflow-x: hidden;
    }

    .public-host-hero {
        position: relative;
        min-height: 560px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background:
            linear-gradient(
                100deg,
                rgba(45, 23, 22, 0.96) 0%,
                rgba(45, 23, 22, 0.88) 45%,
                rgba(116, 49, 41, 0.64) 75%,
                rgba(116, 49, 41, 0.52) 100%
            ),
            url("{% static 'hosting_app/images/hosting_hero.webp' %}") center center / cover no-repeat;
    }

    .public-host-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 18% 35%, rgba(255, 193, 7, 0.23), transparent 34%),
            radial-gradient(circle at 88% 70%, rgba(255, 255, 255, 0.10), transparent 34%);
        pointer-events: none;
    }

    .public-host-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120px;
        background: linear-gradient(to bottom, transparent, #fffaf5);
    }

    .public-host-hero-inner {
        position: relative;
        z-index: 2;
        padding: 6rem 0 7rem;
        max-width: 960px;
    }

    .public-host-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.55rem 1rem;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.16);
        border: 1px solid rgba(255, 193, 7, 0.34);
        color: #ffe7aa;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 0.78rem;
        margin-bottom: 1.2rem;
        backdrop-filter: blur(8px);
    }

    .public-host-hero h1 {
        color: #ffffff;
        font-size: clamp(2.55rem, 5vw, 4.9rem);
        font-weight: 950;
        line-height: 1.04;
        letter-spacing: -0.05em;
        margin-bottom: 1.15rem;
    }

    .public-host-hero p {
        color: rgba(255, 255, 255, 0.86);
        font-size: 1.12rem;
        line-height: 1.82;
        max-width: 780px;
        margin-bottom: 0;
    }

    .public-host-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-top: 1.7rem;
    }

    .public-host-hero-actions .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: 0.86rem 1.4rem;
        min-height: 50px;
    }

    .public-host-btn-gold {
        background: #ffc107;
        color: #2d1716;
        border: none;
        box-shadow: 0 16px 32px rgba(255, 193, 7, 0.22);
    }

    .public-host-btn-gold:hover {
        background: #ffe082;
        color: #2d1716;
        transform: translateY(-2px);
    }

    .public-host-btn-glass {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.36);
        backdrop-filter: blur(10px);
    }

    .public-host-btn-glass:hover {
        background: #ffffff;
        color: #2d1716;
    }

    .public-host-content {
        position: relative;
        z-index: 3;
        margin-top: -78px;
        padding-bottom: 5rem;
    }

    .public-host-filter-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 28px 70px rgba(58, 30, 24, 0.12);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .public-host-filter-header {
        padding: 1.6rem 1.8rem 1rem;
        border-bottom: 1px solid #efe2d3;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.08), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    }

    .public-host-filter-header h2 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.35rem;
    }

    .public-host-filter-header p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .public-host-filter-body {
        padding: 1.55rem 1.8rem 1.8rem;
    }

    .public-host-filter-group label {
        display: block;
        color: #2d1716;
        font-weight: 850;
        font-size: 0.88rem;
        margin-bottom: 0.45rem;
    }

    .public-host-filter-group input,
    .public-host-filter-group select {
        border-radius: 16px;
        border: 1px solid #eadbc9;
        background-color: #fffaf5;
        color: #2d1716;
        min-height: 48px;
    }

    .public-host-filter-group input:focus,
    .public-host-filter-group select:focus {
        border-color: #a7601b;
        background-color: #ffffff;
        box-shadow: 0 0 0 0.22rem rgba(167, 96, 27, 0.13);
    }

    .public-host-filter-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: end;
        height: 100%;
    }

    .public-host-filter-actions .btn {
        border-radius: 999px;
        min-height: 48px;
        font-weight: 850;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .public-host-submit-btn {
        background: linear-gradient(135deg, #321816, #a7601b);
        color: #ffffff;
        border: none;
    }

    .public-host-submit-btn:hover {
        color: #2d1716;
        background: linear-gradient(135deg, #ffc107, #ffe082);
    }

    .public-host-topline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 1.35rem;
    }

    .public-host-topline h2 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.25rem;
        letter-spacing: -0.03em;
    }

    .public-host-topline p {
        color: #7a655d;
        margin-bottom: 0;
        line-height: 1.65;
    }

    .public-host-count-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.7rem 1rem;
        border-radius: 999px;
        background: #fff4e4;
        border: 1px solid #efd7ae;
        color: #7a4c18;
        font-weight: 900;
        white-space: nowrap;
    }

    .public-host-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.35rem;
    }

    .public-host-card {
        border-radius: 30px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 18px 40px rgba(58, 30, 24, 0.08);
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: 0.25s ease;
    }

    .public-host-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 28px 58px rgba(58, 30, 24, 0.14);
    }

    .public-host-image-wrap {
        position: relative;
        height: 230px;
        overflow: hidden;
        background: #fff4e4;
    }

    .public-host-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.35s ease;
    }

    .public-host-card:hover .public-host-image-wrap img {
        transform: scale(1.045);
    }

    .public-host-image-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a7601b;
        font-size: 3.2rem;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.18), transparent 34%),
            linear-gradient(135deg, #fffaf5, #fff4e4);
    }

    .public-host-card-badges {
        position: absolute;
        top: 1rem;
        left: 1rem;
        right: 1rem;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .public-host-badge-soft,
    .public-host-featured {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.42rem 0.7rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        backdrop-filter: blur(10px);
    }

    .public-host-badge-soft {
        background: rgba(255, 255, 255, 0.92);
        color: #2d1716;
    }

    .public-host-featured {
        background: rgba(255, 193, 7, 0.94);
        color: #2d1716;
    }

    .public-host-card-body {
        padding: 1.35rem;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .public-host-category {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: #a7601b;
        font-size: 0.78rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 0.6rem;
    }

    .public-host-card h3 {
        color: #2d1716;
        font-size: 1.22rem;
        font-weight: 950;
        line-height: 1.3;
        margin-bottom: 0.55rem;
    }

    .public-host-location {
        display: flex;
        align-items: flex-start;
        gap: 0.45rem;
        color: #7a655d;
        font-size: 0.93rem;
        line-height: 1.55;
        margin-bottom: 0.85rem;
    }

    .public-host-location i {
        color: #a7601b;
        margin-top: 0.18rem;
    }

    .public-host-description {
        color: #6f5b53;
        line-height: 1.68;
        font-size: 0.94rem;
        margin-bottom: 1rem;
    }

    .public-host-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: auto;
        margin-bottom: 1.1rem;
    }

    .public-host-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.32rem;
        padding: 0.42rem 0.65rem;
        border-radius: 999px;
        background: #fffaf5;
        border: 1px solid #efe2d3;
        color: #6f5b53;
        font-size: 0.76rem;
        font-weight: 800;
    }

    .public-host-chip i {
        color: #a7601b;
    }

    .public-host-card-footer {
        border-top: 1px solid #f0e4d6;
        padding-top: 1rem;
    }

    .public-host-card-footer .btn {
        border-radius: 999px;
        min-height: 46px;
        font-weight: 850;
        width: 100%;
        background: linear-gradient(135deg, #321816, #a7601b);
        color: #ffffff;
        border: none;
    }

    .public-host-card-footer .btn:hover {
        color: #2d1716;
        background: linear-gradient(135deg, #ffc107, #ffe082);
    }

    .public-host-empty {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px dashed #d8bfa3;
        padding: 4rem 1.5rem;
        text-align: center;
        box-shadow: 0 18px 40px rgba(58, 30, 24, 0.06);
    }

    .public-host-empty-icon {
        width: 96px;
        height: 96px;
        border-radius: 34px;
        background: linear-gradient(135deg, #fff4e4, #ffe7aa);
        color: #a7601b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2.7rem;
        margin-bottom: 1.4rem;
        box-shadow: 0 18px 36px rgba(167, 96, 27, 0.14);
    }

    .public-host-empty h3 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.65rem;
    }

    .public-host-empty p {
        color: #7a655d;
        max-width: 660px;
        margin: 0 auto 1.5rem;
        line-height: 1.75;
    }

    .public-host-pagination {
        margin-top: 2rem;
        display: flex;
        justify-content: center;
    }

    .public-host-pagination .pagination {
        gap: 0.45rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .public-host-pagination .page-link {
        border-radius: 999px;
        border: 1px solid #eadbc9;
        color: #7a4c18;
        font-weight: 850;
        min-width: 42px;
        text-align: center;
    }

    .public-host-pagination .page-item.active .page-link {
        background: #a7601b;
        border-color: #a7601b;
        color: #ffffff;
    }

    .public-host-pagination .page-link:hover {
        background: #fff4e4;
        color: #2d1716;
    }

    @media (max-width: 1199.98px) {
        .public-host-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .public-host-hero {
            min-height: auto;
            background-position: 68% center;
        }

        .public-host-hero-inner {
            padding: 5rem 1.2rem 6rem;
        }

        .public-host-content {
            margin-top: -55px;
        }
    }

    @media (max-width: 767.98px) {
        .public-host-grid {
            grid-template-columns: 1fr;
        }

        .public-host-hero-actions,
        .public-host-filter-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .public-host-hero-actions .btn,
        .public-host-filter-actions .btn {
            width: 100%;
        }

        .public-host-filter-body,
        .public-host-filter-header {
            padding-left: 1.15rem;
            padding-right: 1.15rem;
        }

        .public-host-filter-card {
            border-radius: 28px;
        }
    }
</style>


<div class="public-host-page">

    <!-- HERO -->
    <section class="public-host-hero">
        <div class="container">
            <div class="public-host-hero-inner">

                <span class="public-host-badge">
                    <i class="bi bi-building-heart"></i>
                    Public Hosting Venues
                </span>

                <h1>
                    Find Beautiful Places for Dates, Proposals & Celebrations
                </h1>

                <p>
                    Explore approved Host in Sri Lanka venues for romantic dates, proposal moments,
                    anniversaries, birthdays, honeymoon experiences, private dinners, and meaningful
                    celebrations arranged through Ensolanka.
                </p>

                <div class="public-host-hero-actions">
                    <a href="#host-list-section" class="btn public-host-btn-gold">
                        <i class="bi bi-search-heart-fill me-2"></i>
                        Browse Hosts
                    </a>

                    {% if is_host_user %}
                        <a href="{% url 'hosting_app:host_dashboard' %}"
                           class="btn public-host-btn-glass">
                            <i class="bi bi-speedometer2 me-2"></i>
                            My Host Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'hosting_app:host_signup' %}"
                           class="btn public-host-btn-glass">
                            <i class="bi bi-building-add me-2"></i>
                            Become a Hosting Partner
                        </a>
                    {% endif %}
                </div>

            </div>
        </div>
    </section>


    <!-- CONTENT -->
    <section class="public-host-content" id="host-list-section">
        <div class="container">

            <!-- FILTERS -->
            <div class="public-host-filter-card">

                <div class="public-host-filter-header">
                    <h2>Search Hosting Venues</h2>
                    <p>
                        Filter by location, venue type, and event purpose to find a suitable place
                        for a memorable Sri Lankan celebration.
                    </p>
                </div>

                <div class="public-host-filter-body">
                    <form method="get">
                        <div class="row g-3">

                            <div class="col-lg-3 col-md-6">
                                <div class="public-host-filter-group">
                                    <label for="q">Search</label>
                                    <input type="text"
                                           id="q"
                                           name="q"
                                           class="form-control"
                                           value="{{ q }}"
                                           placeholder="Venue, city, district...">
                                </div>
                            </div>

                            <div class="col-lg-2 col-md-6">
                                <div class="public-host-filter-group">
                                    <label for="district">District</label>
                                    <select id="district"
                                            name="district"
                                            class="form-select">
                                        <option value="">All Districts</option>
                                        {% for value, label in district_choices %}
                                            <option value="{{ value }}"
                                                    {% if district == value %}selected{% endif %}>
                                                {{ label }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-2 col-md-6">
                                <div class="public-host-filter-group">
                                    <label for="city">City</label>
                                    <select id="city"
                                            name="city"
                                            class="form-select">
                                        <option value="">All Cities</option>
                                        {% for value, label in city_choices %}
                                            <option value="{{ value }}"
                                                    {% if city == value %}selected{% endif %}>
                                                {{ label }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-2 col-md-6">
                                <div class="public-host-filter-group">
                                    <label for="category">Venue Type</label>
                                    <select id="category"
                                            name="category"
                                            class="form-select">
                                        <option value="">All Types</option>
                                        {% for value, label in venue_category_choices %}
                                            <option value="{{ value }}"
                                                    {% if category == value %}selected{% endif %}>
                                                {{ label }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-12">
                                <div class="public-host-filter-group">
                                    <label for="event_type">Event Purpose</label>
                                    <select id="event_type"
                                            name="event_type"
                                            class="form-select">
                                        <option value="">All Event Types</option>
                                        {% for value, label in event_type_choices %}
                                            <option value="{{ value }}"
                                                    {% if event_type == value %}selected{% endif %}>
                                                {{ label }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="public-host-filter-actions">
                                    <button type="submit" class="btn public-host-submit-btn">
                                        <i class="bi bi-funnel-fill me-2"></i>
                                        Apply Filters
                                    </button>

                                    <a href="{% url 'hosting_app:public_host_venue_list' %}"
                                       class="btn btn-outline-secondary">
                                        <i class="bi bi-arrow-counterclockwise me-2"></i>
                                        Reset
                                    </a>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>

            </div>


            <!-- TOPLINE -->
            <div class="public-host-topline">
                <div>
                    <h2>Available Public Hosts</h2>
                    <p>
                        Approved venues ready to support special dates, couple moments,
                        private dinners, and celebration experiences.
                    </p>
                </div>

                <div class="public-host-count-pill">
                    <i class="bi bi-buildings-fill"></i>
                    {{ page_obj.paginator.count }} Venue{{ page_obj.paginator.count|pluralize }}
                </div>
            </div>


            <!-- VENUE GRID -->
            {% if venues %}
                <div class="public-host-grid">

                    {% for venue in venues %}
                        <div class="public-host-card">

                            <div class="public-host-image-wrap">

                                {% if venue.cover_image %}
                                    <img src="{{ venue.cover_image.url }}"
                                         alt="{{ venue.venue_name }}">
                                {% else %}
                                    <div class="public-host-image-placeholder">
                                        <i class="bi bi-building-heart"></i>
                                    </div>
                                {% endif %}

                                <div class="public-host-card-badges">
                                    <span class="public-host-badge-soft">
                                        <i class="bi bi-tag-fill"></i>
                                        {% if venue.venue_category %}
                                            {{ venue.get_venue_category_display }}
                                        {% else %}
                                            Venue
                                        {% endif %}
                                    </span>

                                    {% if venue.is_featured %}
                                        <span class="public-host-featured">
                                            <i class="bi bi-star-fill"></i>
                                            Featured
                                        </span>
                                    {% endif %}
                                </div>

                            </div>

                            <div class="public-host-card-body">

                                <div class="public-host-category">
                                    <i class="bi bi-building-heart"></i>
                                    {% if venue.host_profile %}
                                        {{ venue.host_profile.business_name }}
                                    {% else %}
                                        Hosting Partner
                                    {% endif %}
                                </div>

                                <h3>{{ venue.venue_name }}</h3>

                                <div class="public-host-location">
                                    <i class="bi bi-geo-alt-fill"></i>
                                    <span>
                                        {% if venue.city or venue.district %}
                                            {% if venue.get_city_display %}
                                                {{ venue.get_city_display }}
                                            {% else %}
                                                {{ venue.city }}
                                            {% endif %}
                                            {% if venue.city and venue.district %}, {% endif %}
                                            {% if venue.get_district_display %}
                                                {{ venue.get_district_display }}
                                            {% else %}
                                                {{ venue.district }}
                                            {% endif %}
                                        {% else %}
                                            Sri Lanka
                                        {% endif %}
                                    </span>
                                </div>

                                <p class="public-host-description">
                                    {{ venue.short_description|truncatechars:145 }}
                                </p>

                                <div class="public-host-chip-row">

                                    {% if venue.max_guest_capacity %}
                                        <span class="public-host-chip">
                                            <i class="bi bi-people-fill"></i>
                                            Up to {{ venue.max_guest_capacity }}
                                        </span>
                                    {% endif %}

                                    {% if venue.supports_romantic_dates %}
                                        <span class="public-host-chip">
                                            <i class="bi bi-heart-fill"></i>
                                            Dates
                                        </span>
                                    {% endif %}

                                    {% if venue.supports_proposal_events %}
                                        <span class="public-host-chip">
                                            <i class="bi bi-gem"></i>
                                            Proposals
                                        </span>
                                    {% endif %}

                                    {% if venue.supports_anniversaries %}
                                        <span class="public-host-chip">
                                            <i class="bi bi-calendar-heart"></i>
                                            Anniversaries
                                        </span>
                                    {% endif %}

                                    {% if venue.supports_birthdays %}
                                        <span class="public-host-chip">
                                            <i class="bi bi-cake2-fill"></i>
                                            Birthdays
                                        </span>
                                    {% endif %}

                                    {% if venue.meal_service_available %}
                                        <span class="public-host-chip">
                                            <i class="bi bi-cup-hot-fill"></i>
                                            Meals
                                        </span>
                                    {% endif %}

                                    {% if venue.private_area_available %}
                                        <span class="public-host-chip">
                                            <i class="bi bi-shield-lock-fill"></i>
                                            Private Area
                                        </span>
                                    {% endif %}

                                </div>

                                <div class="public-host-card-footer">
                                    <a href="{% url 'hosting_app:public_host_venue_detail' venue.slug %}"
                                       class="btn">
                                        <i class="bi bi-eye-fill me-2"></i>
                                        View Host Venue
                                    </a>
                                </div>

                            </div>

                        </div>
                    {% endfor %}

                </div>


                <!-- PAGINATION -->
                {% if page_obj.has_other_pages %}
                    <nav class="public-host-pagination" aria-label="Public host venue pagination">
                        <ul class="pagination">

                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="?page={{ page_obj.previous_page_number }}{% if q %}&q={{ q }}{% endif %}{% if district %}&district={{ district }}{% endif %}{% if city %}&city={{ city }}{% endif %}{% if category %}&category={{ category }}{% endif %}{% if event_type %}&event_type={{ event_type }}{% endif %}">
                                        Previous
                                    </a>
                                </li>
                            {% endif %}

                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ num }}</span>
                                    </li>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="?page={{ num }}{% if q %}&q={{ q }}{% endif %}{% if district %}&district={{ district }}{% endif %}{% if city %}&city={{ city }}{% endif %}{% if category %}&category={{ category }}{% endif %}{% if event_type %}&event_type={{ event_type }}{% endif %}">
                                            {{ num }}
                                        </a>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="?page={{ page_obj.next_page_number }}{% if q %}&q={{ q }}{% endif %}{% if district %}&district={{ district }}{% endif %}{% if city %}&city={{ city }}{% endif %}{% if category %}&category={{ category }}{% endif %}{% if event_type %}&event_type={{ event_type }}{% endif %}">
                                        Next
                                    </a>
                                </li>
                            {% endif %}

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

            {% else %}

                <div class="public-host-empty">
                    <div class="public-host-empty-icon">
                        <i class="bi bi-search-heart"></i>
                    </div>

                    <h3>No Public Hosts Found</h3>

                    <p>
                        We could not find approved public hosting venues matching your filters.
                        Try changing the location, venue type, event purpose, or search keyword.
                    </p>

                    <a href="{% url 'hosting_app:public_host_venue_list' %}"
                       class="btn public-host-btn-gold rounded-pill px-4 py-3 fw-bold">
                        <i class="bi bi-arrow-counterclockwise me-2"></i>
                        Reset Filters
                    </a>
                </div>

            {% endif %}

        </div>
    </section>

</div>

{% endblock %}