{% extends "plants/base.html" %}
{% load plant_extras %}
{% 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">
        <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;">{{ blooming_now_count }}</div>
                <div class="small" style="color:#2d6a4f;">Blooming now</div>
            </div>
        </div>
    </div>
</div>

{% if blooming_now %}
<div class="card mb-3">
    <div class="card-header fw-semibold">🌸 Blooming this month</div>
    <div class="list-group list-group-flush">
        {% for plant in blooming_now %}
        <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>
            <div>{% month_strip plant.bloom_months %}</div>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}

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