{% extends "plants/base.html" %}
{% block title %}Plant card — {{ plant.name }} — BloomBase{% endblock %}
{% block content %}

<div class="d-flex align-items-center gap-2 mb-3">
    <a href="{% url 'plant_detail' plant.pk %}" class="btn btn-sm btn-outline-secondary">← {{ plant.name }}</a>
    <h5 class="mb-0">Plant card</h5>
</div>

{% include "plants/partials/card_gallery.html" %}

{% if plant.card_photos.all %}
<div class="mt-3">
    <a href="{% url 'extract_card_data' plant.pk %}" class="btn btn-sm btn-outline-success"
       onclick="document.getElementById('scan-spinner').style.display='flex'">
        🔍 Extract data from card
    </a>
</div>
<div id="scan-spinner" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.88); z-index:9999; align-items:center; justify-content:center; flex-direction:column; gap:12px;">
    <div class="spinner-border text-success" role="status"><span class="visually-hidden">Loading…</span></div>
    <p class="text-muted small mb-0">Scanning card…</p>
</div>
{% endif %}

{% endblock %}