From b320b1a47184e7d522b541a1b4f29e4d450f93b5 Mon Sep 17 00:00:00 2001
From: Stephan Kerkman <stephan@kerkman.io>
Date: Mon, 1 Jun 2026 16:47:12 +0200
Subject: [PATCH] feat: restyle location_edit.html with cover photo upload
 field

---
 plants/templates/plants/location_edit.html | 64 +++++++++++++++++-----
 1 file changed, 51 insertions(+), 13 deletions(-)

diff --git a/plants/templates/plants/location_edit.html b/plants/templates/plants/location_edit.html
index 2409ab0..624866a 100644
--- a/plants/templates/plants/location_edit.html
+++ b/plants/templates/plants/location_edit.html
@@ -1,21 +1,59 @@
+{# plants/templates/plants/location_edit.html #}
 {% extends "plants/base.html" %}
 {% block title %}Edit Area — BloomBase{% endblock %}
 {% block content %}
 
-<div class="d-flex align-items-center gap-2 mb-3">
-    <a href="{% url 'location_list' %}" class="btn btn-sm btn-outline-secondary">←</a>
-    <h5 class="mb-0 flex-grow-1">Edit area</h5>
-</div>
+<div class="px-4 pt-6 pb-4">
 
-<form method="post">
+  <div class="flex items-center gap-3 mb-6">
+    <a href="{% url 'location_list' %}" class="btn-pill no-underline text-sm">←</a>
+    <h1 class="font-nunito font-black text-[20px] text-[#1A1208]">Edit area</h1>
+  </div>
+
+  <form method="post" enctype="multipart/form-data" class="flex flex-col gap-4">
     {% csrf_token %}
-    <div class="mb-3">
-        <input type="text" name="name" value="{{ location.name }}" class="form-control" required autofocus>
-    </div>
-    <div class="d-flex gap-2">
-        <button type="submit" class="btn btn-success">Save</button>
-        <a href="{% url 'location_list' %}" class="btn btn-outline-secondary">Cancel</a>
-    </div>
-</form>
 
+    <!-- Area name -->
+    <div>
+      <label class="block font-nunito font-bold text-[11px] text-[#B0A090] uppercase tracking-wider mb-1.5">
+        Area name
+      </label>
+      <input type="text" name="name" value="{{ location.name }}" required autofocus
+             class="w-full bg-white border border-[#F0E4D4] rounded-2xl px-4 py-3
+                    font-nunito text-[15px] text-[#1A1208] outline-none focus:border-[#F07040]">
+    </div>
+
+    <!-- Cover photo -->
+    <div>
+      <label class="block font-nunito font-bold text-[11px] text-[#B0A090] uppercase tracking-wider mb-1.5">
+        Cover photo
+      </label>
+      {% if location.cover_photo %}
+      <div class="mb-2 rounded-2xl overflow-hidden h-[100px]">
+        <img src="{{ location.cover_photo.url }}" alt="Current cover"
+             class="w-full h-full object-cover">
+      </div>
+      {% endif %}
+      <label class="flex items-center gap-3 bg-white border border-[#F0E4D4] rounded-2xl px-4 py-3 cursor-pointer">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F07040" stroke-width="2">
+          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+          <circle cx="12" cy="13" r="4"/>
+        </svg>
+        <span class="font-nunito font-semibold text-sm text-[#B0A090]">
+          {% if location.cover_photo %}Replace photo{% else %}Add cover photo{% endif %}
+        </span>
+        <input type="file" name="cover_photo" accept="image/*" class="hidden" id="cover-input"
+               onchange="document.getElementById('cover-label').textContent = this.files[0]?.name || ''">
+      </label>
+      <span id="cover-label" class="block mt-1 font-nunito text-[10px] text-[#B0A090] px-1"></span>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex flex-col gap-2 mt-2">
+      <button type="submit" class="btn-bloom">Save</button>
+      <a href="{% url 'location_list' %}" class="btn-bloom-outline text-center no-underline">Cancel</a>
+    </div>
+  </form>
+
+</div>
 {% endblock %}