{% extends "plants/base.html" %}
{% block title %}Confirm species — BloomBase{% endblock %}
{% block content %}

<div class="d-flex align-items-center gap-2 mb-3">
    <a href="{% url 'identify_upload' %}" class="btn btn-sm btn-outline-secondary">←</a>
    <h5 class="mb-0">Is this your plant?</h5>
</div>

<p class="text-muted small mb-3">Tap the correct species, then confirm.</p>

<form method="post" id="confirm-form">
    {% csrf_token %}
    <input type="hidden" name="match_idx" id="match_idx_input" value="0">

    <div class="d-flex flex-column gap-2 mb-4" id="match-list">
        {% for m in matches %}
        <div class="match-card d-flex align-items-center gap-3 p-3 border rounded"
             style="cursor:pointer; {% if forloop.first %}border-color:#52b788 !important; background:#f0faf4;{% endif %}"
             data-idx="{{ forloop.counter0 }}"
             data-name="{{ m.scientific_name }}"
             onclick="selectMatch(this)">
            {% if m.image_url %}
            <img src="{{ m.image_url }}" alt="{{ m.scientific_name }}"
                 style="width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;">
            {% else %}
            <div style="width:64px;height:64px;background:#e9ecef;border-radius:8px;flex-shrink:0;"></div>
            {% endif %}
            <div class="flex-grow-1">
                <div class="fw-bold">{{ m.scientific_name }}</div>
                {% if m.common_names %}
                <div class="text-muted small">{{ m.common_names|join:", " }}</div>
                {% endif %}
                <div class="text-muted small fst-italic">{{ m.family }}</div>
            </div>
            <div>
                <span class="badge {% if m.score >= 0.70 %}bg-success{% elif m.score >= 0.30 %}bg-warning text-dark{% else %}bg-secondary{% endif %}">
                    {% widthratio m.score 1 100 %}%
                </span>
            </div>
        </div>
        {% endfor %}
    </div>

    <button type="submit" class="btn btn-success w-100" id="confirm-btn">
        Use <span id="selected-name">{{ matches.0.scientific_name }}</span> →
    </button>
</form>

<script>
function selectMatch(el) {
    document.querySelectorAll('.match-card').forEach(c => {
        c.style.borderColor = '';
        c.style.background = '';
    });
    el.style.borderColor = '#52b788';
    el.style.background = '#f0faf4';
    document.getElementById('match_idx_input').value = el.dataset.idx;
    document.getElementById('selected-name').textContent = el.dataset.name;
}
</script>
{% endblock %}