{% extends 'base.html' %}
{% block title %}Search - TouristAI{% endblock %}

{% block content %}
<h2 class="fw-bold mb-4"><i class="bi bi-search"></i> Search Places</h2>

<div class="card mb-4 shadow-sm">
  <div class="card-body">
    <form method="get" class="row g-2 align-items-end">
      <div class="col-md-6">
        <input type="text" name="q" class="form-control" placeholder="Search places..." value="{{ query }}">
      </div>
      <div class="col-md-4">
        <select name="city" class="form-select">
          <option value="">All cities</option>
          {% for city in cities %}
            <option value="{{ city.id }}" {% if city.id|stringformat:"s" == selected_city %}selected{% endif %}>{{ city.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2">
        <button type="submit" class="btn btn-primary w-100">Search</button>
      </div>
    </form>
  </div>
</div>

{% if query %}
  <p class="text-muted mb-3">{{ results|length }} result{{ results|length|pluralize }} for "<strong>{{ query }}</strong>"</p>
  <div class="row g-3">
    {% for place in results %}
    <div class="col-12 col-md-6 col-lg-4">
      <a href="{% url 'cities:poi_detail' place.id %}" class="text-decoration-none">
        <div class="card h-100 shadow-sm poi-card">
          <div class="poi-img-wrapper">
            {% if place.image_data %}
              <img src="{% url 'cities:place_image' place.id %}" class="card-img-top poi-thumb" alt="{{ place.name }}" onerror="this.onerror=null;this.src='/static/img/placeholder.jpg'">
            {% else %}
              <div class="poi-thumb bg-light d-flex align-items-center justify-content-center text-muted">
                <i class="bi bi-image" style="font-size:2rem"></i>
              </div>
            {% endif %}
          </div>
          <div class="card-body">
            <h6 class="fw-bold mb-1">{{ place.name }}</h6>
            <p class="text-muted small mb-1"><i class="bi bi-geo-alt"></i> {{ place.city.name }}, {{ place.city.country }}</p>
            <p class="small text-secondary">{{ place.description|truncatewords:15 }}</p>
          </div>
        </div>
      </a>
    </div>
    {% empty %}
    <div class="col-12">
      <div class="alert alert-warning">No places found for "{{ query }}".</div>
    </div>
    {% endfor %}
  </div>
{% endif %}
{% endblock %}