{% extends "plants/base.html" %}
{% block title %}{{ title }} — 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">{{ title }}</h5>
</div>

{% if species %}
<div class="alert alert-success py-2 d-flex align-items-center gap-2">
    {% if species.api_image_url %}
    <img src="{{ species.api_image_url }}" width="36" height="36" class="rounded" style="object-fit:cover;">
    {% endif %}
    <div>
        <strong>{{ species.common_name }}</strong>
        {% if species.scientific_name %}<small class="text-muted fst-italic ms-1">{{ species.scientific_name }}</small>{% endif %}
        <div class="small">Care info pre-filled from species database.</div>
    </div>
</div>
{% endif %}

<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="hidden" name="species_id" value="{{ species_id|default:'' }}">

    <div class="mb-3">
        <label class="form-label fw-semibold">Your name for this plant *</label>
        {{ form.name }}
        {% if form.name.errors %}<div class="text-danger small">{{ form.name.errors }}</div>{% endif %}
    </div>

    <div class="mb-3">
        <label class="form-label fw-semibold">Location</label>
        {{ form.location }}
        {% if form.location.errors %}<div class="text-danger small">{{ form.location.errors }}</div>{% endif %}
        <div class="mt-2">
            <label class="form-label small text-muted mb-1">{{ form.new_location.label }}</label>
            {{ form.new_location }}
            <div class="form-text">Leave empty if selecting from the list above.</div>
        </div>
    </div>

    <div class="mb-3 form-check">
        {{ form.is_indoor }}
        <label class="form-check-label" for="{{ form.is_indoor.id_for_label }}">Indoor plant</label>
    </div>

    <div class="mb-3">
        <label class="form-label fw-semibold">Watering</label>
        <div class="d-flex flex-wrap gap-2">
            {% for val, label in form.watering.field.choices %}
            <div>
                <input type="radio" class="btn-check" name="watering"
                       id="watering_{{ val|default:'none' }}" value="{{ val }}"
                       autocomplete="off"
                       {% if form.watering.value == val %}checked{% endif %}>
                <label class="btn btn-outline-secondary btn-sm" for="watering_{{ val|default:'none' }}">{{ label }}</label>
            </div>
            {% endfor %}
        </div>
        {% if species and species.watering %}<div class="form-text">Species default: 💧 {{ species.watering }}</div>{% endif %}
        {% if form.watering.errors %}<div class="text-danger small">{{ form.watering.errors }}</div>{% endif %}
    </div>

    <div class="mb-3">
        <label class="form-label fw-semibold">Sunlight</label>
        <div class="d-flex flex-wrap gap-2">
            {% for val, label in form.sunlight.field.choices %}
            <div>
                <input type="radio" class="btn-check" name="sunlight"
                       id="sunlight_{{ val|default:'none' }}" value="{{ val }}"
                       autocomplete="off"
                       {% if form.sunlight.value == val %}checked{% endif %}>
                <label class="btn btn-outline-secondary btn-sm" for="sunlight_{{ val|default:'none' }}">{{ label }}</label>
            </div>
            {% endfor %}
        </div>
        {% if species and species.sunlight %}<div class="form-text">Species default: ☀️ {{ species.sunlight }}</div>{% endif %}
        {% if form.sunlight.errors %}<div class="text-danger small">{{ form.sunlight.errors }}</div>{% endif %}
    </div>

    <div class="mb-3">
        <label class="form-label fw-semibold">Bloom months</label>
        <div class="month-toggle-group">
            {% for widget in form.bloom_months %}
            <div class="month-toggle">
                {{ widget.tag }}
                <label for="{{ widget.id_for_label }}">{{ widget.choice_label|slice:":1" }}</label>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label fw-semibold">Notes</label>
        {{ form.notes }}
    </div>

    <div class="d-grid">
        <button type="submit" class="btn btn-success">Save plant</button>
    </div>
</form>
{% endblock %}