{# plants/templates/plants/locations.html #}
{% extends "plants/base.html" %}
{% block title %}My Garden — BloomBase{% endblock %}
{% block content %}
{% load static %}

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

  <!-- Header row -->
  <div class="flex justify-between items-center mb-4">
    <h1 class="font-nunito font-black text-[22px] text-[#1A1208]">My Garden</h1>
    <a href="#" class="font-nunito font-bold text-sm text-[#F07040]">Edit</a>
  </div>

  <!-- Search bar -->
  <div class="flex items-center gap-2 bg-[#F5F0EA] rounded-full px-4 py-2.5 mb-4">
    <svg width="16" height="16" fill="none" stroke="#B0A090" stroke-width="2" viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
    </svg>
    <span class="font-nunito text-sm font-semibold text-[#C0B0A0]">Search plants or areas</span>
  </div>

  <!-- Area rows -->
  <div class="flex flex-col gap-3 mb-6">
    {% for loc in locations %}
    {% with idx=forloop.counter0 %}
    <a href="{% url 'location_detail' loc.pk %}"
       class="flex items-center bg-white rounded-2xl overflow-hidden shadow-sm no-underline">
      <!-- Thumbnail -->
      <div class="w-[72px] h-[60px] flex-shrink-0 overflow-hidden">
        {% if loc.cover_photo %}
        <img src="{{ loc.cover_photo.url }}" alt="{{ loc.name }}"
             class="w-full h-full object-cover">
        {% else %}
        <div class="w-full h-full
          {% if idx|divisibleby:5 %}at-placeholder-5
          {% elif idx|divisibleby:4 %}at-placeholder-4
          {% elif idx|divisibleby:3 %}at-placeholder-3
          {% elif idx|divisibleby:2 %}at-placeholder-2
          {% else %}at-placeholder-1{% endif %}"></div>
        {% endif %}
      </div>
      <!-- Info -->
      <div class="flex-1 px-3">
        <div class="font-nunito font-extrabold text-[13px] text-[#1A1208]">{{ loc.name }}</div>
        <div class="font-nunito text-[10px] font-semibold text-[#B0A090] mt-0.5">
          {{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}
        </div>
      </div>
      <!-- Chevron -->
      <span class="text-[#D0C0B0] font-bold text-lg pr-3">›</span>
    </a>
    {% endwith %}
    {% empty %}
    <p class="font-nunito text-sm text-[#B0A090] text-center py-8">
      No areas yet — add one below!
    </p>
    {% endfor %}
  </div>

  <!-- Add area form -->
  <form method="post" class="flex gap-2">
    {% csrf_token %}
    <input type="text" name="name" placeholder="New area name…" required
           class="flex-1 bg-white border border-[#F0E4D4] rounded-full px-4 py-2.5
                  font-nunito text-sm text-[#1A1208] placeholder-[#C0B0A0]
                  outline-none focus:border-[#F07040]">
    <button type="submit" class="bb-fab text-xl font-light flex-shrink-0">+</button>
  </form>

</div>
{% endblock %}