<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
<h2 mat-dialog-title>{{ type === 'REG' ? 'Registro' : 'Modificación' }}  de Detalles</h2>
<mat-dialog-content class="remove-button-padding-dialog-content">
  <div class="override_content_flex" [formGroup]="formGroup">
    <div class="col-flex-12">
      <mat-form-field appearance="outline">
        <mat-label>Código</mat-label>
        <input matInput type="text" formControlName="CODIGO">
        <mat-icon matSuffix>subtitles</mat-icon>
        <mat-error *ngIf="formGroup.controls['CODIGO'].hasError('required')">El campo <b>Código</b> es requerido</mat-error>
      </mat-form-field>
    </div>
    <div class="col-flex-12">
      <mat-form-field appearance="outline">
        <mat-label>Modelo</mat-label>
        <input matInput type="text" formControlName="MODELO">
        <mat-icon matSuffix>category</mat-icon>
        <mat-error *ngIf="formGroup.controls['MODELO'].hasError('required')">El campo <b>Modelo</b> es requerido</mat-error>
      </mat-form-field>
    </div>
    <div class="col-flex-12">
      <mat-form-field appearance="outline">
        <mat-label>Moneda</mat-label>
        <input matInput formControlName="MONEDA" [matAutocomplete]="autocompleteCoin">
        <mat-autocomplete autoActiveFirstOption #autocompleteCoin>
          <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{ option }}
          </mat-option>
        </mat-autocomplete>
        <mat-icon matSuffix>currency_exchange</mat-icon>
        <mat-error *ngIf="formGroup.controls['MONEDA'].hasError('required')">El campo <b>Moneda</b> es requerido</mat-error>
      </mat-form-field>
    </div>
    <div class="col-flex-12">
      <mat-form-field appearance="outline">
        <mat-label>Precio Unitario</mat-label>
        <input matInput type="number" formControlName="PRECIO" (keyup)="validatePrice()">
        <mat-icon matSuffix>attach_money</mat-icon>
        <mat-error *ngIf="formGroup.controls['PRECIO'].hasError('required')">El campo <b>Precio Unitario</b> es requerido</mat-error>
      </mat-form-field>
    </div>
    <div class="col-flex-12">
      <mat-form-field appearance="outline">
        <mat-label>Monto Mínimo de Compra</mat-label>
        <input matInput type="number" formControlName="MONTO_MINIMO" (keyup)="minimumAmount()">
        <mat-icon matSuffix>shopping_basket</mat-icon>
        <mat-error *ngIf="formGroup.controls['MONTO_MINIMO'].hasError('required')">El campo <b>Monto Mínimo</b> es requerido</mat-error>
        <mat-error *ngIf="formGroup.controls['MONTO_MINIMO'].hasError('min')" matTooltip="El Monto Mínimo no puede ser menor al Precio Unitario">El <b>Monto Mínimo</b> no puede ser menor al <b>Precio Unitario</b></mat-error>
      </mat-form-field>
    </div>
    <div class="col-flex-12">
      <mat-form-field appearance="outline">
        <mat-label>Características</mat-label>
        <textarea matInput type="text" formControlName="CARACTERISTICAS"></textarea>
        <mat-icon matSuffix>subject</mat-icon>
        <mat-error *ngIf="formGroup.controls['CARACTERISTICAS'].hasError('required')">El campo <b>Características</b> es requerido</mat-error>
      </mat-form-field>
    </div>
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button cdkFocusInitial (click)="openDialog('CLO')">Cancelar</button>
  <button mat-button [disabled]="formGroup.invalid" (click)="openDialog(type)">
    {{ type === 'REG' ? 'Registrar' : 'Modificar' }}
  </button>
</mat-dialog-actions>
