more

plugins/plant/templates/plant/detail.html

@@ -1,9 +1,37 @@
 {% extends 'core_ui/base.html' %}
+{% block title %}{{ plant.common_name.name }} – Nature In Pots{% endblock %}
+
 {% block content %}
-<h1>{{ plant.name }}</h1>
-<p>Type: {{ plant.type }}</p>
-<p>{{ plant.notes }}</p>
-<p>Status: {% if plant.is_active %}Active{% else %}Inactive{% endif %}</p>
-<a href="{{ url_for('plant.edit', plant_id=plant.id) }}">Edit</a>
-<a href="{{ url_for('plant.index') }}">Back to list</a>
+<div class="container my-4">
+  <div class="row">
+    <div class="col-md-4">
+      <img src="https://placehold.co/300x300"
+           class="img-fluid rounded mb-3"
+           alt="{{ plant.common_name.name }}">
+    </div>
+    <div class="col-md-8">
+      <h1>{{ plant.common_name.name }}</h1>
+      {% if plant.scientific_name %}
+        <p class="text-muted"><em>{{ plant.scientific_name.name }}</em></p>
+      {% endif %}
+      <dl class="row">
+        <dt class="col-sm-3">Date Added</dt>
+        <dd class="col-sm-9">{{ plant.date_added.strftime('%Y-%m-%d') }}</dd>
+
+        <dt class="col-sm-3">Status</dt>
+        <dd class="col-sm-9">
+          {{ 'Dead' if plant.is_dead else 'Active' }}
+        </dd>
+      </dl>
+
+      <a href="{{ url_for('plant.index') }}" class="btn btn-secondary">
+        ← Back to list
+      </a>
+      <a href="{{ url_for('plant.edit', plant_id=plant.id) }}"
+         class="btn btn-primary">
+        Edit
+      </a>
+    </div>
+  </div>
+</div>
 {% endblock %}

plugins/plant/templates/plant/index.html

@@ -1,10 +1,46 @@
 {% extends 'core_ui/base.html' %}
+{% block title %}Plant List – Nature In Pots{% endblock %}
+
 {% block content %}
-<h1>Plant List</h1>
-<ul>
-  {% for plant in plants %}
-    <li><a href="{{ url_for('plant.detail', plant_id=plant.id) }}">{{ plant.name }}</a></li>
-  {% endfor %}
-</ul>
-<a href="{{ url_for('plant.create') }}">Add New Plant</a>
+<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 %}