{# plants/templates/plants/dashboard.html #}
{% extends "plants/base.html" %}
{% load plant_extras %}
{% block title %}BloomBase{% endblock %}
{% block content %}

<!-- Top bar: hamburger + bell -->
<div class="flex justify-between items-center px-4 pt-6 pb-2">
  <button class="p-1" aria-label="Menu">
    <svg width="22" height="22" fill="none" stroke="#1A1208" stroke-width="2" viewBox="0 0 24 24">
      <path d="M3 12h18M3 6h18M3 18h18"/>
    </svg>
  </button>
  <button class="p-1" aria-label="Notifications">
    <svg width="22" height="22" fill="none" stroke="#1A1208" stroke-width="2" viewBox="0 0 24 24">
      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
      <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
    </svg>
  </button>
</div>

<div class="px-4">

  <!-- Greeting + headline -->
  <p class="font-nunito font-semibold text-[11px] text-[#B0A090] mb-0.5">Hello, Plant Lover! 🌿</p>
  <h1 class="font-nunito font-black text-[24px] text-[#1A1208] leading-tight mb-1">
    What are we <span class="text-[#F07040]">growing</span> today?
  </h1>
  <p class="font-nunito font-semibold text-[11px] text-[#B0A090] mb-4">
    Identify a plant and add it to Bloombase.
  </p>

  <!-- Camera viewfinder — tap → identify_upload -->
  <a href="{% url 'identify_upload' %}" class="block relative bg-[#2C3820] rounded-2xl h-[120px] overflow-hidden mb-4 no-underline">
    <!-- Simulated plant in viewfinder -->
    <div class="absolute inset-0"
         style="background: radial-gradient(ellipse 60% 55% at 60% 45%, #C84060 0%, #E05878 30%, #F880A0 55%, transparent 75%),
                radial-gradient(ellipse 40% 35% at 40% 55%, #C04050 0%, #D86070 40%, transparent 70%),
                linear-gradient(160deg, #1E3018 0%, #2E5028 30%, #3A6832 50%, #2C5020 70%);"></div>
    <!-- Corner brackets -->
    <div class="vf-corner vf-tl"></div>
    <div class="vf-corner vf-tr"></div>
    <div class="vf-corner vf-bl"></div>
    <div class="vf-corner vf-br"></div>
    <!-- Shutter + gallery -->
    <div class="absolute bottom-3 left-0 right-0 flex justify-center items-center gap-6">
      <div class="w-8 h-8 bg-white/20 rounded-xl flex items-center justify-center border border-white/40">
        <svg width="14" height="14" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24">
          <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="4"/>
        </svg>
      </div>
      <div class="w-10 h-10 rounded-full bb-fab"></div>
    </div>
  </a>

  <!-- My Garden pill -->
  <a href="{% url 'location_list' %}"
     class="flex items-center gap-3 bg-white/80 rounded-2xl px-4 py-3 border border-[#F0E4D4] mb-5 no-underline">
    <span class="text-2xl">🪴</span>
    <div class="flex-1">
      <div class="font-nunito font-extrabold text-[13px] text-[#1A1208]">My Garden</div>
      <div class="font-nunito text-[10px] font-semibold text-[#B0A090]">
        {{ total_plants }} Plant{{ total_plants|pluralize }} · {{ location_count }} Area{{ location_count|pluralize }}
      </div>
    </div>
    <span class="text-[#D0C0B0] font-bold text-lg">›</span>
  </a>

  <!-- Recently added -->
  {% if latest_plants %}
  <h2 class="font-nunito font-black text-[16px] text-[#1A1208] mb-3">🌿 Recently added</h2>
  <div class="flex flex-col gap-2 mb-4">
    {% for plant in latest_plants %}
    <a href="{% url 'plant_detail' plant.pk %}"
       class="flex items-center gap-3 bg-white rounded-2xl px-3 py-2.5 shadow-sm no-underline">
      {% if plant.species and plant.species.api_image_url %}
      <img src="{{ plant.species.api_image_url }}" width="44" height="44"
           class="rounded-xl flex-shrink-0" style="object-fit:cover;">
      {% elif plant.thumbnail_url %}
      <img src="{{ plant.thumbnail_url }}" width="44" height="44"
           class="rounded-xl flex-shrink-0" style="object-fit:cover;">
      {% else %}
      <div class="w-11 h-11 bg-[#D8F3DC] rounded-xl flex-shrink-0 flex items-center justify-center text-xl">🌿</div>
      {% endif %}
      <div>
        <div class="font-nunito font-extrabold text-[13px] text-[#1A1208]">{{ plant.name }}</div>
        <div class="font-nunito text-[10px] font-semibold text-[#B0A090]">{{ plant.location }}</div>
      </div>
    </a>
    {% endfor %}
  </div>
  {% endif %}

</div>
{% endblock %}