{% extends "plants/base.html" %}
{% block title %}Add Plant — PlantDB{% endblock %}
{% block content %}
<h5 class="mb-3">Add a plant</h5>
<p class="text-muted small">Search for the species to auto-fill care info, or skip to enter details manually.</p>

<input
    type="search"
    class="form-control mb-2"
    placeholder="🔍 Search species, e.g. 'climbing rose'"
    hx-get="{% url 'species_search' %}"
    hx-trigger="input changed delay:400ms"
    hx-target="#species-results"
    hx-swap="innerHTML"
    name="q"
    autocomplete="off"
>

<div id="species-results" class="list-group mb-3"></div>

<div class="text-center">
    <a href="{% url 'plant_add' %}?species_id=skip" class="text-muted small">
        Skip — enter details manually
    </a>
</div>
{% endblock %}