Untitled

<div class="flex-container">

          <div ngbAccordion *ngIf="data.length > 0 " class="full-width">

            <div ngbAccordionItem [collapsed]="false" [id]="'tab-'+i"

                       *ngFor="let risk of data | paginate: { itemsPerPage: maxPerPage, currentPage: page };let i = index"

                       class="full-width">

              <ng-template ngbPanelHeader>

                <div ngbAccordionButton class="full-width cursor-pointer flex-container gap-0"

                     [ngClass]="{'bg-gray': i % 2 == 0}" style="padding: 10px;">

                  <!--                  <div class="fw-700 fs-16px flex-container align-content-center text-center" style="width: 10%;">-->

                  <!--                    {{ risk.id }}-->

                  <!--                  </div>-->

                  <div class="fw-700 fs-16px flex-container  flex-start align-content-center"

                       style="padding-right:20px;width: 20%;">

                    {{ risk.sub_category.category?.name }}

                  </div>

                  <div class="fw-700 fs-16px flex-container flex-start align-content-center"

                       style="padding-right:20px;width: 20%;">

                    {{ risk.sub_category.name }}

                  </div>

                  <div class="fw-700 fs-16px flex-container align-content-center"

                       style="width: 20%;">

                    <div class="badge badge-tab blackImp flex-container align-content-center"

                         [ngClass]="'level-' +  risk.inherited_risk_bracket">

                      {{ "risk-" + (risk.inherited_risk_bracket - 1) + '-m'  | translate }}

                    </div>

                  </div>

                  <div class="fw-700 fs-16px flex-container align-content-center"

                       style="width: 20%;">

                    {{risk.residual_risk }}

                  </div>

                  <div class="flex-container align-content-center" style=";width: 20%;">

                    <i class="black hover-gray fs-20px fa-solid cursor-pointer" *ngIf="user?.role?.['risk_modify']"

                       [ngClass]="{'fa-pen-to-square': user?.role?.['risk_modify'] ,'fa-eye': !user?.role?.['risk_modify']}"

                       (click)="openEditRisk(risk)"

                    ></i>

                    <i class="black hover-gray fa-solid fa-copy fs-20px fa-solid cursor-pointer"

                       *ngIf="user?.role?.['risk_create']"

                       (click)="copyRisk(risk)"></i>

                    <confirmation-modal

                      *ngIf="user?.role?.['risk_delete']"

                      [action]="'delete-risk' | translate"

                      [icon]="'black hover-red fs-20px fa-solid fa-trash' | translate"

                      (confirmation)="deleteRisk(risk)"

                    >

                    </confirmation-modal>

                  </div>

                </div>

              </ng-template>

              <div ngbAccordionCollapse>

                <div ngbAccordionBody>

                  <ng-template>

                    <div class="flex-container full-width" style="gap:5px">

                      <div class="tab fs-18px full-width">

                      <span class="no-hover" style="margin: 30px">

                        <i class="gray fa-solid fa-arrow-turn-up fa-lg" style="transform: rotate(90deg)"></i>

                      </span>

                        <button class="tabLinks fw-700 btn-active" (click)="openTab($event, '#tab-control')">

                          {{'control' | translate }}

                        </button>

   

                        <button class="no-hover fw-700" (click)="activeId = '-1'">

                        <span class="pink">

                          <i class="pink fa-solid fa-circle-plus"></i>

                          <span> {{'close' | translate }}</span>

                        </span>

                        </button>

                      </div>

                      <div id="tab-control" class="tabContent display full-width">

                        <admin-tab-control-risk [risk]="risk"></admin-tab-control-risk>

                      </div>

                    </div>

                  </ng-template>

                </div>

               

              </div>

             

            </div>

          </div>