bloombase/plants/templates/plants/plant_detail.html

{# plants/templates/plants/plant_detail.html #}
{% extends "plants/base.html" %}
{% load plant_extras %}
{% block title %}{{ plant.name }} — BloomBase{% endblock %}
{% block content %}

<!-- Hero image -->
<div class="relative h-[220px] overflow-hidden" id="plant-hero-container">
  {% 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-6xl">🌿</div>
  {% endif %}
  <div class="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white to-transparent"></div>
  <!-- Back -->
  <a href="{% url 'plant_list' %}" class="btn-pill absolute top-3 left-3 no-underline">← Back</a>
  <!-- Edit -->
  <a href="{% url 'plant_edit' plant.pk %}" class="btn-pill absolute top-3 right-3 no-underline">Edit</a>
  <!-- Favorite (UI only) -->
  <button class="btn-pill absolute top-3 right-16">🤍</button>
</div>

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

  <!-- Plant name + latin -->
  <h1 class="font-nunito font-black text-[22px] text-[#1A1208] mb-0.5">{{ plant.name }}</h1>
  {% if plant.species %}
  <div class="flex items-center gap-1.5 mb-3">
    <span class="font-nunito font-bold text-[13px] text-[#F07040] italic">{{ plant.species.scientific_name }}</span>
    <a href="https://www.google.com/search?q={{ plant.species.scientific_name|default:plant.name|urlencode }}"
       target="_blank" rel="noopener">
      <img src="https://www.google.com/favicon.ico" width="13" height="13" style="opacity:0.65;vertical-align:middle;">
    </a>
  </div>
  {% endif %}

  {% if plant.location %}
  <p class="font-nunito text-[11px] font-semibold text-[#B0A090] mb-3">
    📍 {{ plant.location.name }}
  </p>
  {% endif %}

  <!-- Care row -->
  {% if plant.watering or plant.sunlight or plant.species %}
  <div class="flex justify-around py-3 border-t border-b border-[#F5EDE4] mb-4">
    {% if plant.watering %}
    <div class="flex flex-col items-center gap-1">
      <span class="text-xl">💧</span>
      <span class="font-nunito font-bold text-[9px] text-[#B0A090] text-center">{{ plant.get_watering_display }}</span>
    </div>
    {% elif plant.species and plant.species.watering %}
    <div class="flex flex-col items-center gap-1">
      <span class="text-xl">💧</span>
      <span class="font-nunito font-bold text-[9px] text-[#B0A090] text-center">{{ plant.species.watering }}</span>
    </div>
    {% endif %}
    {% if plant.sunlight %}
    <div class="flex flex-col items-center gap-1">
      <span class="text-xl">☀️</span>
      <span class="font-nunito font-bold text-[9px] text-[#B0A090] text-center">{{ plant.get_sunlight_display }}</span>
    </div>
    {% elif plant.species and plant.species.sunlight %}
    <div class="flex flex-col items-center gap-1">
      <span class="text-xl">☀️</span>
      <span class="font-nunito font-bold text-[9px] text-[#B0A090] text-center">{{ plant.species.sunlight }}</span>
    </div>
    {% endif %}
    {% if plant.species and plant.species.frost_hardiness_c is not None %}
    <div class="flex flex-col items-center gap-1">
      <span class="text-xl">🌡️</span>
      <span class="font-nunito font-bold text-[9px] text-[#B0A090] text-center">{{ plant.species.frost_hardiness_c }}°C min</span>
    </div>
    {% endif %}
    {% if plant.species and plant.species.max_height_cm %}
    <div class="flex flex-col items-center gap-1">
      <span class="text-xl">📏</span>
      <span class="font-nunito font-bold text-[9px] text-[#B0A090] text-center">{{ plant.species.max_height_cm }} cm</span>
    </div>
    {% endif %}
  </div>
  {% endif %}

  <!-- Bloom strip -->
  {% if plant.bloom_months %}
  <div class="mb-4 p-3 rounded-2xl bg-[#D8F3DC]">
    <p class="font-nunito font-bold text-[11px] text-[#1b4332] mb-1">🌸 Bloom months</p>
    {% month_strip plant.bloom_months %}
  </div>
  {% endif %}

  <!-- Notes -->
  {% if plant.notes %}
  <div class="bg-white rounded-2xl px-4 py-3 border border-[#F0E4D4] mb-4">
    <p class="font-nunito text-[13px] text-[#6B7280]">{{ plant.notes|linebreaksbr }}</p>
  </div>
  {% endif %}

  <!-- Pruning -->
  {% if plant.pruning_months %}
  {% include "plants/partials/pruning_strip.html" %}
  {% endif %}

  <!-- Card photos (crop thumbnails) -->
  {% if plant.card_photos.all %}
  <div class="mb-4">
    <p class="font-nunito font-bold text-[11px] text-[#B0A090] mb-2">🪧 Plant card photos</p>
    <a href="{% url 'crop_thumbnail' plant.pk %}" class="btn-bloom-outline no-underline">
      Edit card photo
    </a>
  </div>
  {% endif %}

  <!-- Photo gallery -->
  <div id="photo-gallery" class="mb-4">
    {% include "plants/partials/photo_gallery.html" %}
  </div>

  <!-- Action buttons -->
  <div class="flex flex-col gap-2 mt-2">
    <a href="{% url 'plant_edit' plant.pk %}" class="btn-bloom no-underline">Edit this plant</a>
    <a href="{% url 'plant_card' plant.pk %}" class="btn-bloom-outline no-underline">🪧 Plant card</a>
    <a href="{% url 'plant_delete' plant.pk %}"
       class="font-nunito font-bold text-[13px] text-center text-[#DC2626] py-2 no-underline">
      Delete plant
    </a>
  </div>

</div>
{% endblock %}