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

{% block content %}
<div class="row mb-4">
  <div class="col">
    <h1 class="display-5 fw-bold">Explore Cities</h1>
    <p class="text-muted">Discover top places of interest powered by AI recommendations</p>
  </div>
</div>

<div class="row g-4">
  {% for city in cities %}
  <div class="col-12 col-md-6 col-lg-3">
    <a href="{% url 'cities:city_detail' city.id %}" class="text-decoration-none">
      <div class="card h-100 shadow-sm city-card">
        <div class="city-img-wrapper">
          {% if city.image_data %}
            <img src="{% url 'cities:city_image' city.id %}" class="card-img-top city-thumb" alt="{{ city.name }}" onerror="this.onerror=null;this.src='/static/img/placeholder.jpg'">
          {% else %}
            <div class="city-thumb bg-secondary d-flex align-items-center justify-content-center text-white">
              <i class="bi bi-buildings" style="font-size:3rem"></i>
            </div>
          {% endif %}
        </div>
        <div class="card-body">
          <h5 class="card-title fw-bold">{{ city.name }}</h5>
          <p class="card-text text-muted small">{{ city.country }}</p>
          <p class="card-text small text-secondary">{{ city.description|truncatewords:20 }}</p>
        </div>
        <div class="card-footer bg-transparent border-0 d-flex justify-content-between align-items-center">
          <span class="badge bg-warning text-dark">
            <i class="bi bi-geo-alt"></i> {{ city.places.count }} places
          </span>
          <span class="text-primary small fw-bold">Explore <i class="bi bi-arrow-right"></i></span>
        </div>
      </div>
    </a>
  </div>
  {% empty %}
  <div class="col-12">
    <div class="alert alert-info">
      No cities found. Run the data collector to populate the database.
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}