{% extends "base.html" %}
{% block title %}All Packages{% endblock %}

{% block content %}
<h2 class="mb-4 gradient-text animate-on-scroll">Vacation Packages</h2>

<div class="row">
    {% for package in packages %}
    <div class="col-md-4 animate-on-scroll">
        <div class="card">
            <img src="{{ package.image_url }}" class="card-img-top" alt="{{ package.description }}">
            <div class="card-body">
                <h5 class="card-title">{{ package.destination_name }} - {{ package.state_name }}</h5>
                <p class="card-text">{{ package.description[:100] }}...</p>
                <p class="fw-bold">RM {{ package.price }}</p>
                {% if session.logged_in %}
                <form action="{{ url_for('book_package', package_id=package.package_id) }}" method="POST">
                    <div class="mb-2">
                        <input type="date" name="travel_date" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Book Now</button>
                </form>
                {% else %}
                <a href="{{ url_for('login') }}" class="btn btn-primary w-100">Login to Book</a>
                {% endif %}
                <a href="{{ url_for('package_details', package_id=package.package_id) }}" class="btn btn-outline-primary mt-2 w-100">View Details</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}