{% extends 'base.html' %}
{% block title %}Measures — {{ product.name }} — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 700px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Measures for {{ product.name }}</h1>
            </div>
            <a href="{% url 'accounts:product_edit' product.id %}" class="btn-small">&larr; Back to product</a>
        </div>

        <p style="color: var(--muted); margin-bottom: 24px;">
            Offer this product in extra measures (bucket, sack, sadolin, piece) alongside its normal
            "{{ product.unit }}" price. Each measure gets its own price (set directly, the way market vendors
            actually quote a bucket or sack) and a kg-equivalent, used only to work out the picking fee — not
            the price. Leave a measure unchecked to keep it off the customer's options; toggling one off later
            never affects orders already placed with it.
        </p>

        <form method="post" class="contact-form">
            {% csrf_token %}
            {% for row in measure_rows %}
            <div class="measure-row">
                <label style="display: flex; align-items: center; gap: 8px; font-weight: 700;">
                    <input type="checkbox" name="enable_{{ row.type }}" value="1" {% if row.existing.is_active %}checked{% endif %}>
                    {{ row.label }}
                </label>
                <div class="measure-row-fields">
                    <input type="number" step="0.01" name="price_{{ row.type }}" placeholder="Price (TSh)" value="{{ row.existing.price|default:'' }}" min="0">
                    <input type="number" step="0.01" name="kg_equivalent_{{ row.type }}" placeholder="Kg equivalent" value="{{ row.existing.kg_equivalent|default:'' }}" min="0">
                    <input type="number" step="1" name="min_qty_{{ row.type }}" placeholder="Min qty" value="{{ row.existing.min_qty|default:'1' }}" min="1">
                    <label style="display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted);">
                        <input type="radio" name="default_measure_type" value="{{ row.type }}" {% if row.existing.is_default %}checked{% endif %}>
                        Default
                    </label>
                </div>
            </div>
            {% endfor %}
            <button type="submit" class="btn-cta" style="margin-top: 10px;">Save Measures</button>
        </form>

        <div class="category-manager" style="margin-top: 24px;">
            <h3 style="margin-bottom: 8px;">Register a new unit</h3>
            <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 10px;">
                Not listed above? Register a new unit here (e.g. "1/2 Cup" / "Nusu Kikombe") — it becomes
                available on every product's measures page, and this product's own dropdown, right away.
            </p>
            <form method="post" class="category-add-form">
                {% csrf_token %}
                <input type="text" name="new_unit_key" placeholder="Key, e.g. half_cup" maxlength="50" required>
                <input type="text" name="new_unit_label_en" placeholder="English, e.g. 1/2 Cup" maxlength="100" required>
                <input type="text" name="new_unit_label_sw" placeholder="Kiswahili, e.g. Nusu Kikombe (optional)" maxlength="100">
                <button type="submit" class="btn-small">+ Register unit</button>
            </form>
        </div>
    </div>
</section>
{% endblock %}