{% extends "base.html" %}
{% block title %}Attraction Finder - Travel App{% endblock %}
{% set page = 'map_page' %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% endblock %}

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

    <div class="search-container">
        <form method="POST" class="search-form">
            <div class="search-bar">
                <!-- City Input -->
                <div class="search-field location-field">
                    <i class="fas fa-map-marker-alt"></i>
                    <input type="text" name="city" placeholder="Enter a city..." value="{{ city }}">
                </div>

                <!-- Category Filter -->
                <div class="search-field location-field">
                    <select name="category" class="filter-select">
                        <option value="all" {% if category == 'all' %}selected{% endif %}>All</option>
                        <option value="tourist_attraction" {% if category == 'tourist_attraction' %}selected{% endif %}>Tourist Attractions</option>
                        <option value="park" {% if category == 'park' %}selected{% endif %}>Parks</option>
                        <option value="museum" {% if category == 'museum' %}selected{% endif %}>Museums</option>
                        <option value="zoo" {% if category == 'zoo' %}selected{% endif %}>Zoos</option>
                        <option value="art_gallery" {% if category == 'art_gallery' %}selected{% endif %}>Art Galleries</option>
                        <option value="amusement_park" {% if category == 'amusement_park' %}selected{% endif %}>Amusement Parks</option>
                    </select>
                </div>

                <!-- Rating Filter -->
                <div class="search-field">
                    <select name="rating" class="filter-select">
                        <option value="0" {% if rating == 0 %}selected{% endif %}>All Ratings</option>
                        <option value="3" {% if rating == 3 %}selected{% endif %}>Above 3.0</option>
                        <option value="4" {% if rating == 4 %}selected{% endif %}>Above 4.0</option>
                        <option value="4.5" {% if rating == 4.5 %}selected{% endif %}>Above 4.5</option>
                    </select>
                </div>

                <!-- Submit Button -->
                <div class="search-actions">
                    <button type="submit" class="search-btn">
                        <i class="fas fa-search"></i> Find Attractions
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Results Section -->
    {% if places %}
        <h2 class="page-title">Results for {{ city }}</h2>
        <div class="events-grid">
            {% for place in places %}
                <div class="event-card">
                    <img src="{% if place.photos %}https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference={{ place.photos[0].photo_reference }}&key={{ GOOGLEMAPS_API_KEY }}{% else %}https://www.foodserviceandhospitality.com/wp-content/uploads/2016/09/Restaurant-Placeholder-001.jpg{% endif %}" alt="{{ place.name }}" class="event-image" />

                    <div class="event-content">
                        <div class="event-header">
                            <h3>{{ place.name }}</h3>
                            <p class="city">{{ place.vicinity or place.formatted_address }}</p>
                            <p class="price">Rating: {{ place.rating or 'N/A' }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% elif city %}
        <div class="no-events">
            <p>No attractions found. Try another city or filter.</p>
        </div>
    {% endif %}
</div>
{% endblock %}