<div>
  @if (loadingStatus.inProgress) {
    <div class="d-flex a-i-center">
      <c8y-loading></c8y-loading>
    </div>
  }

  @if (!loadingStatus.inProgress && loadingStatus.done && loadingStatus.error) {
    <div>
      <div
        class="alert alert-warning max-width-100"
        translate
      >
        Could not load schedules list.
      </div>
    </div>
  }

  @if (!loadingStatus.inProgress && !loadingStatus.done && !loadingStatus.error) {
    <div>
      @if (!scheduleList.length) {
        <c8y-ui-empty-state
          [icon]="'c8y-report'"
          [title]="'No export schedules defined.' | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      }
      @if (scheduleList.length) {
        <div class="c8y-list__group">
          <div class="c8y-list__item hidden-xs">
            <div class="c8y-list__item__block">
              <div class="c8y-list__item__icon">
                <i class="p-l-24"></i>
              </div>
              <div class="c8y-list__item__body">
                <div class="d-flex">
                  <div class="col-sm-6">
                    <label class="m-0">
                      {{ 'Description' | translate }}
                    </label>
                  </div>
                  <div class="col-sm-6 m-r-40">
                    <label class="m-0">
                      {{ 'Frequency' | translate }}
                    </label>
                  </div>
                </div>
              </div>
              <span></span>
            </div>
          </div>
          @for (schedule of scheduleList; track schedule; let i = $index) {
            <div
              class="c8y-list__item pointer"
              (click)="editSchedule(schedule, i, $event)"
            >
              <div class="c8y-list__item__block">
                <div class="c8y-list__item__icon">
                  <i
                    class="c8y-icon-duocolor"
                    c8yIcon="c8y-report"
                  ></i>
                </div>
                <div class="c8y-list__item__body d-flex">
                  <div class="col-sm-6 col-xs-6">
                    <div
                      class="text-truncate"
                      title="{{ schedule.emailConfig.subject }}"
                    >
                      {{ schedule.emailConfig.subject }}
                    </div>
                  </div>
                  <div class="col-sm-6 col-xs-6">
                    <div class="d-flex a-i-baseline">
                      <i
                        class="text-muted m-r-4"
                        c8yIcon="calendar"
                      ></i>
                      <span class="smart-rule-information">
                        @if (cronService.getBase(schedule.cronConfig) === 2) {
                          <span
                            ngNonBindable
                            translate
                            [translateParams]="{
                              minutes: schedule.cronConfig.minute | number: '2.0-0'
                            }"
                          >
                            Hourly: {{ minutes }} minute(s) past the hour.
                          </span>
                        }
                        @if (cronService.getBase(schedule.cronConfig) === 3) {
                          <span
                            ngNonBindable
                            translate
                            [translateParams]="{
                              hour: schedule.cronConfig.hour | number: '2.0-0',
                              minutes: schedule.cronConfig.minute | number: '2.0-0'
                            }"
                          >
                            Daily: at {{ hour }}:{{ minutes }}.
                          </span>
                        }
                        @if (cronService.getBase(schedule.cronConfig) === 4) {
                          <span
                            ngNonBindable
                            translate
                            [translateParams]="{
                              weekDay: cronService.getWeekDayName(schedule.cronConfig),
                              hour: schedule.cronConfig.hour | number: '2.0-0',
                              minutes: schedule.cronConfig.minute | number: '2.0-0'
                            }"
                          >
                            Weekly: {{ weekDay }}, at {{ hour }}:{{ minutes }}.
                          </span>
                        }
                        @if (cronService.getBase(schedule.cronConfig) === 5) {
                          <span
                            ngNonBindable
                            translate
                            [translateParams]="{
                              monthDay: cronService.getMonthDayName(schedule.cronConfig),
                              hour: schedule.cronConfig.hour | number: '2.0-0',
                              minutes: schedule.cronConfig.minute | number: '2.0-0'
                            }"
                          >
                            Monthly: {{ monthDay }} day of the month, at {{ hour }}:{{ minutes }}.
                          </span>
                        }
                        @if (cronService.getBase(schedule.cronConfig) === 6) {
                          <span
                            ngNonBindable
                            translate
                            [translateParams]="{
                              month: cronService.getMonthName(schedule.cronConfig),
                              monthDay: cronService.getMonthDayName(schedule.cronConfig),
                              hour: schedule.cronConfig.hour | number: '2.0-0',
                              minutes: schedule.cronConfig.minute | number: '2.0-0'
                            }"
                          >
                            Yearly: {{ month }}, {{ monthDay }} day of the month, at {{ hour }}:{{
                              minutes
                            }}.
                          </span>
                        }
                      </span>
                    </div>
                  </div>
                </div>
                <div
                  class="c8y-list__item__actions"
                  (click)="$event.stopPropagation()"
                >
                  <div
                    class="settings dropdown"
                    dropdown
                  >
                    <button
                      class="dropdown-toggle c8y-dropdown"
                      title="{{ 'Actions' | translate }}"
                      type="button"
                      dropdownToggle
                    >
                      <i [c8yIcon]="'ellipsis-v'"></i>
                    </button>
                    <ul
                      class="dropdown-menu dropdown-menu-right"
                      role="list"
                      *dropdownMenu
                    >
                      <li role="menuitem">
                        <button
                          [title]="
                            hasRequiredRole ? buttonLabels.edit : buttonLabels.editNoPermission
                          "
                          type="button"
                          (click)="editSchedule(schedule, i, $event)"
                          [disabled]="!hasRequiredRole"
                        >
                          <i [c8yIcon]="'pencil'"></i>
                          {{ 'Edit' | translate }}
                        </button>
                      </li>
                      <li role="menuitem">
                        <button
                          [title]="
                            hasRequiredRole
                              ? buttonLabels.duplicate
                              : buttonLabels.duplicateNoPermission
                          "
                          type="button"
                          (click)="duplicateSchedule(schedule, $event)"
                          [disabled]="!hasRequiredRole"
                        >
                          <i [c8yIcon]="'copy'"></i>
                          {{ 'Duplicate' | translate }}
                        </button>
                      </li>
                      <li role="menuitem">
                        <button
                          [title]="
                            hasRequiredRole ? buttonLabels.delete : buttonLabels.deleteNoPermission
                          "
                          type="button"
                          (click)="removeSchedule(schedule, i, $event)"
                          [disabled]="!hasRequiredRole"
                        >
                          <i [c8yIcon]="'delete'"></i>
                          {{ 'Delete' | translate }}
                        </button>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          }
        </div>
      }
    </div>
  }
  @if (!hasRequiredRole) {
    <div
      class="alert alert-warning max-width-100"
      role="alert"
      translate
    >
      You don't have the permission required to schedule exports.
    </div>
  }
  <button
    class="btn btn-default m-t-16"
    title="{{ 'Add schedule' | translate }}"
    type="button"
    (click)="addSchedule()"
    [disabled]="!hasRequiredRole"
  >
    <i [c8yIcon]="'plus-circle'"></i>
    {{ 'Add schedule' | translate }}
  </button>
</div>