{#if isTrigger || testResult[0].outputs.success}

{:else}

{/if}

{ inputToggled = !inputToggled }} class="toggle splitHeader" >

Input

{#if inputToggled} {:else} {/if}

{#if inputToggled}

</div>
  {/if}

<div
    on:click={() => {
      outputToggled = !outputToggled
    }}
    class="toggle splitHeader"
  >
    <div>
      <div style="display: flex; align-items: center;">
        <span style="padding-left: var(--spacing-s);">
          <Detail size="S">Output</Detail>
        </span>
      </div>
    </div>
    <div>
      {#if outputToggled}
        <Icon size="M" name="ChevronDown" />
      {:else}
        <Icon size="M" name="ChevronRight" />
      {/if}
    </div>
  </div>
  {#if outputToggled}
    <div class="text-area-container">
      <TextArea
        disabled
        value={JSON.stringify(testResult[0].outputs, null, 2)}
      />
    </div>
  {/if}
</ModalContent>

.iconFailure {
    color: var(--spectrum-global-color-red-600);
  }

.splitHeader {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }

.toggle {
    display: flex;
    align-items: center;
  }

.text-area-container :global(textarea) {
    height: 150px;
  }
</style>