{% extends 'base.html' %}
{% load static_v %}
{% block title %}{{ template.name }} — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 600px;">
        <p class="auth-switch" style="margin-bottom: 10px;"><a href="{% url 'accounts:picker_signoff_forms' %}">&larr; {{ t.signoff_forms_title }}</a></p>
        <span class="section-kicker">{{ t.picker_dashboard_kicker }}</span>
        <h1>{{ template.name }}</h1>

        <form method="post" class="auth-form">
            {% csrf_token %}
            {% for field in active_fields %}
            <label for="field-{{ field.key }}">{{ field.label }}</label>
            {% if field.type == 'select' %}
            <select id="field-{{ field.key }}" name="{{ field.key }}">
                {% for opt in field.options %}
                <option value="{{ opt }}">{% if opt == 'good' %}{{ t.signoff_condition_good }}{% elif opt == 'fair' %}{{ t.signoff_condition_fair }}{% elif opt == 'poor' %}{{ t.signoff_condition_poor }}{% elif opt == 'needs_repair' %}{{ t.signoff_condition_needs_repair }}{% elif opt == 'damaged' %}{{ t.signoff_cargo_damaged }}{% elif opt == 'missing_items' %}{{ t.signoff_cargo_missing_items }}{% else %}{{ opt }}{% endif %}</option>
                {% endfor %}
            </select>
            {% elif field.type == 'number' %}
            <input type="number" step="any" id="field-{{ field.key }}" name="{{ field.key }}">
            {% elif field.type == 'checkbox' %}
            <label style="display: flex; align-items: center; gap: 8px; font-weight: 400;">
                <input type="checkbox" id="field-{{ field.key }}" name="{{ field.key }}" style="width: auto;">
            </label>
            {% elif field.type == 'textarea' %}
            <textarea id="field-{{ field.key }}" name="{{ field.key }}" rows="3"></textarea>
            {% else %}
            <input type="text" id="field-{{ field.key }}" name="{{ field.key }}">
            {% endif %}
            {% endfor %}

            <label style="margin-top: 18px;">{{ t.signoff_form_signature_label }}</label>
            <canvas id="signature-canvas" style="width: 100%; height: 160px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; touch-action: none;"></canvas>
            <input type="hidden" id="signature-data" name="signature_data_url">
            <button type="button" id="signature-clear-btn" class="btn-small" style="background: var(--muted); margin-top: 6px; align-self: flex-start;">{{ t.signoff_form_signature_clear }}</button>

            <button type="submit" class="btn-cta" style="margin-top: 18px;">{{ t.signoff_form_submit }}</button>
        </form>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="{% static_v 'js/signature-pad.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        initSignaturePad('signature-canvas', 'signature-data', 'signature-clear-btn');
    });
</script>
{% endblock %}