{% extends 'core_ui/base.html' %}
{% block title %}Plant List – Nature In Pots{% endblock %}

{% block content %}
<div class="container my-4">
  <h1 class="mb-4">Plant List</h1>

  {% if plants %}
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
      {% for plant in plants %}
        <div class="col">
          <div class="card h-100">
            <!-- placeholder until you wire up real media -->
            <img src="https://placehold.co/150x150"
                 class="card-img-top"
                 alt="{{ plant.common_name.name if plant.common_name else 'Plant' }}">
            <div class="card-body d-flex flex-column">
              <h5 class="card-title">
                {{ plant.common_name.name if plant.common_name else 'Unnamed' }}
              </h5>
              {% if plant.scientific_name %}
                <p class="card-text text-muted">
                  <em>{{ plant.scientific_name.name }}</em>
                </p>
              {% endif %}
              <a href="{{ url_for('plant.detail', plant_id=plant.id) }}"
                 class="mt-auto btn btn-primary">
                View Details
              </a>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p>No plants found yet. <a href="{{ url_for('plant.create') }}">Add one now.</a></p>
  {% endif %}

  <div class="mt-4">
    <a href="{{ url_for('plant.create') }}"
       class="btn btn-success">
      Add New Plant
    </a>
  </div>
</div>
{% endblock %}
