<h1 mat-dialog-title class="prevent-select">Personalizar repeticiones</h1>
<div mat-dialog-content class="prevent-select">
  <div class="custom-row">
    <p>Repetir cada</p>
    <mat-form-field style="width: 96px;" class="mr-16" appearance="outline">
      <input matInput type="number" [formControl]="frecuency">
    </mat-form-field>
    <mat-form-field style="width: 128px;" appearance="outline">
      <mat-select [formControl]="period">
        <mat-option *ngFor="let item of repeatOptions;let i = index" [value]="i">
          {{ item }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <p *ngIf="period.value! == 1">Repetir los</p>
  <mat-chip-listbox multiple *ngIf="period.value! == 1">
    <mat-chip-option [selected]="days.sun" (click)="days.sun = !days.sun">D</mat-chip-option>
    <mat-chip-option [selected]="days.mon" (click)="days.mon = !days.mon">L</mat-chip-option>
    <mat-chip-option [selected]="days.tue" (click)="days.tue = !days.tue">M</mat-chip-option>
    <mat-chip-option [selected]="days.wed" (click)="days.wed = !days.wed">W</mat-chip-option>
    <mat-chip-option [selected]="days.thu" (click)="days.thu = !days.thu">J</mat-chip-option>
    <mat-chip-option [selected]="days.fri" (click)="days.fri = !days.fri">V</mat-chip-option>
    <mat-chip-option [selected]="days.sat" (click)="days.sat = !days.sat">S</mat-chip-option>
  </mat-chip-listbox>
  <p class="mt-16">Finaliza</p>
  <mat-radio-group [(ngModel)]="endsAt" (change)="endChange($event)">
    <div class="radios-column">
      <div class="radio-row">
        <mat-radio-button value="N">Nunca</mat-radio-button>
      </div>
      <div class="radio-row">
        <mat-radio-button value="O" style="margin-bottom: 22px;">El</mat-radio-button>
        <mat-form-field appearance="outline" style="width: 70%;">
          <input matInput [matDatepicker]="picker" [formControl]="endDate" [min]="minDate">
          <mat-datepicker-toggle matIconSuffix [for]="picker">
            <mat-icon matDatepickerToggleIcon>arrow_drop_down</mat-icon>
          </mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>
      <div class="radio-row">
        <mat-radio-button value="A" style="margin-bottom: 22px;">Después de</mat-radio-button>
        <mat-form-field appearance="outline" style="flex-grow: 100;">
          <input matInput type="number" [formControl]="repetitions">
        </mat-form-field>
        <p style="margin: 0 0 22px 16px;">{{ repetitions.value! > 1 ? 'repeticiones' : 'repetición' }}</p>
      </div>
    </div>
  </mat-radio-group>
</div>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button (click)="save()">Continuar</button>
</mat-dialog-actions>