{% extends "base.html" %}

{% block title %}Flights{% endblock %}

{% block content %}
<div class="search-container">
    <h1>Find Flights</h1>
    <form method="GET" action="https://www.expedia.com/Flights-Search" target="_blank" class="search-form">
        <div class="search-bar">
            <!-- Origin -->
            <div class="search-field location-field">
                <i class="fas fa-plane-departure"></i>
                <input type="text" name="trip-origin" placeholder="Origin (e.g. MIA)" required>
            </div>

            <!-- Destination -->
            <div class="search-field location-field">
                <i class="fas fa-plane-arrival"></i>
                <input type="text" name="trip-destination" placeholder="Destination (e.g. JFK)" required>
            </div>

            <!-- Departure Date -->
            <div class="search-field date-range-field">
                <i class="fas fa-calendar-alt"></i>
                <input type="date" name="departure-date" required>
            </div>

            <!-- Search Button -->
            <div class="search-actions">
                <button type="submit" class="search-btn">
                    <i class="fas fa-search"></i>
                    Search
                </button>
            </div>
        </div>
    </form>
</div>
{% endblock %}