{# Десктопная версия календаря - правая колонка #}
<div class="rightbar d-none d-lg-block">
  <div class="card rightbar-card" data-dept-id="{{ dept_ids|default:'' }}">
    <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">

      <div class="d-flex align-items-center gap-2 flex-shrink-1 min-w-0">
        <h6 class="card-title fw-semibold mb-0">Календарь</h6>

        {# Выпадающий выбор: Компания / Отделы / Личный #}
        <div class="dropdown">
          <button class="btn btn-sm btn-outline-secondary dropdown-toggle text-truncate" type="button"
                  id="calendarChooserBtn" data-bs-toggle="dropdown" aria-expanded="false"
                  style="max-width: 150px;">
            Компания
          </button>
          <ul class="dropdown-menu" aria-labelledby="calendarChooserBtn" id="calendarChooserMenu">
            <li><button class="dropdown-item" type="button" data-cal="personal">Личный</button></li>
            <li><hr class="dropdown-divider"></li>
            <li><button class="dropdown-item" type="button" data-cal="company">Компания</button></li>
            <li><hr class="dropdown-divider"></li>
            {# пункты отделов добавим из JS по data-dept-id #}
          </ul>
        </div>
      </div>

      <div class="d-flex align-items-center gap-2 flex-shrink-0">
        <span class="card-sub text-muted d-none d-xl-inline">События</span>
        <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#eventCreateModal"
                aria-label="Создать событие"><i class="bi-plus-lg"></i></button>
      </div>
    </div>

    <div class="card-body">
      <div id="calendarRight" class="calendar-wrap"></div>

      <div class="week-strip-header">
        <span><i class="bi-calendar-week me-1"></i> На этой неделе</span>
        <span id="weekRange" class="text-muted"></span>
      </div>
      <div id="weekList" class="week-vertical" aria-live="polite"></div>
    </div>
  </div>
</div>