{% extends "base.html" %}

{% block title %}Vacation Packages - VacationWeb{% endblock %}

{% block extra_css %}
<style>
    body {
        background: linear-gradient(135deg, #0c2461, #1e3799, #4a69bd);
        min-height: 100vh;
        color: white;
    }
    .hero-section {
        padding: 60px 0 30px;
        text-align: center;
    }
    /* Search Bar Design */
    .search-wrapper {
        max-width: 700px;
        margin: 0 auto 40px;
        position: relative;
    }
    .search-bar {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(15px);
        border: 2px solid rgba(255, 215, 0, 0.3);
        border-radius: 50px;
        padding: 15px 30px;
        color: white;
        font-size: 1.1rem;
        transition: all 0.3s ease;
    }
    .search-bar:focus {
        background: rgba(255, 255, 255, 0.2);
        border-color: #FFD700;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
        color: white;
        outline: none;
    }
    .search-bar::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }
    .search-btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(45deg, #FFD700, #FFA500);
        border: none;
        border-radius: 40px;
        padding: 8px 25px;
        font-weight: bold;
        color: #0c2461;
    }

    .package-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        transition: 0.3s;
    }
    .package-card:hover {
        border-color: #FFD700;
        transform: scale(1.02);
    }
    .price-tag {
        color: #FFD700;
        font-size: 1.4rem;
        font-weight: bold;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="hero-section">
        <h1 class="fw-bold" style="color: #FFD700;">Discover Your Next Getaway</h1>
        <p class="text-white-50">Browse our curated vacation packages across Malaysia</p>
    </div>

    <div class="search-wrapper">
        <form action="{{ url_for('search') }}" method="GET">
            <input type="text" 
                   name="q" 
                   class="form-control search-bar" 
                   placeholder="Search by destination, activity, or keyword..." 
                   value="{{ request.args.get('q', '') }}">
            <button type="submit" class="search-btn">Search</button>
        </form>
    </div>

    <div class="row g-4 mb-5">
        {% for package in packages %}
        <div class="col-md-6 col-lg-4">
            <div class="package-card h-100 p-3">
                <img src="{{ package.image_url or 'https://images.unsplash.com/photo-1544918877-460635b6d13e?w=500' }}" 
                     class="img-fluid rounded mb-3" alt="{{ package.name }}">
                <h4 class="fw-bold">{{ package.name }}</h4>
                <p class="text-white-50 small">{{ package.description|truncate(100) }}</p>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <span class="price-tag">RM {{ package.price }}</span>
                    <a href="/package/{{ package.id }}" class="btn btn-sm btn-outline-warning">View Details</a>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12 text-center py-5">
            <h3>No packages found.</h3>
            <p>Try searching for something else!</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}