{% extends "plants/base.html" %}
{% block title %}Dashboard — PlantDB{% endblock %}
{% block content %}
<h6 class="text-muted mb-3">{{ today|date:"F Y" }}</h6>

<div class="row g-2 mb-3">
    <div class="col-6">
        <a href="{% url 'plant_list' %}" class="text-decoration-none">
            <div class="card text-center h-100" style="background:#d8f3dc;">
                <div class="card-body py-3">
                    <div class="display-5 fw-bold" style="color:#1b4332;">{{ total_plants }}</div>
                    <div class="small" style="color:#2d6a4f;">Plants</div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-6">
        <a href="{% url 'pruning_calendar' %}" class="text-decoration-none">
            <div class="card text-center h-100" style="background:#ffe8cc;">
                <div class="card-body py-3">
                    <div class="display-5 fw-bold" style="color:#7d4a00;">
                        {{ overdue|length|add:due_this_month|length }}
                    </div>
                    <div class="small" style="color:#7d4a00;">Need pruning</div>
                </div>
            </div>
        </a>
    </div>
</div>

{% if overdue or due_this_month %}
<div class="card mb-3">
    <div class="card-header fw-semibold">✂️ Needs attention</div>
    <div class="list-group list-group-flush">
        {% for plant in overdue %}
        <a href="{% url 'plant_detail' plant.pk %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            <div>
                <div class="fw-semibold">{{ plant.name }}</div>
                <small class="text-muted">{{ plant.location }}</small>
            </div>
            <span class="badge bg-danger">overdue</span>
        </a>
        {% endfor %}
        {% for plant in due_this_month %}
        <a href="{% url 'plant_detail' plant.pk %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            <div>
                <div class="fw-semibold">{{ plant.name }}</div>
                <small class="text-muted">{{ plant.location }}</small>
            </div>
            <span class="badge bg-warning text-dark">this month</span>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="d-grid">
    <a href="{% url 'plant_add' %}" class="btn btn-success">+ Add a plant</a>
</div>
{% endblock %}