{% load static %}

<div class="searchable-dropdown searchable-dropdown-with-info" 
     data-type="{{ dropdown_type|default:'default' }}"
     {% if info_url %}data-info-url="{{ info_url }}"{% endif %}
     {% if info_container_id %}data-info-container="{{ info_container_id }}"{% endif %}
     {% if ajax_url %}data-ajax-url="{{ ajax_url }}"{% endif %}
     {% if min_search_length %}data-min-search-length="{{ min_search_length }}"{% endif %}
     {% if max_results %}data-max-results="{{ max_results }}"{% endif %}
     {% if allow_clear != None %}data-allow-clear="{{ allow_clear|yesno:'true,false' }}"{% endif %}
     {% if allow_create != None %}data-allow-create="{{ allow_create|yesno:'true,false' }}"{% endif %}>
    <div class="dropdown-display" tabindex="0">
        <span class="selected-text">{{ placeholder|default:'Selecione uma opção' }}</span>
        <i class="bi bi-chevron-down dropdown-arrow"></i>
    </div>
    
    <div class="dropdown-menu">
        <div class="search-container">
            <input type="text" class="search-input" 
                   placeholder="{{ search_placeholder|default:'Digite para buscar...' }}">
            <i class="bi bi-search search-icon"></i>
        </div>
        
        <div class="options-container">
            {% for choice in widget.choices %}
                <div class="dropdown-option" data-value="{{ choice.0 }}">
                    {{ choice.1 }}
                </div>
            {% endfor %}
        </div>
        
        <div class="no-results" style="display: none;">
            {{ no_results_text|default:'Nenhum resultado encontrado' }}
        </div>
    </div>
    
    <select name="{{ name }}" id="{{ attrs.id }}" style="display: none;">
        {% for choice in widget.choices %}
            <option value="{{ choice.0 }}" 
                    {% if choice.0 == value %}selected{% endif %}>
                {{ choice.1 }}
            </option>
        {% endfor %}
    </select>
    
    {% if info_container_id %}
        <div id="{{ info_container_id }}" class="dropdown-info-container mt-3" style="display: none;">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="bi bi-info-circle text-primary"></i>
                        Informações da Opção Selecionada
                    </h6>
                </div>
                <div class="card-body">
                    <div class="info-content">
                        <!-- Informações serão carregadas via AJAX -->
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>

<link rel="stylesheet" href="{% static 'css/searchable-dropdown.css' %}">
<script src="{% static 'js/searchable-dropdown.js' %}"></script>
<script src="{% static 'js/searchable-dropdown-init.js' %}"></script>