Ontica/Empiria.Land.Intranet

<emp-ng-spinner #spinner [visible]="isLoading"></emp-ng-spinner>

<form [formGroup]="form" [empNgSpinnerHost]="spinner" empNgFormKeyDownEnter
  autocomplete="off" class="form-section">

  <div class="fx-column-container fx-gap-three-quarter sm-fx-gap-none">

    <div class="fx-row-container sm-fx-column-container">

      <div class="fx-item-size sm-fx-item" style="--size: 290px">
        <label>Folio electrónico:</label>

        <div class="fx-row-container">
          <input type="text" class="text-box fx-item-size"
            [ngStyle]="{'--size': showElectronicHistoryButton ? '182px' : '282px'}"
            formControlName="electronicID">
          <button *ngIf="showElectronicHistoryButton"
            type="button" class="btn fx-item-size" style="--size: 92px"
            [style.marginTop.px]="2"
            (click)="onElectronicHistoryClicked()">Historia</button>
        </div>
      </div>

      <div class="fx-item">
        <label>Oficialía:</label>
        <emp-ng-select formControlName="recorderOfficeUID"
          [items]="recorderOfficeList"
          [showError]="formHelper.isControlInvalid(form.controls.recorderOfficeUID)">
        </emp-ng-select>
      </div>
    </div>


    <div class="fx-row-container sm-fx-column-container">

      <div class="fx-item-size sm-fx-item" style="--size: 290px">
        <label>Tipo:</label>
        <emp-ng-select
          formControlName="kind"
          [bindValue]="'name'"
          [items]="kindsList"
          [showError]="formHelper.isControlInvalid(form.controls.kind)">
        </emp-ng-select>
      </div>

      <div class="fx-item-size sm-fx-item" style="--size: calc(100% - 290px)">
        <label>Nombre o denominación:</label>

        <textarea class="text-area" empNgTextareaAutoresize [maxHeightTextarea]="null" rows="1"
          formControlName="name"
          [class.invalid-control]="formHelper.isControlInvalid(form.controls.name)">
        </textarea>
      </div>

    </div>

    <div class="fx-row-container sm-fx-column-container">
      <div class="fx-item-one">
        <label *ngIf="!isAssociation">Descripción (opcional):</label>

        <textarea class="text-area" empNgTextareaAutoresize [maxHeightTextarea]="null" rows="1"
          formControlName="description"
          [class.invalid-control]="formHelper.isControlInvalid(form.controls.description)">
        </textarea>

      </div>
    </div>

    <div class="fx-row-container">

      <div class="fx-item fx-start fx-items-center">

        <button *ngIf="editionMode" (click)="enableEditor(false)" class="btn">
          Descartar Cambios
        </button>

      </div>

      <div class="fx-item fx-center fx-items-center">

        <ng-container>

          <span class="pr-1">{{editionMode ? 'Marcar como:' : 'Marcado como:'}}</span>

          <emp-ng-select
            formControlName="status"
            bindLabel="statusName"
            bindValue="status"
            [items]="statusList"
            [showError]="formHelper.isControlInvalid(form.controls.status)"
            (changes)="onStatusChanges($event)"
            [style.width.px]="125">
          </emp-ng-select>

        </ng-container>

      </div>

      <div class="fx-item fx-end fx-items-center">

        <button *ngIf="!readonly && !editionMode" class="btn-action"
          (click)="enableEditor(true)">
          Editar
        </button>

        <button *ngIf="editionMode"
          [class.btn]="!formHelper.isFormReady(form)"
          [class.btn-action]="formHelper.isFormReady(form)"
          (click)="onSubmitClicked()" >
          Guardar
        </button>

      </div>

    </div>

  </div>

</form>