{% load i18n %}
<div class="p-3">
    <h5>{% translate "Nouveau Panneau" %}</h5>
    <form id="create-panel-form" method="post" action="{% url 'sign:sign_panel_create' %}">
        {% csrf_token %}
        {{ form.lat }}
        {{ form.lon }}
        {% if pole_id %}
        <input type="hidden" name="pole_id" value="{{ pole_id }}">
        {% endif %}
        
        <div class="mb-3">
            <label class="form-label">{% translate "Latitude" %}</label>
            <input type="text" class="form-control" value="{{ form.lat.value|default:'' }}" disabled>
        </div>
        <div class="mb-3">
            <label class="form-label">{% translate "Longitude" %}</label>
            <input type="text" class="form-control" value="{{ form.lon.value|default:'' }}" disabled>
        </div>

        <div class="mb-3">
            <label class="form-label">{% translate "Type de panneau" %} <span class="text-danger">*</span></label>
            
            <!-- Hidden select for form submission -->
            <select name="signpanel_type" id="id_signpanel_type" class="d-none" required>
                <option value="">---</option>
                {% for group, panels in panel_types_grouped.items %}
                    {% for panel in panels %}
                        <option value="{{ panel.id }}">{{ panel.code }}</option>
                    {% endfor %}
                {% endfor %}
            </select>

<style>
    /* Premium Modern Accordion */
    .accordion-item {
        border: 1px solid rgba(47, 62, 139, 0.08) !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
        box-shadow: 0 2px 6px rgba(47, 62, 139, 0.03) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden;
    }
    
    .accordion-item:hover {
        border-color: rgba(13, 110, 253, 0.2) !important;
        box-shadow: 0 4px 12px rgba(47, 62, 139, 0.06) !important;
    }
    
    .accordion-button {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #495057 !important;
        background-color: #ffffff !important;
        border: none !important;
        transition: all 0.25s ease !important;
    }
    
    .accordion-button:hover {
        background-color: #f8f9fa !important;
        color: #0d6efd !important;
    }
    
    .accordion-button:not(.collapsed) {
        background-color: rgba(13, 110, 253, 0.05) !important;
        color: #0d6efd !important;
        border-bottom: 1px solid rgba(13, 110, 253, 0.1) !important;
    }
    
    .accordion-button::after {
        background-size: 1rem !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .accordion-body {
        background-color: #fbfbfc !important;
        border-top: none !important;
        padding: 12px !important;
    }
    
    /* Premium Panel Item styling */
    .panel-item, .panel-item-create {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border: 1px solid #e9ecef !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .panel-item:hover, .panel-item-create:hover {
        transform: translateY(-3px) scale(1.05) !important;
        border-color: #0d6efd !important;
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15) !important;
    }

    .panel-img-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 2px !important;
    }

    .panel-text-fallback {
        width: 100%;
        height: 100%;
        max-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
        border: 1px dashed #d0d5dd;
        border-radius: 4px;
        padding: 2px 3px;
        box-sizing: border-box;
        overflow: hidden;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .panel-fallback-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        max-height: 40px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        overflow-wrap: anywhere;
        text-align: center;
        font-weight: 600;
        color: #495057;
        letter-spacing: -0.2px;
    }

    .panel-item.bg-primary .panel-text-fallback,
    .panel-item-create.bg-primary .panel-text-fallback,
    .panel-item.selected .panel-text-fallback,
    .panel-item-create.selected .panel-text-fallback {
        background-color: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
    }

    .panel-item.bg-primary .panel-fallback-text,
    .panel-item-create.bg-primary .panel-fallback-text,
    .panel-item.selected .panel-fallback-text,
    .panel-item-create.selected .panel-fallback-text {
        color: #ffffff !important;
    }
