{% extends "plants/base.html" %}
{% load plant_extras %}
{% block title %}Dashboard — BloomBase{% 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 %}

{% if latest_plants %}
<div class="card mb-3">
    <div class="card-header fw-semibold">🌿 Recently added</div>
    <div class="list-group list-group-flush">
        {% for plant in latest_plants %}
        <a href="{% url 'plant_detail' plant.pk %}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-2 text-decoration-none">
            {% if plant.species and plant.species.api_image_url %}
            <img src="{{ plant.species.api_image_url }}" width="48" height="48" class="rounded" style="object-fit:cover;flex-shrink:0;">
            {% elif plant.thumbnail_url %}
            <img src="{{ plant.thumbnail_url }}" width="48" height="48" class="rounded" style="object-fit:cover;flex-shrink:0;">
            {% else %}
            <div style="width:48px;height:48px;background:#d8f3dc;border-radius:.375rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;">🌿</div>
            {% endif %}
            <div>
                <div class="fw-semibold" style="color:#1b4332;">{{ plant.name }}</div>
                <small class="text-muted">{{ plant.location }}</small>
            </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 %}