Untitled

<h5>
  {{
    "risk-and-prevention.risk_identification.dialog.formSecondary.countTotal"
      | translate
  }}
  <span style="color: green; font-weight: bold">{{
    dataItems.totalTickets
  }}</span>
</h5>
<div class="h-[348px] max-h-[348px]: overflow-y-scroll">
  <ng-container>
    <div>
      <form [formGroup]="inputForm" (ngSubmit)="saveForm()">
        <div formArrayName="events">
          <div
            *ngFor="let data of events.controls; let i = index"
            [formGroupName]="i"
            class="mb-1"
          >
            <div
              class="flex flex-row"
              [ngClass]="{
                'green-border': data.value.probability === 0,
                blink: data.value.probability === 0
              }"
            >
              <div class="flex flex-col p-2">
                <label>
                  {{
                    "risk-and-prevention.risk_identification.dialog.formSecondary.subcategory"
                      | translate
                  }}</label
                >
                <input
                  type="text"
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-black rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                  formControlName="subcategory"
                  ngDefaultControl
                />
              </div>
              <div class="flex flex-col p-2">
                <label>
                  {{
                    "risk-and-prevention.risk_identification.dialog.formSecondary.incident"
                      | translate
                  }}</label
                >
                <input
                  type="text"
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-black rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                  formControlName="incident"
                  ngDefaultControl
                />
              </div>
              <div class="flex flex-col p-2">
                <label>
                  {{
                    "risk-and-prevention.risk_identification.dialog.formSecondary.severity"
                      | translate
                  }}</label
                >
                <input
                  type="text"
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-black rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                  formControlName="severity"
                  ngDefaultControl
                />
              </div>
              <div class="flex flex-col p-2">
                <label>
                  {{
                    "risk-and-prevention.risk_identification.dialog.formSecondary.count"
                      | translate
                  }}</label
                >
                <input
                  type="text"
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-black rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                  formControlName="ticketCount"
                  ngDefaultControl
                />
              </div>
              <div class="flex flex-col p-2">
                <label>
                  {{
                    "risk-and-prevention.risk_identification.dialog.formSecondary.probability"
                      | translate
                  }}</label
                >
                <input
                  type="number"
                  class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-black rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                  formControlName="probability"
                  ngDefaultControl
                  appNoNegativeNumber
                />
              </div>
            </div>
          </div>
        </div>
        <button
          mat-raised-button
          color="accent"
          type="submit"
          class="bg-[#0729da] next"
        >
          {{
            "risk-and-prevention.risk_identification.dialog.formSecondary.btn.name"
              | translate
          }}
        </button>
      </form>
    </div>
  </ng-container>
</div>