</style>

            <!-- Accordion for panel categories -->
            <div class="accordion mb-3 shadow-sm border rounded" id="panel-type-accordion-create" style="max-height: 500px; overflow-y: auto;">
                {% for group_key, group_label in panel_types_groups %}
                    <div class="accordion-item border-0 border-bottom">
                        <h2 class="accordion-header" id="heading-create-{{ group_key }}">
                            <button class="accordion-button collapsed py-2 px-3 fw-bold bg-white text-dark shadow-none" 
                                    type="button" 
                                    data-bs-toggle="collapse" 
                                    data-bs-target="#collapse-create-{{ group_key }}" 
                                    aria-expanded="false" 
                                    aria-controls="collapse-create-{{ group_key }}"
                                    data-group="{{ group_key }}">
                                {{ group_label }}
                            </button>
                        </h2>
                        <div id="collapse-create-{{ group_key }}" class="accordion-collapse collapse" aria-labelledby="heading-create-{{ group_key }}" data-bs-parent="#panel-type-accordion-create">
                            <div class="accordion-body p-2 bg-light border-top">
                                <div class="d-flex flex-wrap gap-2 justify-content-start">
                                    {% for group, panels in panel_types_grouped.items %}
                                        {% if group == group_key %}
                                            {% for panel in panels %}
                                                <div class="panel-item-create text-center p-1 border rounded bg-white shadow-sm hover-grow" 
                                                     data-id="{{ panel.id }}" 
                                                     data-code="{{ panel.code }}"
                                                     data-image-url="{{ panel.image_url|default:'' }}"
                                                     style="cursor: pointer; width: 68px; overflow: hidden; box-sizing: border-box; transition: transform 0.15s ease;"
                                                     title="{{ panel.code }} - {{ panel.name }}">
                                                     <div class="panel-img-placeholder mb-1" style="height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box;">
                                                        <!-- Content will be injected by JS -->
                                                     </div>
                                                     <div class="small text-truncate fw-bold text-muted" style="font-size: 0.65rem; width: 100%; max-width: 100%; overflow: hidden;">{{ panel.code }}</div>
                                                </div>
                                            {% endfor %}
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <!-- Selected panel display -->
            <div id="selected-panel-display-create" class="border rounded p-2 bg-light">
                <div class="text-muted small fst-italic empty-message-create text-center">{% translate "Aucun type sélectionné" %}</div>
                <!-- Selected item will be displayed here via JS -->
            </div>
            
            {% if form.signpanel_type.errors %}
            <div class="invalid-feedback d-block">{{ form.signpanel_type.errors }}</div>
            {% endif %}
        </div>

        <div class="mb-3">
            <label for="{{ form.model.id_for_label }}" class="form-label">{{ form.model.label }}</label>
            {{ form.model }}
        </div>

        <div class="mb-3">
            <label for="{{ form.organization.id_for_label }}" class="form-label">{{ form.organization.label }}</label>
            {{ form.organization }}
        </div>

        <div class="mb-3">
            <label for="{{ form.support_type.id_for_label }}" class="form-label">{{ form.support_type.label }}</label>
            {{ form.support_type }}
        </div>

        <div class="mb-3">
            <label for="{{ form.support_model.id_for_label }}" class="form-label">{{ form.support_model.label }}</label>
            {{ form.support_model }}
            <div class="form-text text-muted small">{% translate "Précisez le modèle du support (ex: Poteau Acier 3m, Feu tricolore carrefour, Candélabre...)" %}</div>
        </div>

        <div class="mb-3">
            <label for="{{ form.orientation.id_for_label }}" class="form-label">{{ form.orientation.label }}</label>
            {{ form.orientation }}
        </div>

        <div class="mb-3 form-check">
            {{ form.is_temporary }}
            <label class="form-check-label" for="{{ form.is_temporary.id_for_label }}">
                {{ form.is_temporary.label }}
            </label>
        </div>

        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary">{% translate "Créer" %}</button>
            <button type="button" class="btn btn-outline-secondary" onclick="cancelCreate()">{% translate "Annuler" %}</button>
        </div>
    </form>
</div>