{% extends "base.html" %}

{% block title %}Hotels Search{% endblock %}

{% block content %}
<div class="container">
    <h1 class="page-title">Find Hotels</h1>

    <div class="search-container">
        <form action="{{ url_for('hotels') }}" method="POST" class="search-form">
            <div class="search-bar">
                <div class="search-field location-field">
                    <i class="fas fa-map-marker-alt"></i>
                    <input type="text" name="city_code" placeholder="City Code (e.g., LAX)" value="{{ city_code or '' }}" required />
                </div>
                <div class="search-actions">
                    <button type="submit" class="search-btn">
                        <i class="fas fa-search"></i> Search Hotels
                    </button>
                </div>
            </div>
        </form>
    </div>

    {% if city_code %}
        <h2 class="page-title">Hotels in {{ city_code }}</h2>
    {% endif %}

    {% if hotels %}
        <div class="events-grid">
            {% for hotel in hotels %}
                <div class="event-card">
                    <a href="{{ hotel.booking_url }}" target="_blank">
                        <img src="{{ hotel.image_url }}" alt="{{ hotel.name }}" class="event-image"
                            onerror="this.src='{{ url_for('static', filename='hotel-placeholder.jpg') }}'" />
                    </a>
                    <div class="event-content">
                        <div class="event-header">
                            <h3>{{ hotel.name }}</h3>
                            <p class="city">{{ hotel.address }}</p>
                            {% if hotel.rating %}
                                <p class="price">Rating: {{ hotel.rating }}</p>
                            {% endif %}
                        </div>
                        <div class="event-divider"></div>
                        <div class="event-details">
                            <a href="{{ hotel.booking_url }}" target="_blank" class="book-btn">Book Now</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% elif city_code %}
        <div class="no-events">
            <p>No hotels found. Please try another city code.</p>
        </div>
    {% endif %}
</div>
{% endblock %}