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

{% block title %}Hosting Partner Sign In | Host in Sri Lanka{% endblock %}

{% block extra_css %}
<style>
    .hosting-login-page {
        min-height: 86vh;
        display: flex;
        align-items: center;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.16), transparent 30%),
            radial-gradient(circle at bottom left, rgba(120, 51, 40, 0.13), transparent 32%),
            linear-gradient(135deg, #fffaf3 0%, #ffffff 55%, #fff4e7 100%);
        padding: 70px 0;
    }

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

    .hosting-login-brand-panel {
        min-height: 100%;
        border-radius: 36px;
        padding: 48px 42px;
        background:
            linear-gradient(145deg, rgba(39, 25, 20, 0.97), rgba(118, 51, 40, 0.92));
        color: #fff;
        box-shadow: 0 28px 70px rgba(40, 20, 14, 0.24);
        position: relative;
        overflow: hidden;
    }

    .hosting-login-brand-panel::before {
        content: "";
        position: absolute;
        right: -110px;
        top: -110px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.18);
    }

    .hosting-login-brand-panel::after {
        content: "";
        position: absolute;
        left: -100px;
        bottom: -110px;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

    .hosting-login-brand-content {
        position: relative;
        z-index: 2;
    }

    .hosting-login-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.16);
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 22px;
    }

    .hosting-login-brand-panel h1 {
        font-size: clamp(2.2rem, 4vw, 3.4rem);
        line-height: 1.08;
        font-weight: 800;
        margin-bottom: 18px;
    }

    .hosting-login-brand-panel p {
        color: rgba(255, 255, 255, 0.80);
        line-height: 1.75;
        font-size: 1.05rem;
        margin-bottom: 28px;
    }

    .hosting-login-points {
        display: grid;
        gap: 14px;
    }

    .hosting-login-point {
        display: flex;
        gap: 14px;
        padding: 16px 18px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
    }

    .hosting-login-point i {
        color: #ffd65c;
        font-size: 1.2rem;
        margin-top: 2px;
    }

    .hosting-login-point strong {
        display: block;
        margin-bottom: 3px;
    }

    .hosting-login-point span {
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .hosting-login-card {
        background: #fff;
        border-radius: 36px;
        padding: 44px 40px;
        box-shadow: 0 28px 70px rgba(33, 24, 19, 0.12);
        border: 1px solid rgba(124, 74, 50, 0.08);
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hosting-login-card h2 {
        font-size: 2rem;
        font-weight: 800;
        color: #2c1c18;
        margin-bottom: 8px;
    }

    .hosting-login-card .intro {
        color: #786660;
        line-height: 1.65;
        margin-bottom: 28px;
    }

    .hosting-login-card label {
        font-weight: 700;
        color: #49322c;
        margin-bottom: 8px;
    }

    .hosting-login-card .form-control {
        min-height: 54px;
        border-radius: 16px;
        border: 1px solid #e8ddd7;
        padding: 13px 16px;
        box-shadow: none;
    }

    .hosting-login-card .form-control:focus {
        border-color: #c28a36;
        box-shadow: 0 0 0 0.22rem rgba(194, 138, 54, 0.14);
    }

    .hosting-login-btn {
        min-height: 56px;
        border-radius: 18px;
        border: none;
        font-weight: 800;
        font-size: 1rem;
        background: linear-gradient(135deg, #f4b41b, #d88918);
        color: #24160f;
        box-shadow: 0 16px 30px rgba(216, 137, 24, 0.22);
    }

    .hosting-login-btn:hover {
        transform: translateY(-1px);
        color: #24160f;
        background: linear-gradient(135deg, #ffc439, #dd931e);
    }

    .hosting-signup-link {
        text-align: center;
        color: #71605a;
        margin-top: 22px;
    }

    .hosting-signup-link a {
        color: #9a5d19;
        font-weight: 700;
        text-decoration: none;
    }

    .hosting-signup-link a:hover {
        text-decoration: underline;
    }

    .hosting-login-error {
        color: #b42318;
        font-size: 0.9rem;
        margin-top: 7px;
    }

    @media (max-width: 991.98px) {
        .hosting-login-page {
            padding: 45px 0;
        }

        .hosting-login-brand-panel {
            padding: 34px 26px;
        }

        .hosting-login-card {
            padding: 34px 24px;
        }
    }
</style>
{% endblock %}

{% block content %}
<section class="hosting-login-page">
    <div class="container hosting-login-wrap">
        <div class="row g-4 align-items-stretch">

            <!-- LEFT PANEL -->
            <div class="col-lg-6">
                <div class="hosting-login-brand-panel">
                    <div class="hosting-login-brand-content">

                        <span class="hosting-login-kicker">
                            <i class="bi bi-stars"></i>
                            Host in Sri Lanka
                        </span>

                        <h1>
                            Welcome back, Hosting Partner.
                        </h1>

                        <p>
                            Sign in to manage your hosting profile and prepare your venue,
                            experience packages, meals, and add-on services for future guest bookings.
                        </p>

                        <div class="hosting-login-points">

                            <div class="hosting-login-point">
                                <i class="bi bi-building-fill-check"></i>
                                <div>
                                    <strong>Manage your hosting presence</strong>
                                    <span>
                                        Keep your partner profile ready and build venue listings step by step.
                                    </span>
                                </div>
                            </div>

                            <div class="hosting-login-point">
                                <i class="bi bi-gift-fill"></i>
                                <div>
                                    <strong>Present memorable experiences</strong>
                                    <span>
                                        Later add proposal, anniversary, birthday, and romantic event packages.
                                    </span>
                                </div>
                            </div>

                            <div class="hosting-login-point">
                                <i class="bi bi-people-fill"></i>
                                <div>
                                    <strong>Connect with global guests</strong>
                                    <span>
                                        Become part of Ensolanka’s travel, lifestyle, and relationship ecosystem.
                                    </span>
                                </div>
                            </div>

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

            <!-- LOGIN CARD -->
            <div class="col-lg-6">
                <div class="hosting-login-card">

                    <h2>Hosting Partner Sign In</h2>
                    <p class="intro">
                        Use your Hosting Partner username and password to access your dashboard.
                    </p>

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

                        {% if form.non_field_errors %}
                            <div class="alert alert-danger rounded-4">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}

                        <div class="mb-3">
                            <label for="{{ form.username.id_for_label }}">
                                Username
                            </label>
                            {{ form.username }}

                            {% if form.username.errors %}
                                <div class="hosting-login-error">
                                    {{ form.username.errors|striptags }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.password.id_for_label }}">
                                Password
                            </label>
                            {{ form.password }}

                            {% if form.password.errors %}
                                <div class="hosting-login-error">
                                    {{ form.password.errors|striptags }}
                                </div>
                            {% endif %}
                        </div>
                        <div class="text-end mb-3">
                            <a href="{% url 'hosting_app:host_password_reset' %}"
                                style="color: #9a5d19; font-weight: 700; text-decoration: none;">
                                Forgot password?
                            </a>
                        </div>
                        <div class="d-grid mt-4">
                            <button type="submit" class="btn hosting-login-btn">
                                <i class="bi bi-box-arrow-in-right me-2"></i>
                                Sign In to Dashboard
                            </button>
                        </div>

                        <p class="hosting-signup-link mb-0">
                            New to Host in Sri Lanka?
                            <a href="{% url 'hosting_app:host_signup' %}">
                                Create Hosting Partner Account
                            </a>
                        </p>

                    </form>

                </div>
            </div>

        </div>
    </div>
</section>
{% endblock %}