{% if accounts %}
<div class="relative" id="wa-global-account-selector">
  <button type="button" class="flex items-center gap-2 bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500" onclick="document.getElementById('wa-account-dropdown').classList.toggle('hidden')">
    <i data-lucide="building-2" class="w-4 h-4 text-gray-500"></i>
    <span class="max-w-[150px] truncate">{{ active_account.name|default:"Select Account" }}</span>
    <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400"></i>
  </button>
  
  <div id="wa-account-dropdown" class="hidden absolute right-0 mt-2 w-64 bg-white border border-gray-100 rounded-xl shadow-lg z-50 overflow-hidden">
    <div class="px-3 py-2 bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
      Active Account
    </div>
    <div class="max-h-60 overflow-y-auto">
      {% for account in accounts %}
      <form method="post" action="{% url 'django_meta_whatsapp:set_global_account' %}">
        {% csrf_token %}
        <input type="hidden" name="account_id" value="{{ account.id }}">
        <input type="hidden" name="next" value="{{ request.get_full_path }}">
        <button type="submit" class="w-full text-left px-4 py-3 flex items-center justify-between hover:bg-emerald-50 transition-colors {% if active_account.id == account.id %}bg-emerald-50{% endif %}">
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded bg-emerald-100 flex items-center justify-center text-emerald-700 font-bold text-xs">
              {{ account.name|first|upper }}
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium text-gray-900 truncate">{{ account.name }}</p>
              <p class="text-xs text-gray-500 truncate">{{ account.phone_number_id }}</p>
            </div>
          </div>
          {% if active_account.id == account.id %}
          <i data-lucide="check" class="w-4 h-4 text-emerald-600 flex-shrink-0"></i>
          {% endif %}
        </button>
      </form>
      {% endfor %}
    </div>
    <div class="border-t border-gray-100 p-2">
      <a href="{% url 'django_meta_whatsapp:account_create' %}" class="flex items-center justify-center gap-2 w-full px-3 py-2 text-sm font-medium text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors">
        <i data-lucide="plus" class="w-4 h-4"></i> Add Account
      </a>
    </div>
  </div>
</div>
<script>
  // Close dropdown when clicking outside
  document.addEventListener('click', function(event) {
    const selector = document.getElementById('wa-global-account-selector');
    const dropdown = document.getElementById('wa-account-dropdown');
    if (selector && dropdown && !selector.contains(event.target)) {
      dropdown.classList.add('hidden');
    }
  });
</script>
{% endif %}