@if(policy) {
  <!-- Datos del producto -->
<section class="section-summary-view-policy">
  <div class="title-card-policy-view">
    <lucide-angular [img]="circleCheck" [size]="'20'" [color]="'#2DC579'" class="w-auto p-0"></lucide-angular>
    <h5 class="mb-0  size-16">Datos del producto</h5>
  </div>
  <div class="d-flex">
    @if(policy.productComponentMarketingName || policy.planProductComponentMarketingName) {
    <div class="col-lg-6 col-sm-12">
      <section class="input-description">
        <div class="label">Nombre</div>
        @if (policy.planProductComponentMarketingName) {
        <div class="description"> {{policy.planProductComponentMarketingName}}</div>
        } @else {
        <div class="description">{{policy.productComponentMarketingName}}</div>
        }
      </section>
    </div>
    <div class="col-lg-3">
      <section class="input-description">
        <div class="label">Clase póliza</div>
        <div class="description">{{findEnumNameByCode("BroadLineOfBusinessCodeList", policy.policyClassCode)}}
        </div>
      </section>
    </div>
    <div class="col-lg-3">
      <section class="input-description">
        <div class="label">Fecha inicial (desde - hasta)</div>
        <div class="description">{{getDate(policy.effectiveStartDateTime)}} -
          {{getDate(policy.effectiveEndDateTime)}}</div>
      </section>
    </div>
    }
  </div>
</section>
<!--Coberturas-->
@if(policy.coverageList && policy.coverageList.length > 0){
<section class="section-summary-view-policy">
  <div class="title-card-policy-view">
    <lucide-angular [img]="circleCheck" [size]="'20'" [color]="'#2DC579'" class="w-auto p-0"></lucide-angular>
    <h5 class="mb-0  size-16">Coberturas</h5>
    <div class="quantity-container">
      <div class="quantity-length">{{policy.coverageList.length}}</div>
    </div>
  </div>
  <table mat-table [dataSource]="dataSource" class="table-policy-view">
    @for (column of tableColumns; track column) {
    <ng-container [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef class="th-detail-policy-coverage">
        {{column.header}}
      </th>
      <td mat-cell *matCellDef="let element ; let i = index" class="td-detail-policy-coverage">
        @if(column.columnDef === 'index') {
        <div class="bg-td">
          {{i+1}}
        </div>
        } @else {
        <div [innerHTML]="element[column.columnDef]"></div>
        }
      </td>
    </ng-container>
    }
    <tr mat-header-row *matHeaderRowDef="tableDisplayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: tableDisplayedColumns"></tr>
  </table>
  @if(policy.coverageList.length > 4) {
  <div class="d-flex w-100 justify-content-end">
    <button class="btn-policy-view-more btn border-0 p-0 " (click)="showMoreCoverages()">
      {{ isShowMoreCoverageList ? SHOW_LESS + ' coberturas': SHOW_MORE_COVERAGE_LIST }}
    </button>
  </div>
  }
</section>
}
<!--Contratante-->
<section class="section-summary-view-policy">
  <div class="title-card-policy-view">
    <lucide-angular [img]="circleCheck" [size]="'20'" [color]="'#2DC579'" class="w-auto p-0"></lucide-angular>
    <h5 class="mb-0  size-16">Datos del contratante</h5>
  </div>
  <div class="row m-0">
    <div class="col-lg-3 col-sm-12">
      <section class="input-description">
        <div class="label">Nombre</div>
        <div class="description"> {{policy.agreementHolder.agreementHolderFullName}}</div>
      </section>
    </div>
    <div class="col-lg-3 col-sm-12">
      <section class="input-description">
        <div class="label">Identificador (RUT)</div>
        <div class="description"> {{getFormatIdentifier(policy.agreementHolder.party.identifier)}}</div>
      </section>
    </div>
    <div class="col-lg-3 col-sm-12">
      <section class="input-description">
        <div class="label">Teléfono móvil</div>
        <div class="description">{{getContactData(policy.agreementHolder.party.contactPointList,'cellphone' )}}
        </div>
      </section>
    </div>
    <div class="col-lg-3 col-sm-12">
      <section class="input-description">
        <div class="label">Correo electrónico</div>
        <div class="description"> {{getContactData(policy.agreementHolder.party.contactPointList,'email')}}
        </div>
      </section>
    </div>
  </div>
</section>
}
<!--Productores-->
@if(policy.agreementProducerList && policy.agreementProducerList.length > 0){
<section class="section-summary-view-policy">
  <div class="title-card-policy-view">
    <lucide-angular [img]="circleCheck" [size]="'20'" [color]="'#2DC579'" class="w-auto p-0"></lucide-angular>
    <h5 class="mb-0  size-16">Datos del productor</h5>
  </div>
  <table mat-table [dataSource]="dataSourceProducer" class="table-policy-view">
    @for (column of tableColumnsProducer; track column) {
    <ng-container [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef class="th-detail-policy-coverage">
        {{column.header}}
      </th>
      <td mat-cell *matCellDef="let element ; let i = index" class="td-detail-policy-coverage">
        @if(column.columnDef === 'index') {
        <div class="bg-td">
          {{i+1}}
        </div>
        } @else {
        <div [innerHTML]="element[column.columnDef]"></div>
        }
      </td>
    </ng-container>
    }
    <tr mat-header-row *matHeaderRowDef="tableDisplayedColumnsProducer"></tr>
    <tr mat-row *matRowDef="let row; columns: tableDisplayedColumnsProducer"></tr>
  </table>
</section>
}
<!--Opciones de pago-->
@if(policy.financialOptionList && policy.financialOptionList.length > 0 && policy.financialOptionList[0].collectionMethodCode){
<section class="section-summary-view-policy">
  <div class="title-card-policy-view">
    <lucide-angular [img]="circleCheck" [size]="'20'" [color]="'#2DC579'" class="w-auto p-0"></lucide-angular>
    <h5 class="mb-0  size-16">Opción de pago</h5>
  </div>
  <div class="d-flex">
    @if(policy.financialOptionList[0].collectionMethodCode) {
      <div class="col-lg-3 col-sm-12">
        <section class="input-description">
          <div class="label">Vía de cobro</div>
          <div class="description">{{findEnumNameByCode("CollectionMethodTypeCodeList",policy.financialOptionList[0].collectionMethodCode)}}
          </div>
        </section>
      </div>
    }
    @if(policy.financialOptionList[0].financialSchedulerList[0].paymentFrequencyCode) {
      <div class="col-lg-3 col-sm12">
        <section class="input-description">
          <div class="label">Periodicidad</div>
          <div class="description">{{findEnumNameByCode("FrequencyCodeList",policy.financialOptionList[0].financialSchedulerList[0].paymentFrequencyCode)}}
          </div>
        </section>
      </div>
    }
    @if(policy.financialOptionList[0].financialSchedulerList[0].paymentQuantity) {
      <div class="col-lg-3 col-sm12">
        <section class="input-description">
          <div class="label">Cantidad cuotas</div>
          <div class="description">{{policy.financialOptionList[0].financialSchedulerList[0].paymentQuantity}}
          </div>
        </section>
      </div>
    }
    @if(policy.financialOptionList[0].financialSchedulerList[0].dayOfMonth) {
      <div class="col-lg-3 col-sm12">
        <section class="input-description">
          <div class="label">Día de pago</div>
          <div class="description">{{policy.financialOptionList[0].financialSchedulerList[0].dayOfMonth}}
          </div>
        </section>
      </div>
    }
  </div>
</section>
} 
<!--Materia asegurada-->
@if(policy.insuredObjectList && policy.insuredObjectList.length > 0){
<section class="section-summary-view-policy">
  <div class="title-card-policy-view">
    <lucide-angular [img]="circleCheck" [size]="'20'" [color]="'#2DC579'" class="w-auto p-0"></lucide-angular>
    <h5 class="mb-0  size-16">Detalles de materia asegurada</h5>
  </div>
  <table mat-table [dataSource]="dataSourceInsuredObject" class="table-policy-view">
    @for (column of tableColumnsInsuredObject; track column) {
    <ng-container [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef class="th-detail-policy-coverage">
        {{column.header}}
      </th>
      <td mat-cell *matCellDef="let element ; let i = index" class="td-detail-policy-coverage">
        @if(column.columnDef === 'index') {
        <div class="bg-td">
          {{i+1}}
        </div>
        } @else {
        <div [innerHTML]="element[column.columnDef]"></div>
        }
      </td>
    </ng-container>
    }
    <tr mat-header-row *matHeaderRowDef="tableDisplayedColumnsInsuredObject"></tr>
    <tr mat-row *matRowDef="let row; columns: tableDisplayedColumnsInsuredObject"></tr>
  </table>
</section>
} 
<!--Asegurados-->
@if(policy.insuredList && policy.insuredList.length > 0){
<section class="section-summary-view-policy">
  <div class="title-card-policy-view">
    <lucide-angular [img]="circleCheck" [size]="'20'" [color]="'#2DC579'" class="w-auto p-0"></lucide-angular>
    <h5 class="mb-0  size-16">Datos de los asegurados</h5>
    <div class="quantity-container">
      <div class="quantity-length">{{policy.insuredList.length}}</div>
    </div>
  </div>
  <table mat-table [dataSource]="dataSourceInsured" class="table-policy-view">
    @for (column of tableColumnsInsured; track column) {
    <ng-container [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef class="th-detail-policy-coverage">
        {{column.header}}
      </th>
      <td mat-cell *matCellDef="let element ; let i = index" class="td-detail-policy-coverage">
        @if(column.columnDef === 'index') {
        <div class="bg-td">
          {{i+1}}
        </div>
        } @else {
        <div [innerHTML]="element[column.columnDef]"></div>
        }
      </td>
    </ng-container>
    }
    <tr mat-header-row *matHeaderRowDef="tableDisplayedColumnsInsured"></tr>
    <tr mat-row *matRowDef="let row; columns: tableDisplayedColumnsInsured"></tr>
  </table>
  @if(policy.insuredList.length > 4) {
  <div class="d-flex w-100 justify-content-end">
    <button class="btn-policy-view-more btn border-0 p-0 " (click)="showMoreInsured()">
      {{ isShowMoreInsuredList ? SHOW_LESS + ' asegurados' : SHOW_MORE_INSURED_LIST }}
    </button>
  </div>
  }
</section>
} 
<!--Beneficiario-->
@if(policy.beneficiaryList && policy.beneficiaryList.length > 0){
<section class="section-summary-view-policy">
  <div class="title-card-policy-view">
    <lucide-angular [img]="circleCheck" [size]="'20'" [color]="'#2DC579'" class="w-auto p-0"></lucide-angular>
    <h5 class="mb-0  size-16">Datos de los beneficiarios</h5>
    <div class="quantity-container">
      <div class="quantity-length">{{policy.beneficiaryList.length}}</div>
    </div>
  </div>
  @if(policy.beneficiaryList[0].party){
  <table mat-table [dataSource]="dataSourceBeneficiary" class="table-policy-view">
    @for (column of tableColumnsBeneficiary; track column) {
    <ng-container [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef class="th-detail-policy-coverage">
        {{column.header}}
      </th>
      <td mat-cell *matCellDef="let element ; let i = index" class="td-detail-policy-coverage">
        @if(column.columnDef === 'index') {
        <div class="bg-td">
          {{i+1}}
        </div>
        } @else {
        <div [innerHTML]="element[column.columnDef]"></div>
        }
      </td>
    </ng-container>
    }
    <tr mat-header-row *matHeaderRowDef="tableDisplayedColumnsBeneficiary"></tr>
    <tr mat-row *matRowDef="let row; columns: tableDisplayedColumnsBeneficiary"></tr>
  </table>
  @if(policy.beneficiaryList.length > 4) {
  <div class="d-flex w-100 justify-content-end">
    <button class="btn-policy-view-more btn border-0 p-0 " (click)="showMoreBeneficiary()">
      {{ isShowMoreBeneficiaryList ? SHOW_LESS + ' beneficiarios' : SHOW_MORE_BENEFICIARY_LIST }}
    </button>
  </div>
  }
  }
</section>
}