Ontica/Empiria.Land.Intranet

<form [formGroup]="form" empNgFormKeyDownEnter autocomplete="off" class="form-section"
  [style.margin-right.px]="-8">

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

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

      <div class="fx-item-third">
        <label>Tipo de certificado:</label>
        <emp-ng-select formControlName="certificateType"
          [items]="certificateTypesList"
          [loading]="isLoading"
          [showError]="formHelper.isControlInvalid(form.controls.certificateType)"
          (changes)="onCertificateTypeChanges($event)">
        </emp-ng-select>
      </div>

      <div class="fx-item-two-third">
        <label>Sobre:</label>
        <emp-ng-select formControlName="registrationCommand"
          [items]="issuingCommandsList"
          [placeholder]="issuingCommandsList.length === 0 ? 'Seleccione el certificado a registrar' : 'Seleccione'"
          [showError]="formHelper.isControlInvalid(form.controls.registrationCommand)"
          (changes)="onIssuingCommandChanges($event)">
        </emp-ng-select>
      </div>

    </div>

    <div class="fx-row-container" *ngIf="certificateRulesSelected.selectSubject">

        <div class="fx-item-third"></div>

        <div class="fx-item-two-third">
          <label class="ellipsis"> Buscar y seleccionar el folio real: </label>
          <emp-land-recordable-subject-searcher
            formControlName="recordableSubject"
            [recorderOffice]="recorderOffice"
            [type]="certificateRulesSelected.subjectType"
            [showError]="formHelper.isControlInvalid(form.controls.recordableSubject)">

          </emp-land-recordable-subject-searcher>
        </div>

    </div>

    <ng-container *ngIf="certificateRulesSelected.selectBookEntry">

      <div class="section-title">
        Inscripción donde está registrado el predio
      </div>

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

        <emp-land-recording-book-selector class="fx-item-size" style="--size: 100%"
          [recorderOffice]="recorderOffice"
          [checkBookEntryInput]="checkBookEntryInput"
          selectorPosition="top"
          (recordingBookSelectorEvent)="onRecordingBookSelectorEvent($event)">

        </emp-land-recording-book-selector>

      </div>

    </ng-container>

    <div class="fx-row-container" *ngIf="certificateRulesSelected.givePersonName">

      <div class="fx-item">
        <label> Nombre completo de la persona: </label>
        <input formControlName="personName"
          type="text" class="text-box"
          [class.invalid-control]="formHelper.isControlInvalid(form.controls.personName)">
      </div>

    </div>


    <div class="fx-row-container" *ngIf="certificateRulesSelected.giveRealEstateDescription">

      <div class="fx-item">
        <label> Descripción y datos del predio: </label>
        <textarea class="text-area" empNgTextareaAutoresize [maxHeightTextarea]="null" rows="1"
          formControlName="realEstateDescription"
          [class.invalid-control]="formHelper.isControlInvalid(form.controls.realEstateDescription)">

        </textarea>
      </div>

    </div>

    <mat-divider class="horizontal"></mat-divider>

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

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

        <button type="submit"
          [class.btn]="!formHelper.isFormReady(form)"
          [class.btn-action]="formHelper.isFormReady(form)"
          (click)="onSubmitCertificate()">
          Agregar el certificado
        </button>

      </div>

    </div>

  </div>

</form>