{# plants/templates/plants/location_edit.html #}
{% extends "plants/base.html" %}
{% block title %}Edit Area — BloomBase{% endblock %}
{% block content %}

<div class="px-4 pt-6 pb-4">

  <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 %}

    <!-- 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 %}