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

{% block title %}Hosting Client Login | Host in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       HOSTING CLIENT LOGIN — HOSTING APP THEME
    ========================================================= */

    .hosting-client-login-page {
        min-height: 100vh;
        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.10), transparent 32%),
            linear-gradient(180deg, #fffaf5 0%, #ffffff 48%, #fff7ed 100%);
        color: #2c1b17;
        padding: 4rem 0 5rem;
    }

    .hosting-client-login-wrap {
        max-width: 1180px;
        margin: 0 auto;
    }

    .hosting-client-login-hero {
        position: relative;
        overflow: hidden;
        border-radius: 38px;
        padding: 2.8rem 2.5rem;
        margin-bottom: 2rem;
        color: #ffffff;
        background:
            radial-gradient(circle at top right, rgba(255, 211, 107, 0.22), transparent 34%),
            linear-gradient(135deg, #2d1716 0%, #743129 52%, #a7601b 100%);
        box-shadow: 0 30px 68px rgba(58, 30, 24, 0.20);
    }

    .hosting-client-login-hero::before {
        content: "";
        position: absolute;
        top: -110px;
        right: -85px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.07);
        pointer-events: none;
    }

    .hosting-client-login-hero::after {
        content: "";
        position: absolute;
        bottom: -150px;
        left: -110px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.10);
        pointer-events: none;
    }

    .hosting-client-login-hero-inner {
        position: relative;
        z-index: 2;
    }

    .hosting-client-login-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.52rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #ffe7aa;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
    }

    .hosting-client-login-hero h1 {
        font-size: clamp(2.2rem, 4vw, 3.6rem);
        font-weight: 950;
        line-height: 1.08;
        letter-spacing: -0.045em;
        margin-bottom: 0.85rem;
    }

    .hosting-client-login-hero h1 span {
        color: #ffd36b;
    }

    .hosting-client-login-hero p {
        max-width: 880px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.04rem;
        line-height: 1.78;
        margin-bottom: 1.5rem;
    }

    .hosting-client-login-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .hosting-client-login-actions .btn {
        border-radius: 999px;
        min-height: 48px;
        font-weight: 850;
        padding: 0.82rem 1.35rem;
    }

    .hosting-client-btn-gold {
        background: #ffc107;
        color: #2d1716;
        border: none;
        font-weight: 900;
    }

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

    .hosting-client-btn-glass {
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.42);
    }

    .hosting-client-btn-glass:hover {
        background: #ffffff;
        color: #2d1716;
    }

    .hosting-client-login-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 24px 56px rgba(58, 30, 24, 0.10);
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .hosting-client-login-card-header {
        padding: 1.55rem 1.7rem 1.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%);
    }

    .hosting-client-login-card-header h2,
    .hosting-client-login-card-header h3 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.35rem;
    }

    .hosting-client-login-card-header p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .hosting-client-login-card-body {
        padding: 1.7rem;
    }

    .hosting-client-form-group {
        margin-bottom: 1.2rem;
    }

    .hosting-client-form-group label {
        display: block;
        color: #2d1716;
        font-size: 0.82rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .hosting-client-form-group .form-control {
        min-height: 52px;
        border-radius: 18px;
        border: 1px solid #eadbc9;
        background: #fffaf5;
        color: #2d1716;
        font-weight: 650;
        padding: 0.85rem 1rem;
        transition: all 0.2s ease;
    }

    .hosting-client-form-group .form-control:focus {
        border-color: #a7601b;
        box-shadow: 0 0 0 0.22rem rgba(167, 96, 27, 0.14);
        background: #ffffff;
    }

    .hosting-client-login-btn {
        border-radius: 999px;
        min-height: 54px;
        width: 100%;
        background: linear-gradient(135deg, #ffc107, #df9219);
        color: #2d1716;
        border: none;
        font-weight: 950;
        box-shadow: 0 18px 34px rgba(223, 146, 25, 0.25);
        transition: all 0.22s ease;
    }

    .hosting-client-login-btn:hover {
        background: linear-gradient(135deg, #2d1716, #743129);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 22px 42px rgba(58, 30, 24, 0.24);
    }

    .hosting-client-error-box {
        border-radius: 22px;
        padding: 1rem 1.1rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
        font-weight: 750;
        line-height: 1.6;
        margin-bottom: 1.2rem;
    }

    .hosting-client-message-box {
        border-radius: 22px;
        padding: 1rem 1.1rem;
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #92400e;
        font-weight: 750;
        line-height: 1.6;
        margin-bottom: 1.2rem;
    }

    .hosting-client-help-card {
        border-radius: 26px;
        padding: 1rem;
        background: #fff7e8;
        border: 1px solid #efd8b7;
        margin-bottom: 0.85rem;
    }

    .hosting-client-help-card i {
        color: #a7601b;
        font-size: 1.35rem;
        margin-bottom: 0.6rem;
    }

    .hosting-client-help-card h5 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.35rem;
    }

    .hosting-client-help-card p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
        font-size: 0.93rem;
    }

    .hosting-client-side-link {
        border-radius: 999px;
        min-height: 48px;
        font-weight: 850;
    }

    .hosting-client-divider {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #9a8176;
        font-size: 0.85rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 1.35rem 0;
    }

    .hosting-client-divider::before,
    .hosting-client-divider::after {
        content: "";
        height: 1px;
        background: #eadbc9;
        flex: 1;
    }

    @media (max-width: 991.98px) {
        .hosting-client-login-page {
            padding-top: 2.8rem;
        }

        .hosting-client-login-hero {
            padding: 2rem 1.45rem;
            border-radius: 30px;
        }
    }

    @media (max-width: 767.98px) {
        .hosting-client-login-card-header,
        .hosting-client-login-card-body {
            padding-left: 1.15rem;
            padding-right: 1.15rem;
        }

        .hosting-client-login-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .hosting-client-login-actions .btn {
            width: 100%;
        }
    }

    @media (max-width: 575.98px) {
        .hosting-client-login-page > .container {
            padding-left: 1.25rem !important;
            padding-right: 1.25rem !important;
        }
    }
</style>


<section class="hosting-client-login-page">
    <div class="container">

        <div class="hosting-client-login-wrap">

            <!-- HERO -->
            <div class="hosting-client-login-hero">
                <div class="hosting-client-login-hero-inner">

                    <span class="hosting-client-login-kicker">
                        <i class="bi bi-person-check-fill"></i>
                        Hosting Client Access
                    </span>

                    <h1>
                        Login to manage your <span>event bookings.</span>
                    </h1>

                    <p>
                        Access your Hosting Client dashboard to review bookings, continue payments,
                        browse host venues, and manage your local event experience orders.
                    </p>

                    <div class="hosting-client-login-actions">
                        <a href="{% url 'hosting_app:public_host_venue_list' %}"
                           class="btn hosting-client-btn-gold">
                            <i class="bi bi-search-heart-fill me-2"></i>
                            Browse Host Venues
                        </a>

                        <a href="{% url 'hosting_app:home_hosting' %}"
                           class="btn hosting-client-btn-glass">
                            <i class="bi bi-house-heart-fill me-2"></i>
                            Hosting Home
                        </a>
                    </div>

                </div>
            </div>


            <div class="row g-4 align-items-start">

                <!-- LOGIN FORM -->
                <div class="col-lg-7">

                    <div class="hosting-client-login-card">
                        <div class="hosting-client-login-card-header">
                            <h2>Hosting Client Login</h2>
                            <p>
                                Use the username and password provided when your Hosting Client account was created.
                            </p>
                        </div>

                        <div class="hosting-client-login-card-body">

                            {% if messages %}
                                {% for message in messages %}
                                    <div class="hosting-client-message-box">
                                        {{ message }}
                                    </div>
                                {% endfor %}
                            {% endif %}

                            {% if form.non_field_errors %}
                                <div class="hosting-client-error-box">
                                    {% for error in form.non_field_errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}

                            <form method="post">
                                {% csrf_token %}

                                {% if next %}
                                    <input type="hidden" name="next" value="{{ next }}">
                                {% endif %}

                                <div class="hosting-client-form-group">
                                    <label for="{{ form.username.id_for_label }}">
                                        Username
                                    </label>
                                    {{ form.username }}

                                    {% for error in form.username.errors %}
                                        <div class="text-danger small fw-bold mt-1">
                                            {{ error }}
                                        </div>
                                    {% endfor %}
                                </div>

                                <div class="hosting-client-form-group">
                                    <label for="{{ form.password.id_for_label }}">
                                        Password
                                    </label>
                                    {{ form.password }}

                                    {% for error in form.password.errors %}
                                        <div class="text-danger small fw-bold mt-1">
                                            {{ error }}
                                        </div>
                                    {% endfor %}
                                </div>
                                <div class="text-end mb-3">
                                    <a href="{% url 'hosting_app:hosting_client_password_reset' %}"
                                    class="small fw-bold text-decoration-none"
                                    style="color:#a7601b;">
                                        Forgot password?
                                    </a>
                                </div>
                                <button type="submit" class="btn hosting-client-login-btn">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>
                                    Login to Client Dashboard
                                </button>
                            </form>

                            <div class="hosting-client-divider">
                                New Booking?
                            </div>

                            <div class="d-grid gap-2">
                                <a href="{% url 'hosting_app:public_host_venue_list' %}"
                                   class="btn btn-outline-dark hosting-client-side-link">
                                    <i class="bi bi-calendar-heart-fill me-2"></i>
                                    Browse Venues & Start Booking
                                </a>

                                <a href="{% url 'hosting_app:host_login' %}"
                                   class="btn btn-outline-secondary hosting-client-side-link">
                                    <i class="bi bi-building-check me-2"></i>
                                    Hosting Partner Login
                                </a>
                            </div>

                        </div>
                    </div>

                </div>


                <!-- SIDEBAR -->
                <div class="col-lg-5">

                    <div class="hosting-client-login-card">
                        <div class="hosting-client-login-card-header">
                            <h3>What you can manage</h3>
                            <p>
                                Your Hosting Client account keeps your booking flow organized.
                            </p>
                        </div>

                        <div class="hosting-client-login-card-body">

                            <div class="hosting-client-help-card">
                                <i class="bi bi-calendar-heart-fill"></i>
                                <h5>Event Bookings</h5>
                                <p>
                                    Review venue bookings, event dates, guest counts, packages, meal plans, and add-ons.
                                </p>
                            </div>

                            <div class="hosting-client-help-card">
                                <i class="bi bi-wallet2"></i>
                                <h5>Payment Center</h5>
                                <p>
                                    View due payments, paid records, and continue to checkout for your selected bookings.
                                </p>
                            </div>

                            <div class="hosting-client-help-card">
                                <i class="bi bi-stars"></i>
                                <h5>Hosted Experiences</h5>
                                <p>
                                    Browse romantic dinners, celebrations, birthday events, private dining, and custom arrangements.
                                </p>
                            </div>

                            <div class="hosting-client-help-card">
                                <i class="bi bi-shield-check"></i>
                                <h5>Secure Access</h5>
                                <p>
                                    Your bookings and payment items are connected to your own client account.
                                </p>
                            </div>

                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>
</section>

{% endblock %}