{# plants/templates/plants/location_detail.html #}
{% extends "plants/base.html" %}
{% block title %}{{ location.name }} — BloomBase{% endblock %}
{% block content %}

<!-- Cover photo hero -->
<div class="relative h-[180px] overflow-hidden">
  {% if location.cover_photo %}
  <img src="{{ location.cover_photo.url }}" alt="{{ location.name }}"
       class="w-full h-full object-cover">
  {% else %}
  <div class="w-full h-full at-placeholder-1"></div>
  {% endif %}
  <!-- Gradient fade at bottom -->
  <div class="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-white to-transparent"></div>
  <!-- Back button -->
  <a href="{% url 'location_list' %}" class="btn-pill absolute top-3 left-3 no-underline">← Back</a>
  <!-- Edit button -->
  <a href="{% url 'location_edit' location.pk %}" class="btn-pill absolute top-3 right-3 no-underline">Edit</a>
</div>

<div class="px-4 pt-3 pb-4">

  <!-- Area name + count -->
  <h1 class="font-nunito font-black text-[22px] text-[#1A1208] mb-0.5">{{ location.name }}</h1>
  <p class="font-nunito text-sm font-semibold text-[#B0A090] mb-5">
    {{ plants.count }} plant{{ plants.count|pluralize }}
  </p>

  <!-- Plant grid -->
  {% if plants %}
  <div class="grid grid-cols-2 gap-3">
    {% for plant in plants %}
    <a href="{% url 'plant_detail' plant.pk %}" class="bg-white rounded-2xl overflow-hidden shadow-sm no-underline block">
      <!-- Plant image -->
      <div class="h-[100px] overflow-hidden">
        {% if plant.species and plant.species.api_image_url %}
        <img src="{{ plant.species.api_image_url }}" alt="{{ plant.name }}"
             class="w-full h-full object-cover">
        {% elif plant.thumbnail_url %}
        <img src="{{ plant.thumbnail_url }}" alt="{{ plant.name }}"
             class="w-full h-full object-cover">
        {% else %}
        <div class="w-full h-full bg-[#D8F3DC] flex items-center justify-center text-3xl">🌿</div>
        {% endif %}
      </div>
      <!-- Plant info -->
      <div class="p-3">
        <div class="font-nunito font-extrabold text-[12px] text-[#1A1208] leading-tight">{{ plant.name }}</div>
        {% if plant.species %}
        <div class="font-nunito text-[9px] font-semibold text-[#B0A090] mt-0.5 italic">{{ plant.species.scientific_name }}</div>
        {% endif %}
      </div>
    </a>
    {% endfor %}
  </div>
  {% else %}
  <!-- Empty state -->
  <div class="text-center py-12">
    <div class="text-5xl mb-3">🪴</div>
    <p class="font-nunito font-bold text-[#B0A090] mb-4">No plants here yet.</p>
    <a href="{% url 'identify_upload' %}" class="btn-bloom inline-block w-auto px-8">Identify a plant</a>
  </div>
  {% endif %}

</div>
{% endblock %}