<div wire:poll.2s class="d-flex align-items-center gap-3">
    <!-- Active Call Controls -->
    @if($activeCall)
        <div class="bg-white border border-danger rounded-pill px-3 py-1 d-flex align-items-center gap-2 shadow-sm">
            <div class="spinner-grow spinner-grow-sm text-danger" role="status" style="width: 0.75rem; height: 0.75rem;">
                <span class="visually-hidden">In Call...</span>
            </div>
            <span class="text-danger fw-bold" style="font-size: 0.85rem;">
                {{ ucfirst($activeCall->status) }}
                <span class="text-muted fw-normal ms-1">({{ ucfirst($activeCall->direction) }})</span>
            </span>

            <div class="vr mx-1"></div>

            <button wire:click="endCall" class="btn btn-sm btn-danger rounded-pill py-0 px-3" style="font-size: 0.8rem; height: 24px;">
                End Call
            </button>
        </div>
    @endif

    <!-- State Management Dropdown -->
    <div class="dropdown">
        <button class="btn btn-sm dropdown-toggle rounded-pill d-flex align-items-center gap-2 {{ $this->getStatusButtonClass() }}" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="font-size: 0.85rem; font-weight: 500;">
            <span class="d-inline-block rounded-circle {{ $this->getStatusIndicatorClass() }}" style="width: 8px; height: 8px;"></span>
            {{ str_replace('_', ' ', ucwords($status)) }}
        </button>

        <ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2" style="font-size: 0.875rem; min-width: 180px;">
            <li><h6 class="dropdown-header text-uppercase" style="font-size: 0.7rem;">Your Status</h6></li>

            <li>
                <a class="dropdown-item d-flex align-items-center gap-2" href="#" wire:click.prevent="setStatus('available')">
                    <span class="d-inline-block rounded-circle bg-success" style="width: 8px; height: 8px;"></span> Available
                </a>
            </li>
            <li>
                <a class="dropdown-item d-flex align-items-center gap-2" href="#" wire:click.prevent="setStatus('busy')">
                    <span class="d-inline-block rounded-circle bg-danger" style="width: 8px; height: 8px;"></span> Busy
                </a>
            </li>
            <li>
                <a class="dropdown-item d-flex align-items-center gap-2" href="#" wire:click.prevent="setStatus('wrap_up')">
                    <span class="d-inline-block rounded-circle bg-warning" style="width: 8px; height: 8px;"></span> Wrap Up
                </a>
            </li>
            <li>
                <a class="dropdown-item d-flex align-items-center gap-2" href="#" wire:click.prevent="setStatus('do_not_disturb')">
                    <span class="d-inline-block rounded-circle bg-danger" style="width: 8px; height: 8px;"></span> Do Not Disturb
                </a>
            </li>

            <li><hr class="dropdown-divider"></li>

            <li>
                <a class="dropdown-item d-flex align-items-center gap-2 text-muted" href="#" wire:click.prevent="setStatus('offline')">
                    <span class="d-inline-block rounded-circle bg-secondary" style="width: 8px; height: 8px;"></span> Offline
                </a>
            </li>
        </ul>
    </div>
</div>