<h1 mat-dialog-title class="prevent-select">{{ title }}</h1>
<div mat-dialog-content class="prevent-select animated fadeIn">
	<div class="char-loader" *ngIf="isLoading">
		<mat-spinner></mat-spinner>
		<h2>Cargando...</h2>
	</div>
	<mat-form-field class="w-100 mt-8" appearance="outline" *ngIf="characteristic == 'date'">
		<mat-label>Seleccione una fecha</mat-label>
		<input matInput [matDatepicker]="datePicker" [formControl]="dateControl">
		<mat-datepicker-toggle matIconSuffix [for]="datePicker">
			<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
		</mat-datepicker-toggle>
		<mat-datepicker #datePicker width="320px"></mat-datepicker>
	</mat-form-field>
	<mat-form-field class="w-100 mt-8" appearance="outline" *ngIf="characteristic == 'hour'">
		<mat-label>Seleccione una hora</mat-label>
		<mat-select [formControl]="hourControl">
			<mat-option *ngFor="let hour of hours" [value]="hour">
				{{ hour }}
			</mat-option>
		</mat-select>
	</mat-form-field>
	<mat-form-field class="w-100 mt-8 animated fadeIn" appearance="outline" *ngIf="!isLoading && !hasError && characteristic == 'activator'">
		<mat-label>Selecciona un activador</mat-label>
		<mat-select [formControl]="activatorControl">
			<mat-option *ngFor="let activator of activators" [value]="activator.IDACTIVADOR">
				Activador #{{ activator.IDACTIVADOR }} - <span style="font-weight: 500;">{{ activator.TIPOACTIVACION }}</span>
			</mat-option>
		</mat-select>
	</mat-form-field>
	<mat-form-field class="w-100 mt-8" appearance="outline" *ngIf="characteristic == 'activatorType'">
		<mat-label>Selecciona un tipo de activador</mat-label>
		<mat-select [formControl]="activatorTypeControl">
			<mat-option value="Calendario">Calendario</mat-option>
			<mat-option value="Sintoma">Síntoma</mat-option>
			<mat-option value="Medida">Medida</mat-option>
			<mat-option value="Valor">Valor</mat-option>
		</mat-select>
	</mat-form-field>
	<mat-form-field class="w-100 mt-8" appearance="outline" *ngIf="characteristic == 'priority'">
		<mat-label>Selecciona una prioridad</mat-label>
		<mat-select [formControl]="priorityControl">
			<mat-option value="1">Muy alta</mat-option>
			<mat-option value="2">Alta</mat-option>
			<mat-option value="3">Media</mat-option>
			<mat-option value="4">Baja</mat-option>
		</mat-select>
	</mat-form-field>
	<mat-form-field class="w-100 mt-8" appearance="outline" *ngIf="characteristic == 'color'">
		<mat-label>Seleccione un color</mat-label>
		<input matInput [formControl]="colorControl">
		<ngx-colors matSuffix ngx-colors-trigger [formControl]="colorPickerControl"></ngx-colors>
	</mat-form-field>
	<div class="config-container" *ngIf="characteristic == 'config' && displayRepeat">
    <mat-form-field appearance="outline" class="w-100 mt-8">
      <mat-label>Seleccione una repetición</mat-label>
      <mat-select [formControl]="repeatControl" #repeat (valueChange)="changeRepeat(repeat.value)">
        <mat-option value="NR" *ngIf="date != null">
          No se repite
        </mat-option>
        <mat-option value="SE" *ngIf="date != null">
          Semanalmente los {{ dayNames[date.getDay()] }}
        </mat-option>
        <mat-option value="ME" *ngIf="date != null">
          Mensualmente los días {{ date.getDate() }}
        </mat-option>
        <mat-option value="AN" *ngIf="date != null">
          Anualmente el {{ date.getDate() }} de {{ MONTHS[date.getMonth()] }}
        </mat-option>
        <mat-option value="TD" *ngIf="date != null">
          Todos los días a partir del {{ dayNames[date.getDay()] }} {{ date.getDate() }} de {{ MONTHS[date.getMonth()] }} del {{ date.getFullYear() }}
        </mat-option>
        <mat-option value="PE" *ngIf="date != null">
          Personalizado...
        </mat-option>
      </mat-select>
      <mat-hint *ngIf="repeat.value == 'PE'" [matTooltip]="customDisplayed">{{ customDisplayed }}</mat-hint>
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100 mt-8" *ngIf="displaySign">
      <mat-label>Selecione un síntoma</mat-label>
      <mat-select [formControl]="signControl">
        <mat-option value="SIN1">Sobrecalentamiento</mat-option>
        <mat-option value="SIN2">Rechinido</mat-option>
        <mat-option value="SIN3">Fundido</mat-option>
        <mat-option value="SIN4">Vibración</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div class="config-container" *ngIf="characteristic == 'config' && displayMagnitude">
    <mat-form-field appearance="outline" class="w-100 mt-8" >
      <mat-label>Seleccione una magnitud</mat-label>
      <mat-select #magnitude [formControl]="magnitudeControl" (valueChange)="checkMagnitude(magnitude.value)">
        <mat-option *ngFor="let item of magnitudes" [value]="item.MAGNITUDE">
          {{ item.LABEL }}
        </mat-option>
        <mat-option value="OTR">Otra...</mat-option>
      </mat-select>
      <mat-hint *ngIf="customMagnitude != ''">{{ customMagnitude }}</mat-hint>
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100 mt-8" *ngIf="magnitude.value != 'OTR'">
      <mat-label>Seleccione una unidad</mat-label>
      <mat-select #unit [formControl]="unitControl" (valueChange)="checkUnit(unit.value)">
        <mat-option *ngFor="let item of getUnits(magnitude.value)" [value]="item.UNIT">
          {{ item.LABEL }}
        </mat-option>
        <mat-option value="OTR">Otra...</mat-option>
      </mat-select>
      <mat-hint *ngIf="customUnit != null && customUnit != undefined">{{ customUnit.LABEL }}</mat-hint>
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100 mt-8" *ngIf="magnitude.value == 'OTR'">
      <mat-label>Ingrese una unidad</mat-label>
      <input matInput [formControl]="unitControl">
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100 mt-8" *ngIf="displayValues">
      <mat-label>Introduzca el valor mínimo</mat-label>
      <input matInput [formControl]="minValueControl" (input)="minValueControl.markAsTouched()">
      <mat-error *ngIf="minValueControl.hasError('required')">Este campo es obligatorio</mat-error>
      <mat-error *ngIf="minValueControl.hasError('pattern')">El valor ingresado es inválido</mat-error>
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100 mt-8" *ngIf="displayValues">
      <mat-label>Introduzca el valor máximo</mat-label>
      <input matInput [formControl]="maxValueControl" (input)="maxValueControl.markAsTouched()">
      <mat-error *ngIf="maxValueControl.hasError('required')">Este campo es obligatorio</mat-error>
      <mat-error *ngIf="maxValueControl.hasError('pattern')">El valor ingresado es inválido</mat-error>
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100 mt-8" *ngIf="displayComparison">
      <mat-label>Seleccione una comparación</mat-label>
      <mat-select [formControl]="comparisonControl">
        <mat-option value="AC">Acumulado</mat-option>
        <mat-option value="UR">Último registro</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100 mt-8" *ngIf="displayComparison">
      <mat-label>Introduzca el valor límite</mat-label>
      <input matInput [formControl]="limitValueControl" (input)="limitValueControl.markAsTouched()">
      <mat-error *ngIf="limitValueControl.hasError('required')">Este campo es reqerido</mat-error>
      <mat-error *ngIf="limitValueControl.hasError('pattern')">El valor ingresado es inválido</mat-error>
    </mat-form-field>
  </div>
</div>
<div mat-dialog-actions align="end">
	<button mat-button mat-dialog-close>Cancelar</button>
	<button mat-button (click)="updateCharacteristic()">Continuar</button>
</div>