@if (configuration) {
  <div
    class="work-packages-embedded-view--container loading-indicator--location"
     [ngClass]="{ '-hierarchy-disabled': !configuration.hierarchyToggleEnabled,
                  '-compact-tables': configuration.compactTableStyle,
                  '-external-height': externalHeight }"
    [attr.data-indicator-name]="uniqueEmbeddedTableName">
    @if (renderTable) {
      <!-- Filter container (if requested) -->
      @if (configuration.withFilters) {
        <op-filter-container [showFilterButton]="configuration.showFilterButton"
          [filterButtonText]="configuration.filterButtonText" />
      }
      <!-- TABLE + TIMELINE horizontal split -->
      @if (!configuration.isCardView) {
        <wp-table [projectIdentifier]="projectIdentifier"
          [configuration]="configuration"
          (itemClicked)="handleWorkPackageClicked($event)"
          (stateLinkClicked)="openStateLink($event)"
        class="work-packages-split-view--tabletimeline-content" />
      }
      <!-- GRID representation of the WP -->
      <div class="work-packages-embedded-view--grid-view" >
        @if (configuration.isCardView) {
          <wp-grid (itemClicked)="handleWorkPackageClicked($event)"
            (stateLinkClicked)="openStateLink($event)"
            [configuration]="configuration" />
        }
      </div>
      <!-- Footer -->
      <div class="work-packages-split-view--tabletimeline-footer hide-when-print">
        <wp-table-pagination [hideForSinglePageResults]="true" />
      </div>
    }
    @if (error) {
      <div class="op-toast -error">
        <span [textContent]="error.message || error"></span>
      </div>
    }
  </div>
}