<div class=" pt-1.5rem mb-2">
  <div class="flex flex-col gap-2">
    <div class="flex flex-col gap-2 w-full">
      <div class="w-full mb-2">
        <div class="font-size-18px font-weight-700  text-primary">
          <span class="whitespace-nowrap relative">
            {{'Post Eval. & Follow-up' | translate}}
          </span>
        </div>
      </div>
      <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
        <div class="box-body py-2">
          <nav class="flex rtl:space-x-reverse space-x-2">
            <a style="border-radius: 20px;width: 210px;height: 35px;"
              class=" border justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
              href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
              {{'Result Evaluate' | translate}}
            </a>
            <a style="border-radius: 20px;width: 210px;height: 35px;"
              class="border justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
              href="javascript:void(0);" id="card-type-item-2" data-hs-tab="#card-type-2" aria-controls="card-type-2">
              {{'Follow Gap' | translate}}
            </a>
            <a style="border-radius: 20px;width: 210px;height: 35px;"
              class="border justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
              href="javascript:void(0);" id="card-type-item-3" data-hs-tab="#card-type-3" aria-controls="card-type-3">
              {{'Supervisor Follow Gap' | translate}}
            </a>
          </nav>
          <div class="pt-20px">
            <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
              <app-evaluation-confirmation></app-evaluation-confirmation>
            </div>
            <div id="card-type-2" class="hidden" role="tabpanel" aria-labelledby="card-type-item-2">
              <app-gap-tracking></app-gap-tracking>
            </div>
            <div id="card-type-3" class="hidden" role="tabpanel" aria-labelledby="card-type-item-3">
              <app-gap-tracking-supervisor></app-gap-tracking-supervisor>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>