<div class="cron-wrap">
  <div class="form-group smart-cron-job-every">
    <label for="smart-cron-job-every" class="control-label" translate>
      Interval
    </label>
    <div class="">
      <div class="c8y-select-wrapper">
        <select
          class="cron-select form-control"
          id="smart-cron-job-every"
          [(ngModel)]="base"
          required="true"
          (change)="onChangeSelect()"
        >
          <option *ngIf="base === 1" value="1" translate>
            Select…
          </option>
          <option *ngFor="let baseInterval of intervals" [ngValue]="baseInterval.value">
            {{ baseInterval.label | translate }}
          </option>
        </select>
        <span></span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group smart-cron-job-on col-md-6" *ngIf="base == 4">
      <label class="control-label" for="smart-cron-job-on" translate>
        Day
      </label>

      <div class="c8y-select-wrapper">
        <select
          class="cron-select form-control day-value"
          id="smart-cron-job-on"
          [(ngModel)]="cronConfig.weekday"
          (change)="onChangeSelect()"
        >
          <option *ngFor="let dayOfWeek of daysOfWeekPosix" [ngValue]="dayOfWeek.value">
            {{ dayOfWeek.label | translate }}
          </option>
        </select>
        <span></span>
      </div>
    </div>

    <div class="form-group smart-cron-job-of col-md-6" *ngIf="base == 6">
      <label for="smart-cron-job-of" class="control-label" translate>
        Month
      </label>
      <div>
        <div class="c8y-select-wrapper">
          <select
            id="smart-cron-job-of"
            class="cron-select form-control month-value"
            [(ngModel)]="cronConfig.month"
            (change)="onChangeSelect()"
          >
            <option *ngFor="let month of months" [ngValue]="month.value">
              {{ month.label | translate }}
            </option>
          </select>
          <span></span>
        </div>
      </div>
    </div>

    <div class="form-group smart-cron-job-on-the col-md-6" *ngIf="base >= 5">
      <label for="smart-cron-job-on-the" class="control-label" translate>
        Day
      </label>
      <div>
        <div class="c8y-select-wrapper">
          <select
            id="smart-cron-job-on-the"
            class="cron-select form-control day-of-month-value"
            [(ngModel)]="cronConfig.day"
            (change)="onChangeSelect()"
          >
            <option *ngFor="let dayOfMonth of daysOfMonth" [ngValue]="dayOfMonth.value">
              {{ dayOfMonth.label | translate }}
            </option>
          </select>
          <span></span>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group smart-cron-job-at" *ngIf="base >= 2">
    <label for="smart-cron-job-at-hour" class="control-label">
      <span *ngIf="base >= 3" translate>Time</span>
      <span *ngIf="base < 3" translate>Minutes</span>
    </label>
    <div>
      <div class="form-inline">
        <div class="c8y-select-wrapper" *ngIf="base >= 3">
          <select
            id="smart-cron-job-at-hour"
            class="cron-select form-control hour-value"
            [(ngModel)]="cronConfig.hour"
            (change)="onChangeSelect()"
          >
            <option *ngFor="let hour of hours" [ngValue]="hour.value">
              {{ hour.value | number: '2.0-0' }}
            </option>
          </select>
          <span></span>
        </div>
        <span *ngIf="base >= 3"> : </span>
        <div class="c8y-select-wrapper">
          <select
            class="cron-select form-control minute-value"
            id="smart-cron-job-at-minute"
            [(ngModel)]="cronConfig.minute"
            (change)="onChangeSelect()"
          >
            <option *ngFor="let minute of minutes" [ngValue]="minute.value">
              {{ minute.value | number: '2.0-0' }}
            </option>
          </select>
          <span></span>
        </div>
      </div>
    </div>
  </div>
</div>