{% extends "base.html" %}
{% macro field_widget(field) %}
<div class="form-group">
    <label>{{ field.label }}{% if field.required and not field.readonly %}<span class="req-star">*</span>{% endif %}</label>
    {% if field.widget == "password" %}
        <div class="pw-wrap">
            <input type="password" id="pw-{{ field.name }}" name="{{ field.name }}" autocomplete="new-password" oninput="pwStrength(this)" placeholder="Leave blank to keep current">
            <button type="button" class="pw-toggle" onclick="togglePw(this)" aria-label="Show/Hide">
                <svg class="eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                <svg class="eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><path d="M1 1l22 22"/></svg>
            </button>
        </div>
        <div class="pw-strength" id="pw-{{ field.name }}-bar"><span></span></div>
        <input type="password" name="{{ field.name }}__confirm" placeholder="Confirm new password" autocomplete="new-password" style="width:100%;margin-top:8px;padding:11px 15px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:14px;font-family:var(--font);">
        {% if field.help %}<div class="field-help">{{ field.help }}</div>{% endif %}
    {% elif field.widget == "relation" %}
        <div class="combo" data-combo="{{ field.name }}">
            <input type="text" class="combo-input" placeholder="Search {{ field.rel_name }}..." autocomplete="off">
            <input type="hidden" name="{{ field.name }}" value="{{ field.value }}" {% if field.readonly %}disabled{% endif %}>
            <div class="combo-list">
                <div class="combo-opt muted" data-val="" data-label="— None —">— None —</div>
                {% for opt in field.options %}
                <div class="combo-opt {% if opt.selected %}active{% endif %}" data-val="{{ opt.pk }}" data-label="{{ opt.label }}">{{ opt.label }}</div>
                {% endfor %}
            </div>
        </div>
        {% if field.help %}<div class="field-help">{{ field.help }}</div>{% endif %}
    {% elif field.widget == "m2m" %}
        <div class="m2m-box" data-m2m="{{ field.name }}">
            <div class="m2m-search"><input type="text" placeholder="Search {{ field.rel_name }}..." oninput="m2mFilter(this)"></div>
            <div class="m2m-chips"></div>
            <div class="m2m-options">
                {% for opt in field.options %}
                <label class="m2m-opt {% if opt.selected %}selected{% endif %}">
                    <input type="checkbox" name="{{ field.name }}" value="{{ opt.pk }}" {% if opt.selected %}checked{% endif %} {% if field.readonly %}disabled{% endif %} style="display:none;">
                    <span class="check">✓</span>
                    <span class="lbl">{{ opt.label }}</span>
                </label>
                {% endfor %}
            </div>
        </div>
        {% if field.help %}<div class="field-help">{{ field.help }}</div>{% endif %}
    {% elif field.readonly %}
        <input type="text" value="{{ field.value }}" readonly>
    {% elif field.widget == "textarea" %}
        <textarea name="{{ field.name }}" rows="5" {% if field.readonly %}readonly{% endif %}>{{ field.value }}</textarea>
    {% elif field.widget == "checkbox" %}
        <input type="checkbox" name="{{ field.name }}" value="1" {% if field.value == "True" or field.value == "1" %}checked{% endif %} {% if field.readonly %}disabled{% endif %} style="width:18px;height:18px;accent-color:var(--accent);">
    {% else %}
        <input type="{{ 'number' if field.widget == 'number' else 'text' }}" name="{{ field.name }}" value="{{ field.value }}" {% if field.readonly %}readonly{% endif %}>
    {% endif %}
    {% if field.widget not in ("password","relation","m2m") and field.help %}<div class="field-help">{{ field.help }}</div>{% endif %}
</div>
{% endmacro %}
{% block content %}
<a href="{{ site_prefix }}/{{ model_slug }}/{{ object_id }}/" class="back-link">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
    Back to detail
</a>
<div style="text-align:center;margin-bottom:28px;">
    <h2 style="font-size:22px;font-weight:800;letter-spacing:-0.5px;">Edit {{ model_name }} #{{ object_id }}</h2>
</div>
{% if error %}
<div class="flash flash-error">{{ error }}</div>
{% endif %}
<div class="form-centered">
    <div class="card">
        <form method="POST">
            {% for field in fields %}
            {{ field_widget(field) }}
            {% endfor %}
            {% if relation_fields %}
            <div class="section-divider"><h3>Related records</h3></div>
            {% for field in relation_fields %}
            {{ field_widget(field) }}
            {% endfor %}
            {% endif %}
            <div class="form-actions">
                <button type="submit" class="btn btn-primary btn-lg">Save Changes</button>
                <a href="{{ site_prefix }}/{{ model_slug }}/{{ object_id }}/" class="btn btn-secondary btn-lg">Cancel</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}