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

{% block content %}
<!-- City Header -->
<div class="row mb-4 align-items-center">
  <div class="col-md-8">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'cities:index' %}">Cities</a></li>
        <li class="breadcrumb-item active">{{ city.name }}</li>
      </ol>
    </nav>
    <h1 class="display-5 fw-bold">{{ city.name }}</h1>
    <p class="text-muted fs-5">{{ city.country }}</p>
    <p>{{ city.description }}</p>
  </div>
  <div class="col-md-4 text-end">
    {% if city.image_data %}
      <img src="{% url 'cities:city_image' city.id %}" class="img-fluid shadow" style="max-height:200px;object-fit:cover;width:100%" alt="{{ city.name }}" onerror="this.style.display='none'">
    {% endif %}
  </div>
</div>

<!-- Filters & Search -->
<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-5">
        <label class="form-label small text-muted">Search places</label>
        <input type="text" name="q" class="form-control" placeholder="Search..." value="{{ search_q }}">
      </div>
      <div class="col-md-3">
        <label class="form-label small text-muted">Category</label>
        <select name="category" class="form-select">
          <option value="">All categories</option>
          {% for cat in categories %}
            <option value="{{ cat.name }}" {% if cat.name == category_filter %}selected{% endif %}>{{ cat.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label small text-muted">Sort by</label>
        <select name="sort" class="form-select">
          <option value="pagerank" {% if sort_by == 'pagerank' %}selected{% endif %}>PageRank</option>
          <option value="name" {% if sort_by == 'name' %}selected{% endif %}>Name</option>
        </select>
      </div>
      <div class="col-md-2">
        <button type="submit" class="btn btn-primary w-100"><i class="bi bi-funnel"></i> Filter</button>
      </div>
    </form>
  </div>
</div>

<!-- Places Grid -->
<div class="row mb-2">
  <div class="col">
    <h4>Places of Interest <span class="badge bg-secondary">{{ places.count }}</span></h4>
  </div>
</div>

<div class="row g-3">
  {% for place in places %}
  <div class="col-12 col-sm-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.style.display='none';this.nextElementSibling.style.display='flex'">
            <div class="poi-thumb bg-light align-items-center justify-content-center text-muted" style="display:none">
              <i class="bi bi-image" style="font-size:2rem"></i>
            </div>
          {% 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 class="poi-score-badge">
            <span class="badge bg-warning text-dark">
              <i class="bi bi-graph-up"></i> {{ place.pagerank_score|floatformat:4 }}
            </span>
          </div>
        </div>
        {% if place.image_data and place.color_palette %}
        <div class="d-flex" style="height:7px;" title="Dominant colors">
          {% for color in place.color_palette %}
            <div style="background:{{ color }};flex:1;"></div>
          {% endfor %}
        </div>
        {% endif %}
        <div class="card-body pb-1">
          <h6 class="card-title fw-bold mb-1">{{ place.name }}</h6>
          <p class="card-text text-muted small mb-1">{{ place.description|truncatewords:15 }}</p>
        </div>
        <div class="card-footer bg-transparent border-0 pt-0">
          <div class="d-flex flex-wrap gap-1">
            {% for cat in place.categories.all|slice:":3" %}
              <span class="badge bg-light text-dark border small">{{ cat.name }}</span>
            {% endfor %}
          </div>
        </div>
      </div>
    </a>
  </div>
  {% empty %}
  <div class="col-12">
    <div class="alert alert-info">No places found matching your filters.</div>
  </div>
  {% endfor %}
</div>
{% endblock %}