@let _tool = tool();
@let showDetails = showDefaultToolDetails() || toolDetailsComponent() || _tool.error;
@let isToolExpanded = expanded();

<fieldset
  class="c8y-fieldset p-b-4 ai-tool-call__fieldset"
  [attr.aria-label]="'Tool call: ' + _tool.toolName"
>
  <button
    class="btn-clean ai-tool-call__btn"
    [attr.aria-expanded]="showDetails ? isToolExpanded : null"
    [attr.aria-controls]="showDetails ? 'tool-call-' + _tool.toolCallId : null"
    type="button"
    [attr.data-cy]="'tool-call-' + _tool.toolName"
    [disabled]="!showDetails || null"
    (click)="toggleExpanded()"
  >
    @if (isExecuting()) {
      <i
        class="icon-spin icon-14 text-primary m-r-4"
        c8yIcon="spinner"
        aria-hidden="true"
      ></i>
    } @else {
      <!-- Treat it as an error if a tool still thinks its executing when the message containing it is not -->
      @if (_tool.error || isExecuting()) {
        <i
          class="icon-14 text-danger m-r-4"
          [c8yIcon]="'exclamation-circle'"
          aria-hidden="true"
        ></i>
      } @else {
        <i
          class="icon-14 text-success m-r-4"
          [c8yIcon]="'check'"
          aria-hidden="true"
        ></i>
      }
    }
    <span class="small">{{ getToolLabel(_tool) | translate }}</span>

    @if (showDetails) {
      <i
        class="m-l-4 icon-12"
        [c8yIcon]="isToolExpanded ? 'collapse-arrow' : 'expand-arrow'"
        aria-hidden="true"
      ></i>
    }
  </button>

  <!-- If this is an artifact tool, render it - but do so lazily only on first open,
        since these components could be heavyweight (e.g. Monaco)
      -->
  @if (showDetails && (isToolExpanded || everExpanded())) {
    <div
      class="collapse tool-details m-t-8 p-8 b-r-4"
      [attr.aria-label]="'Tool details for message latest tool: ' + _tool.toolName"
      role="region"
      [collapse]="!isToolExpanded"
      [id]="'tool-call-' + _tool.toolCallId"
      [isAnimated]="true"
      data-cy="ai-tool-component"
    >
      @if (toolDetailsComponent()) {
        <ng-container
          [ngComponentOutlet]="toolDetailsComponent()"
          [ngComponentOutletInputs]="{ tool: _tool }"
        ></ng-container>
      } @else {
        @let noneLabel = '(no data)' | translate;

        <p class="text-label-small">{{ 'Tool input' | translate }}</p>
        <pre class="fit-w small">{{ _tool.input || noneLabel | json }}</pre>

        @if (_tool.type === 'tool-result') {
          <p class="text-label-small">{{ 'Tool output' | translate }}</p>
          @if (
            typeof _tool.output === 'string' || _tool.output === undefined || _tool.output === null
          ) {
            <pre class="fit-w small">{{ _tool.output || noneLabel }}</pre>
          } @else {
            <pre class="fit-w small">{{ _tool.output | json }}</pre>
          }
        }
      }
    </div>
  }
</fieldset>