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

{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'cities:index' %}">Cities</a></li>
    <li class="breadcrumb-item"><a href="{% url 'cities:city_detail' place.city.id %}">{{ place.city.name }}</a></li>
    <li class="breadcrumb-item active">{{ place.name }}</li>
  </ol>
</nav>

<div class="row g-4 mb-5">
  <!-- Main Image -->
  <div class="col-md-5">
    {% if place.image_data %}
      <img src="{% url 'cities:place_image' place.id %}" class="img-fluid shadow-lg w-100" style="max-height:380px;object-fit:cover" alt="{{ place.name }}" onerror="this.onerror=null;this.src='/static/img/placeholder.jpg'">
    {% else %}
      <div class="bg-light d-flex align-items-center justify-content-center text-muted" style="height:300px">
        <i class="bi bi-image" style="font-size:4rem"></i>
      </div>
    {% endif %}
    {% if place.color_palette %}
    <div class="d-flex overflow-hidden shadow-lg" style="height:14px;" title="Dominant colors extracted from image">
      {% for color in place.color_palette %}
        <div style="background:{{ color }};flex:1;" title="{{ color }}"></div>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <!-- Main Info -->
  <div class="col-md-7">
    <h1 class="fw-bold">{{ place.name }}</h1>
    <p class="text-muted fs-5 mb-2"><i class="bi bi-geo-alt"></i> {{ place.city.name }}, {{ place.city.country }}</p>

    {% if place.address %}
      <p class="text-secondary small"><i class="bi bi-signpost"></i> {{ place.address }}</p>
    {% endif %}

    <div class="d-flex align-items-center gap-3 mb-3">
      <div class="text-center px-3 py-2 bg-warning rounded">
        <div class="small text-dark fw-bold">PageRank</div>
        <div class="fs-5 fw-bold text-dark">{{ place.pagerank_score|floatformat:4 }}</div>
      </div>
    </div>

    <div class="mb-3">
      {% for cat in place.categories.all %}
        <span class="badge bg-primary me-1">{{ cat.name }}</span>
      {% endfor %}
    </div>

    <p class="lead">{{ place.description }}</p>

    {% if place.wikipedia_url %}
      <a href="{{ place.wikipedia_url }}" target="_blank" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-wikipedia"></i> Wikipedia
      </a>
    {% endif %}
  </div>
</div>

<!-- Similar Places: Structural (same city) -->
{% if similar_structural %}
<section class="mb-5">
  <h4 class="fw-bold border-bottom pb-2 mb-3">
    <i class="bi bi-diagram-3 text-primary"></i>
    Similar Places in {{ place.city.name }}
    <span class="text-muted small fw-normal">(based on categories &amp; structure)</span>
  </h4>
  <div class="row g-3">
    {% for sp in similar_structural %}
    <div class="col-6 col-md-4 col-lg-2">
      {% include 'cities/_place_card_small.html' with place=sp.similar_place score=sp.sim_score %}
    </div>
    {% endfor %}
  </div>
</section>
{% endif %}

<!-- Similar Places: Image same city -->
{% if similar_image_same %}
<section class="mb-5">
  <h4 class="fw-bold border-bottom pb-2 mb-3">
    <i class="bi bi-images text-success"></i>
    Visually Similar in {{ place.city.name }}
    <span class="text-muted small fw-normal">(based on images)</span>
  </h4>
  <div class="row g-3">
    {% for sp in similar_image_same %}
    <div class="col-6 col-md-4 col-lg-2">
      {% include 'cities/_place_card_small.html' with place=sp.similar_place score=sp.sim_score %}
    </div>
    {% endfor %}
  </div>
</section>
{% endif %}

<!-- Similar Places: Image other cities -->
{% if similar_image_other %}
<section class="mb-5">
  <h4 class="fw-bold border-bottom pb-2 mb-3">
    <i class="bi bi-globe text-danger"></i>
    Visually Similar in Other Cities
    <span class="text-muted small fw-normal">(based on images)</span>
  </h4>
  <div class="row g-3">
    {% for sp in similar_image_other %}
    <div class="col-6 col-md-4 col-lg-2">
      {% include 'cities/_place_card_small.html' with place=sp.similar_place score=sp.sim_score %}
    </div>
    {% endfor %}
  </div>
</section>
{% endif %}

<div class="mt-3">
  <a href="{% url 'cities:city_detail' place.city.id %}" class="btn btn-outline-secondary">
    <i class="bi bi-arrow-left"></i> Back to {{ place.city.name }}
  </a>
</div>
{% endblock %}