<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header>
    <mat-card-title>
      {{ 'message.sendReservation' | translate }}
    </mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div fxLayout="row">
      <div fxFlex="60%">
        <div fxLayout="column">
          <div fxFlexFill>
            <ucap-pick-date
              [initSelected]="selectedDate"
              (selected)="onSelectedDate($event)"
            ></ucap-pick-date>
          </div>
          <div class="pick-time">
            <span class="icon-img"
              ><i class="mid mdi-clock-check-outline"></i
            ></span>
            <span class="pick-time-select">
              <ucap-pick-time
                [hour]="selectedDate.hour()"
                [hourStep]="hourStep"
                [minute]="selectedDate.minute()"
                [minuteStep]="minuteStep"
                (hourSelected)="onHourSelected($event)"
                (minuteSelected)="onMinuteSelected($event)"
              >
              </ucap-pick-time>
            </span>
            <span flFlex="1 1 auto"></span>
          </div>
        </div>
      </div>
      <div fxFlex="40%" style="margin-left: 30px;">
        <div fxLayout="column">
          <div fxFlex="40px" style="margin-top: 30px;" class="Reservation-dete">
            <span flFlexFill style="font-size: 20px;" class="text-accent-dark">
              {{ selectedDate.format('MMM DD YYYY, HH:mm') }}
            </span>
          </div>
          <div fxFlexFill>
            <mat-list role="list">
              <mat-list-item role="listitem">
                <button
                  mat-stroked-button
                  class="preset-button"
                  (click)="onClickPresetHour(1)"
                >
                  {{ 'common.units.hourLaterWith' | translate: { hour: 1 } }}
                </button>
              </mat-list-item>
              <mat-list-item role="listitem">
                <button
                  mat-stroked-button
                  class="preset-button"
                  (click)="onClickPresetHour(2)"
                >
                  {{ 'common.units.hourLaterWith' | translate: { hour: 2 } }}
                </button>
              </mat-list-item>
              <mat-list-item role="listitem">
                <button
                  mat-stroked-button
                  class="preset-button"
                  (click)="onClickPresetTommorowMorning()"
                >
                  {{ 'common.units.tomorrowMorning' | translate }}
                </button>
              </mat-list-item>
              <mat-list-item role="listitem">
                <button
                  mat-stroked-button
                  class="preset-button"
                  (click)="onClickPresetTommorowAfternoon()"
                >
                  {{ 'common.units.tomorrowAfternoon' | translate }}
                </button>
              </mat-list-item>
              <mat-list-item role="listitem">
                <button
                  mat-stroked-button
                  class="preset-button"
                  (click)="onClickPresetDay(7)"
                >
                  {{ 'common.units.weekLaterWith' | translate: { week: 1 } }}
                </button>
              </mat-list-item>
              <mat-list-item role="listitem">
                <button
                  mat-stroked-button
                  class="preset-button"
                  (click)="onClickPresetDay(30)"
                >
                  {{ 'common.units.monthLaterWith' | translate: { month: 2 } }}
                </button>
              </mat-list-item>
            </mat-list>
          </div>
        </div>
      </div>
    </div>
  </mat-card-content>
  <mat-card-actions>
    <div class="actions-container">
      <div class="actions-message text-warn-color">
        <span *ngIf="dateIsToEarly">
          {{ 'message.errors.minTimeReservation' | translate }}
        </span>
      </div>
      <div class="actions">
        <button
          mat-stroked-button
          (click)="onClickCancel()"
          class="mat-primary"
        >
          {{ 'common.messages.cancel' | translate }}
        </button>
        <button
          mat-flat-button
          [disabled]="dateIsToEarly"
          (click)="onClickSend()"
          class="mat-primary"
        >
          {{ 'message.sendReservation' | translate }}
        </button>
      </div>
    </div>
  </mat-card-actions>
</mat-card>
