bloombase/plants/templates/plants/identify_fields.html

{% extends "plants/base.html" %}
{% block title %}Review & save — BloomBase{% endblock %}
{% block content %}

<div class="d-flex align-items-center gap-2 mb-3">
    <a href="{% url 'identify_confirm' %}" class="btn btn-sm btn-outline-secondary">←</a>
    <h5 class="mb-0">Review & save</h5>
</div>

<p class="text-muted small mb-3">Tap a tile to switch source. Green border = selected.</p>

{% if vpc_match %}
<div class="d-flex align-items-center gap-2 p-2 rounded mb-3" style="background:#d8f3dc;">
    <span style="font-size:18px;">🏪</span>
    <div class="flex-grow-1 small">
        <div class="fw-semibold">{{ vpc_match.common_name }}</div>
        <div class="text-muted" style="font-size:11px;">vasteplantencatalogus.nl</div>
    </div>
    {% if vpc_results|length > 1 %}
    <form method="get" action="{% url 'identify_fields' %}">
        <select name="vpc_idx" onchange="this.form.submit()"
                class="w-full bg-white border border-[#F0E4D4] rounded-full px-4 py-2.5 font-nunito text-sm text-[#1A1208] outline-none focus:border-[#F07040]">
            {% for r in vpc_results %}
            <option value="{{ forloop.counter0 }}" {% if forloop.counter0 == vpc_idx %}selected{% endif %}>
                {{ r.common_name }}
            </option>
            {% endfor %}
        </select>
    </form>
    {% endif %}
</div>
{% else %}
<div class="alert alert-warning py-2 small mb-3">
    No VPC data found — using Pl@ntNet only.
</div>
{% endif %}

<form method="post">
    {% csrf_token %}

    <!-- Common name -->
    <div class="mb-3">
        <div class="text-muted small text-uppercase fw-semibold mb-2" style="letter-spacing:.05em; font-size:10px;">Common name</div>
        <div class="d-flex gap-2">
            <div class="flex-fill source-tile p-2 border rounded"
                 style="cursor:pointer; {% if not vpc_match %}border-color:#52b788 !important; background:#f0faf4;{% endif %}"
                 data-field="common_name" data-value="plantnet" onclick="selectSource(this)">
                <span class="badge mb-1" style="background:#52b788; font-size:9px;">Pl@ntNet</span>
                <div class="small fw-semibold">{{ selected.common_names.0|default:selected.scientific_name }}</div>
                {% if selected.common_names|length > 1 %}
                <div class="text-muted" style="font-size:10px;">{{ selected.common_names.1 }}</div>
                {% endif %}
            </div>
            {% if vpc_match %}
            <div class="flex-fill source-tile p-2 border rounded"
                 style="cursor:pointer; border-color:#52b788 !important; background:#f0faf4;"
                 data-field="common_name" data-value="vpc" onclick="selectSource(this)">
                <span class="badge mb-1" style="background:#6c757d; font-size:9px;">VPC</span>
                <div class="small fw-semibold">{{ vpc_match.common_name }}</div>
            </div>
            {% endif %}
        </div>
        <input type="hidden" name="common_name_source" id="common_name_source"
               value="{% if vpc_match %}vpc{% else %}plantnet{% endif %}">
    </div>

    <!-- Scientific name -->
    <div class="mb-3">
        <div class="text-muted small text-uppercase fw-semibold mb-2" style="letter-spacing:.05em; font-size:10px;">Scientific name</div>
        <div class="d-flex gap-2">
            <div class="flex-fill source-tile p-2 border rounded"
                 style="cursor:pointer; border-color:#52b788 !important; background:#f0faf4;"
                 data-field="scientific_name" data-value="plantnet" onclick="selectSource(this)">
                <span class="badge mb-1" style="background:#52b788; font-size:9px;">Pl@ntNet</span>
                <div class="small fw-semibold fst-italic">{{ selected.scientific_name }}</div>
            </div>
            {% if vpc_match %}
            <div class="flex-fill source-tile p-2 border rounded"
                 style="cursor:pointer;"
                 data-field="scientific_name" data-value="vpc" onclick="selectSource(this)">
                <span class="badge mb-1" style="background:#6c757d; font-size:9px;">VPC</span>
                <div class="small fw-semibold fst-italic">{{ vpc_match.scientific_name }}</div>
            </div>
            {% endif %}
        </div>
        <input type="hidden" name="scientific_name_source" id="scientific_name_source" value="plantnet">
    </div>

    {% if vpc_match %}
    <hr class="my-3">
    <div class="text-muted small text-uppercase fw-semibold mb-2" style="letter-spacing:.05em; font-size:10px;">
        VPC care data <span class="badge ms-1" style="background:#e9ecef; color:#6c757d; font-size:9px;">from VPC</span>
    </div>
    <div class="row g-2 mb-3">
        <div class="col-12">
            <div class="p-2 rounded" style="background:#f8f9fa; font-size:12px;">
                <div class="text-muted" style="font-size:10px; text-transform:uppercase; margin-bottom:2px;">Loaded after save</div>
                <div class="small text-muted">bloom months · height · sunlight · frost hardiness · planting density</div>
            </div>
        </div>
    </div>
    {% endif %}

    <hr class="my-3">

    <div class="mb-3">
        <label class="form-label fw-semibold small">My plant name <span class="text-danger">*</span></label>
        <input type="text" name="name" class="form-control"
               value="{{ selected.scientific_name }}" required autofocus>
        <div class="text-muted" style="font-size:11px; margin-top:3px;">How you refer to this plant in your collection</div>
    </div>

    <button type="submit" class="btn btn-success w-100">Save plant ✓</button>
</form>

<script>
function selectSource(el) {
    const field = el.dataset.field;
    document.querySelectorAll(`.source-tile[data-field="${field}"]`).forEach(t => {
        t.style.borderColor = '';
        t.style.background = '';
    });
    el.style.borderColor = '#52b788';
    el.style.background = '#f0faf4';
    document.getElementById(field + '_source').value = el.dataset.value;
}
</script>
{% endblock %}