<mat-toolbar>Rendered block</mat-toolbar>
<div class="defer-details">
  @if (defer().renderedBlock) {
    <span class="pill"> &#64;{{ defer().renderedBlock }}</span>
  } @else {
    <em>Nothing rendered yet</em>
  }
</div>

@if (hasDeclaredBlocks()) {
  @let blocks = defer().blocks;
  <mat-toolbar>Declared blocks</mat-toolbar>
  <div class="defer-details">
    @if (blocks.placeholderBlock.exists) {
      <span class="pill">
        &#64;placeholder<!--
        -->{{
          blocks.placeholderBlock.minimumTime
            ? `(minimum ${blocks.placeholderBlock.minimumTime} ms)`
            : ''
        }}</span
      >
    }
    @if (blocks.loadingBlock.exists) {
      <span class="pill">&#64;loading{{ loadingBlockInfo() }}</span>
    }
    @if (blocks.hasErrorBlock) {
      <span class="pill">&#64;error</span>
    }
  </div>
}

@let triggers = defer().triggers;
<mat-toolbar>Triggers</mat-toolbar>
<div class="defer-details">
  <h3>Defer triggers</h3>
  @for (trigger of triggers.defer; track $index) {
    <span class="trigger">{{ trigger }}</span>
  }
  @if (triggers.hydrate.length > 0) {
    <h3>Hydration triggers</h3>
    @for (trigger of triggers.hydrate; track $index) {
      <span class="trigger">{{ trigger }}</span>
    }
  }
  @if (triggers.prefetch.length > 0) {
    <h3>Prefetch triggers</h3>
    @for (trigger of triggers.prefetch; track $index) {
      <span class="trigger">{{ trigger }}</span>
    }
  }

  <!--TODO(mri) What additional details would we want in sidepanel for defer blocks  -->
</div>
