@if (workPackage) {
  <div edit-form
    [resource]="workPackage"
    class="work-packages--show-view">
    <div class="toolbar-container">
      <div id="toolbar" class="wp-show--header-container">
        <wp-breadcrumb class="wp-show--header-container--breadcrumb"
          [workPackage]="workPackage"
         />
        <div class="subject-header wp-show--header-container--subject">
          <wp-subject [workPackage]="workPackage" />
        </div>
        <ul id="toolbar-items" class="toolbar-items hide-when-print wp-show--header-container--toolbar-items">
          <li class="toolbar-item hidden-for-tablet">
            <wp-create-button [routedFromAngular]="routedFromAngular" />
          </li>
          @if (displayShareButton$ | async) {
            <li class="toolbar-item"
              >
              <wp-share-button [workPackage]="workPackage" />
            </li>
          }
          @if (displayTimerButton) {
            <li class="toolbar-item hidden-for-tablet">
              <op-wp-timer-button [workPackage]="workPackage"
                 />
            </li>
          }
          @if (displayWatchButton) {
            <li class="toolbar-item">
              <wp-watcher-button [workPackage]="workPackage" />
            </li>
          }
          @if (displayReminderButton$ | async) {
            <li class="toolbar-item">
              <wp-reminder-button [workPackage]="workPackage" />
            </li>
          }
          @if ((displayNotificationsButton$ | async)) {
            <li class="toolbar-item">
              <op-work-package-mark-notification-button [workPackage]="workPackage"
                data-test-selector="mark-notification-read-button"
               />
            </li>
          }
          <li class="toolbar-item hidden-for-tablet">
            <opce-zen-mode-toggle-button />
          </li>
          <li class="toolbar-item action_menu_main" id="action-show-more-dropdown-menu">
            <button class="button dropdown-relative toolbar-icon"
              [attr.title]="text.fullView.buttonMore"
              wpSingleContextMenu
              [wpSingleContextMenu-workPackage]="workPackage">
              <op-icon icon-classes="button--icon icon-show-more" />
            </button>
          </li>
        </ul>
      </div>
    </div>
    <div class="work-packages-full-view--split-container">
      <div class="work-packages-full-view--split-left">
        <div class="work-packages--panel-inner">
          <wp-single-view [workPackage]="workPackage" />
        </div>
      </div>
      <div class="work-packages-full-view--split-right work-packages-tab-view--overflow">
        <div class="work-packages--panel-inner">
          <span class="sr-only" tabindex="-1"  [textContent]="focusAnchorLabel"></span>
          <op-wp-tabs [workPackage]="workPackage"
                      [currentTabId]="activeTab"
                      [view]="'full'"
                      [routedFromAngular]="routedFromAngular"
                      (tabSelected)="onTabSelected($event)"/>
          <div class="tabcontent"
            data-notification-selector='notification-scroll-container'>
            @for (tab of [activeTab]; track tab) {
              <op-wp-tab
                [workPackageId]="workPackage.id!"
                [tabIdentifier]="tab"
              ></op-wp-tab>
            }
          </div>
        </div>
        <div class="work-packages-full-view--resizer hidden-for-mobile hide-when-print">
          <wp-resizer [elementClass]="'work-packages-full-view--split-right'"
            [variableName]="'--full-view-split-right-width'"
          [localStorageKey]="'openProject-fullViewFlexBasis'" />
        </div>
      </div>
    </div>
  </div>
}