<!--
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
@if (myCourses | async; as myCourses) {
  <ion-accordion-group [value]="myCourses[0][0]">
    @for (myCoursesDay of myCourses; track myCoursesDay) {
      <ion-accordion [value]="myCoursesDay[0]" [disabled]="myCoursesDay[1].length === 0">
        <ion-item slot="header">
          <!-- TODO: when using date-fns, use https://date-fns.org/v2.30.0/docs/formatRelative -->
          <ion-label
            >{{ myCoursesDay[0] | amDateFormat: 'dddd, ll' }} -
            {{
              'profile.courses.' +
                (myCoursesDay[1].length === 0 ? 'NO' : myCoursesDay[1].length === 1 ? 'ONE' : 'MANY') +
                '_EVENT' | translate: {count: myCoursesDay[1].length}
            }}</ion-label
          >
          <ion-icon class="ion-accordion-toggle-icon" name="expand_more"></ion-icon>
        </ion-item>
        <ion-list class="ion-padding" slot="content">
          @if (myCoursesDay[1].length === 0) {
            <div class="no-course">{{ 'profile.courses.no_courses' | translate }}</div>
          }
          @for (myCourse of myCoursesDay[1]; track myCourse) {
            <ion-item-group>
              <ion-item-divider
                >{{ myCourse.startTime | amDateFormat: 'LT' }} -
                {{ myCourse.endTime | amDateFormat: 'LT' }}</ion-item-divider
              >
              <stapps-data-list-item
                [listItemChipInteraction]="false"
                [hideThumbnail]="true"
                [item]="myCourse.course"
              ></stapps-data-list-item>
            </ion-item-group>
          }
        </ion-list>
      </ion-accordion>
    }
  </ion-accordion-group>
}
