@if (execution(); as execution) {
  <div class="xpert-execution-status py-2" [ngClass]="execution.status">
    <div class="container px-3 py-[10px] rounded-lg border-[0.5px] border-divider-regular shadow-xs">
      <div class="flex">
        <div class="flex-[33%] max-w-[120px]">
          <div class="text-sm leading-[18px] font-medium text-text-quaternary">
            {{ 'PAC.KEY_WORDS.Status' | translate: { Default: 'Status' } }}
          </div>
          <div class="indicator-container flex items-center gap-1 h-[18px] text-sm leading-3 font-semibold">
            <div class="indicator w-2 h-2 border border-solid rounded-[3px]"></div>
            <span class="uppercase">{{ execution.status | isNil: 'unknow' }}</span>
          </div>
        </div>
        <div class="flex-[33%] max-w-[152px]">
          <div class="text-sm leading-[18px] font-medium text-text-quaternary">
            {{ 'PAC.KEY_WORDS.ElapsedTime' | translate: { Default: 'Elapsed Time' } }}
          </div>
          <div class="flex items-center gap-1 h-[18px] text-sm leading-3 font-semibold">
            <span>{{ execution.elapsedTime / 1000 | number: '0.0-3' }}s</span>
          </div>
        </div>
        <div class="flex-[33%]">
          <div class="text-sm leading-[18px] font-medium text-text-quaternary">
            {{ 'PAC.KEY_WORDS.TotalTokens' | translate: { Default: 'Total Tokens' } }}
          </div>
          <div class="flex items-center gap-1 h-[18px] text-sm leading-3 font-semibold">
            <span>{{ execution.tokens | number }}</span>
          </div>
        </div>
      </div>

      @if (execution.error) {
        <div class="my-2 h-[0.5px] bg-black opacity-5"></div>
        <p class="text-xs text-text-tertiary rounded-lg p-2 whitespace-break-spaces text-red-500">
          {{ execution.error }}
        </p>
      }
    </div>
  </div>
}