{% extends "plants/base.html" %}
{% block title %}Add Plant — BloomBase{% endblock %}
{% block content %}
<h5 class="mb-3">Add a plant</h5>
<p class="text-muted small">Search by name, or paste a VPC URL to import a specific plant directly.</p>

<div class="input-group mb-2">
    <input
        type="search"
        class="form-control"
        placeholder="e.g. 'climbing rose'"
        name="q"
        id="species-q"
        autocomplete="off"
    >
    <button
        class="btn btn-success"
        hx-get="{% url 'species_search' %}"
        hx-include="#species-q"
        hx-target="#species-results"
        hx-swap="innerHTML"
        hx-indicator="#search-spinner"
        hx-disabled-elt="this"
    >
        <span id="search-spinner" class="htmx-indicator spinner-border spinner-border-sm me-1" role="status"></span>
        Search
    </button>
</div>

<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 %}