Add plant html for single plant

app.py

@@ -3,11 +3,26 @@
 
 app = Flask(__name__)
 
+
 @app.route('/')
 def index():
     return render_template('plants.html', plants=data)
-    return data
-    return "Hello World"
+
+@app.route('/<int:id>')
+def get_plant(id):
+    # find individual data with matched id
+    print('id', id)
+    max_len = len(data)
+    if id> max_len:
+        return 'Plant not found', 404
+    else:
+        plant = data[id]
+        if plant:
+            return render_template('plant.html', plant=plant)
+        else:
+            return 'Plant not found', 404
+
+
 
 if __name__ == '__main__':
     app.run(debug=True)

templates/plant.html

@@ -0,0 +1,58 @@
+{% extends "base.html" %} {% block content %}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <div class="card mb-3">
+        <div class="row g-0">
+          <div class="col-md-3 d-flex align-items-center" style="padding: 1rem">
+            <img
+              src="{{ plant.img_url }}"
+              class="img-fluid rounded-start"
+              alt="{{ plant.family_kor_nm }}"
+            />
+          </div>
+          <div class="col-md-9">
+            <div class="card-body">
+              <h5 class="card-title">과: {{ plant.family_kor_nm }}</h5>
+              <h5 class="card-title">속: {{ plant.genus_kor_nm }}</h5>
+              <p class="card-title">이름: {{ plant.plant_nm }}</p>
+              <p class="card-text">{{ plant.desc }}</p>
+              <button
+                class="btn btn-primary"
+                onclick="window.location.href='/edit/{{ plant.id }}'"
+              >
+                Edit
+              </button>
+              <button
+                class="btn btn-danger"
+                onclick="confirmDelete('{{ plant.id }}', '{{ plant.plant_nm }}')"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function confirmDelete(id, name) {
+    if (confirm("Do you really want to delete " + name + "?")) {
+      fetch("/delete/" + id, { method: "POST" })
+        .then((response) => {
+          if (response.ok) {
+            window.location.href = "/"; // Redirect to the main page
+          } else {
+            alert("Failed to delete the plant.");
+          }
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+          alert("Error deleting the plant.");
+        });
+    }
+  }
+</script>
+{% endblock %}