{% extends "plants/base.html" %}
{% block title %}Areas — BloomBase{% endblock %}
{% block content %}

<div class="d-flex align-items-center gap-2 mb-3">
    <a href="{% url 'plant_list' %}" class="btn btn-sm btn-outline-secondary">←</a>
    <h5 class="mb-0 flex-grow-1">Areas</h5>
</div>

<div class="list-group mb-3">
{% for loc in locations %}
<div class="list-group-item d-flex justify-content-between align-items-center py-2">
    <span>{{ loc.name }} <small class="text-muted">{{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}</small></span>
    <div class="d-flex gap-1">
        <a href="{% url 'location_edit' loc.pk %}" class="btn btn-sm btn-outline-secondary py-0 px-2">✏️</a>
        <form method="post" action="{% url 'location_delete' loc.pk %}"
              onsubmit="return {% if loc.plant_count %}confirm('{{ loc.name|escapejs }} has {{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}. Their area will be cleared. Delete anyway?'){% else %}true{% endif %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-sm btn-outline-danger py-0 px-2">✕</button>
        </form>
    </div>
</div>
{% empty %}
<div class="list-group-item text-muted">No areas yet.</div>
{% endfor %}
</div>

<form method="post">
    {% csrf_token %}
    <div class="d-flex gap-2">
        <input type="text" name="name" class="form-control form-control-sm" placeholder="New area name" required>
        <button type="submit" class="btn btn-sm btn-success text-nowrap">+ Add</button>
    </div>
</form>

{% endblock %}