{% load css_tags %}{% block_css 'enap_designsystem/blocks/dropdown.css' %}
{% load static %}
{% load wagtailcore_tags %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'css/dropdowns.css' %}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=arrow_drop_down" />
{% endblock %}

<div class="enap-dropdown-wrapper">
    <p class="enap-dropdown-label">{{ self.label }}</p>
    <div class="enap-dropdown">
        <button class="enap-dropdown-button" onclick="enapDropdownFunction_{{ id }}()">{{ self.button_text }}
            <span class="material-symbols-outlined">arrow_drop_down</span>
        </button>
        <div class="enap-dropdown-content" id="enapDropdown_{{ id }}">
            {% for link in self.dropdown_links %}
                {% include_block link %}
            {% endfor %}
        </div>
    </div>
</div>

<script>
function enapDropdownFunction_{{ id }}() {
  document.getElementById("enapDropdown_{{ id }}").classList.toggle("enap-dropdown-show");
}

// Fechamento do dropdown ao clicar fora
document.addEventListener('click', function(e) {
  if (!e.target.matches('.enap-dropdown-button')) {
    var dropdown = document.getElementById("enapDropdown_{{ id }}");
    if (dropdown && dropdown.classList.contains('enap-dropdown-show')) {
      dropdown.classList.remove('enap-dropdown-show');
    }
  }
}, false);
</script>