{% extends 'core_ui/base.html' %}

{% block title %}
  {{ plant.common_name.name if plant.common_name else "Unnamed Plant" }} – Nature In Pots
{% endblock %}

{% block content %}
<div class="container my-4">
  <div class="row gx-4">
    <div class="col-md-4">
      {% set featured = plant.featured_media or plant.media|first %}
      <img
        src="{{ generate_image_url(featured) }}"
        alt="Image of {{ plant.common_name.name if plant.common_name else 'Plant' }}"
        class="img-fluid rounded shadow-sm"
        style="object-fit: cover; width: 100%; height: auto;"
      >
    </div>

    <div class="col-md-8">
      <h2>
        {{ plant.common_name.name if plant.common_name else "Unnamed Plant" }}
      </h2>
      {% if plant.scientific_name %}
        <h5 class="text-muted">
          {{ plant.scientific_name.name }}
        </h5>
      {% endif %}

      <p class="mt-3">
        {{ plant.notes or "No description provided." }}
      </p>

      {% if plant.mother_uuid %}
        <p class="text-muted">
          Parent:
          <a href="{{ url_for('plant.detail', uuid_val=plant.mother_uuid) }}">
            {{ plant.mother_uuid }}
          </a>
        </p>
      {% endif %}

      <div class="mt-4">
        <a
          href="{{ url_for('plant.edit', uuid_val=plant.uuid) }}"
          class="btn btn-primary me-2"
        >Edit</a>
        <a
          href="{{ url_for('plant.index') }}"
          class="btn btn-secondary"
        >Back to List</a>
      </div>
    </div>
  </div>

  {% if plant.media|length > (1 if plant.featured_media else 0) %}
    <hr class="my-4">
    <h4>Additional Images</h4>
    <div class="d-flex flex-wrap gap-3">
      {% for img in plant.media if img != featured %}
        <img
          src="{{ generate_image_url(img) }}"
          alt="Plant image"
          class="img-thumbnail"
          style="height: 160px; object-fit: cover;"
        >
      {% endfor %}
    </div>
  {% endif %}
</div>
{% endblock %}
