{# Десктопная версия календаря - правая колонка #}
<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>

        {# Кнопка списка календарей #}
        <button 
          class="btn btn-sm btn-outline-primary" 
          type="button"
          data-bs-toggle="collapse" 
          data-bs-target="#calendarListCollapse"
          aria-expanded="false" 
          aria-controls="calendarListCollapse"
          title="Список календарей"
        >
          <i class="bi-list-check"></i>
          <span class="ms-1">Календари</span>
        </button>
      </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-outline-success" 
          type="button" 
          data-action="create-calendar"
          aria-label="Создать календарь"
          title="Создать календарь"
        >
          <i class="bi-calendar-plus"></i>
        </button>
        <button 
          class="btn btn-sm btn-primary" 
          type="button" 
          data-bs-toggle="modal" 
          data-bs-target="#eventCreateModal"
          aria-label="Создать событие"
          title="Создать событие"
        >
          <i class="bi-plus-lg"></i>
        </button>
      </div>
    </div>

    {# Список календарей (сворачиваемый) - унифицированный список legacy + новые #}
    <div class="collapse" id="calendarListCollapse">
      <div class="card-body border-bottom py-2">
        <small class="text-muted d-block mb-2">
          <i class="bi-info-circle me-1"></i>
          Выберите календари для отображения
        </small>
        <div id="calendarListContainer" class="calendar-list-container" style="max-height: 250px; overflow-y: auto;">

          {# Здесь будет JS-генерируемый список календарей (legacy + новые) #}
          <div class="text-center py-3">
            <div class="spinner-border spinner-border-sm text-primary" role="status">
              <span class="visually-hidden">Загрузка...</span>
            </div>
          </div>
        </div>
      </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>