Untitled

<div class="invest-flex__breadcrumb">
  <orq-breadcrumb [items]="breadcrumbItems"> </orq-breadcrumb>
</div>

<h1 class="invest-flex__title--size24">Bloqueios</h1>

<ng-container *ngIf="!isFailure; else emptyStateError">
  <article class="invest-flex__section-detail">
    <h1 class="invest-flex__title">Detalhamento dos bloqueios</h1>
    <p class="invest-flex__text">
      Os bloqueios são valores do saldo Invest Flex que não estão mais
      disponíveis para movimentação, pois serão utilizados em operações
      programadas para ocorrer em sua conta. É importante destacar que nenhuma
      taxa é cobrada sobre valores bloqueados.
    </p>
    <div class="invest-flex__card-items">
      <div class="invest-flex__card">
        <h2 class="invest-flex__card-title">Bloqueios de saldo</h2>
        <p class="invest-flex__card-text" *ngIf="accountSummaryBlocked">
          {{ accountSummaryBlocked.blockedBalance | currency : "R$" }}
        </p>
        <orq-shimmer
          *ngIf="!accountSummaryBlocked"
          type="text"
          size="large"
          [rows]="1"
          [loading]="true"
        >
        </orq-shimmer>
      </div>
      <orq-divider
        [verticalSize]="53"
        [size]="dividerSize.heavy"
        [orientation]="dividerOrientation.vertical"
      >
      </orq-divider>

      <div class="invest-flex__card">
        <h2 class="invest-flex__card-title">Bloqueios de Invest Flex</h2>
        <p class="invest-flex__card-text" *ngIf="accountSummaryBlocked">
          {{ accountSummaryBlocked.creditLimit.blocked | currency : "R$" }}
        </p>
        <orq-shimmer
          *ngIf="!accountSummaryBlocked"
          type="text"
          size="large"
          [rows]="1"
          [loading]="true"
        >
        </orq-shimmer>
      </div>
      <orq-divider
        [verticalSize]="53"
        [size]="dividerSize.heavy"
        [orientation]="dividerOrientation.vertical"
      >
      </orq-divider>

      <div class="invest-flex__card">
        <h2 class="invest-flex__card-title">Total bloqueado</h2>
        <p class="invest-flex__card-text" *ngIf="accountSummaryBlocked">
          {{ accountSummaryBlocked.totalBlocked | currency : "R$" }}
        </p>
        <orq-shimmer
          *ngIf="!accountSummaryBlocked"
          type="text"
          size="large"
          [rows]="1"
          [loading]="true"
        >
        </orq-shimmer>
      </div>
    </div>

    <div>
      <orq-link
        (click)="openDialog()"
        [size]="linkSize.large"
        [underline]="true"
      >
        Saiba mais
      </orq-link>
    </div>
  </article>
</ng-container>

<ng-container *ngIf="!isFailureDetail; else emptyStateError">
  <orq-table-design>
    <table class="invest-flex__block-table">
      <thead *ngIf="blockedBalanceDetails && blockedBalanceDetails.length > 0">
        <tr>
          <th>Descrição</th>
          <th class="invest-flex__block-table__cell--right">Valor</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngIf="blockedBalanceDetails !== null; else shimmer">
          <ng-container
            *ngIf="blockedBalanceDetails.length > 0; else emptyStateResult"
          >
            <tr *ngFor="let item of blockedBalanceDetails">
              <td>
                <span *ngIf="item">{{ item.text }}</span>
              </td>
              <td class="invest-flex__block-table__cell--right">
                <span *ngIf="item">{{ item.value | currency : "R$" }}</span>
              </td>
            </tr>
          </ng-container>
        </ng-container>
      </tbody>
      <tfoot *ngIf="blockedBalanceDetails && blockedBalanceDetails.length > 0">
        <tr>
          <td>
            <orq-shimmer
              type="text"
              size="small"
              [rows]="1"
              [loading]="true"
              [hidden]="blockedBalanceDetails"
            >
            </orq-shimmer>
            <span *ngIf="blockedBalanceDetails?.length">Total bloqueado</span>
          </td>
          <td class="invest-flex__block-table__cell--right">
            <orq-shimmer
              type="text"
              size="small"
              [rows]="1"
              [loading]="true"
              [hidden]="blockedBalanceDetails"
            >
            </orq-shimmer>
            <span *ngIf="blockedBalanceDetails?.length">R$ 5.000,00</span>
          </td>
        </tr>
      </tfoot>
    </table>
  </orq-table-design>
</ng-container>

<section class="invest-flex__actions">
  <orq-button
    [type]="buttonType.button"
    [appearance]="buttonAppearence.line"
    [size]="buttonSize.medium"
    ($click)="back()"
  >
    Voltar
  </orq-button>
</section>

<orq-modal
  *ngIf="isDialogVisible"
  class="invest-flex__dialog"
  title="Bloqueios"
  [type]="dialogType.dialog"
  [description]="dialogDescription"
  [align]="dialogAlign.center"
  [showActions]="false"
  [visible]="true"
  [size]="dialogSize.small"
  ($close)="closeDialog($event)"
>
</orq-modal>

<ng-template #emptyStateError>
  <article class="invest-flex__section-detail">
    <btg-empty-state [emptyStateConfig]="errorSectionConfig"></btg-empty-state>
  </article>
</ng-template>

<ng-template #emptyStateResult>
  <btg-empty-state
    [emptyStateConfig]="emptySectionNoResultsConfig"
  ></btg-empty-state>
</ng-template>

<ng-template #shimmer>
  <tr *ngFor="let item of [1, 2, 3]" [hidden]="blockedBalanceDetails !== null">
    <td>
      <orq-shimmer type="text" size="small" [rows]="1" [loading]="true">
      </orq-shimmer>
    </td>
    <td>
      <orq-shimmer type="text" size="small" [rows]="1" [loading]="true">
      </orq-shimmer>
    </td>
  </tr>
</ng-template>




  // Empty section - No results
  public emptySectionNoResultsConfig: EmptyState = {
    actionIcon: 'swap-circle',
    actionLabel: 'Tentar novamente',
    inverse: false,
    orientation: EEmptyStateOrientation.horizontal,
    size: EEmptyStateSize.large,
    src: 'images/empty-state/icon-search-empty.png',
    subtitle: '',
    title: 'Nenhum produto foi encontrado nesta categoria',
    viewAction: false,
  };