{{-- Tasks to be done: left sidebar column --}}
<div class="dd-pending-panel dd-pending-panel--sidebar" id="dd-pending-panel" aria-live="polite">
    <div class="dd-pending-panel__hero">
        <div class="dd-pending-panel__hero-top">
            <span class="dd-pending-panel__icon" aria-hidden="true"><i class="fas fa-tasks"></i></span>
            <div class="dd-pending-panel__hero-text">
                <h2 class="dd-pending-panel__title">
                    <a href="{{ route('dashboard.tasks') }}" class="dd-pending-panel__title-link">Tasks to be done</a>
                </h2>
                <p class="dd-pending-panel__subtitle">Your pending actions · click for full list</p>
            </div>
        </div>
        <div class="dd-pending-panel__hero-count-wrap">
            <span class="dd-pending-panel__hero-count" id="dd-pending-hero-count">—</span>
            <span class="dd-pending-panel__hero-count-label">open tasks</span>
        </div>
    </div>

    <div class="dd-pending-summary" id="dd-pending-summary" aria-label="Task summary"></div>

    <div class="dd-pending-body" id="dd-pending-body">
        <div class="dd-pending-loading" id="dd-pending-loading">
            <div class="dd-pending-spinner" aria-hidden="true"></div>
            <span>Loading tasks…</span>
        </div>
        <div class="dd-pending-empty" id="dd-pending-empty" hidden>
            <i class="fas fa-check-circle" aria-hidden="true"></i>
            <span>No tasks right now — you're all caught up.</span>
        </div>
        <div class="dd-pending-error" id="dd-pending-error" hidden>
            <i class="fas fa-exclamation-triangle"></i>
            <span id="dd-pending-error-text">Could not load tasks.</span>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="dd-pending-retry">Retry</button>
        </div>
        <div class="dd-pending-list" id="dd-pending-list" hidden></div>
    </div>

    <div class="dd-pending-panel__footer">
        <button type="button" class="dd-pending-refresh" id="dd-pending-refresh" title="Refresh tasks">
            <i class="fas fa-sync-alt" aria-hidden="true"></i>
            <span>Refresh</span>
        </button>
        <a href="{{ route('notifications.index') }}" class="dd-pending-all-link" title="All notifications">
            <i class="far fa-bell"></i>
            <span>Notifications</span>
        </a>
        <span class="dd-pending-panel__count" id="dd-pending-count" hidden>0</span>
    </div>
</div>