<div class="container">
  <div class="row">
    <div class="col-12">
      <h1 class="border-bottom">{{'item.edit.head' | translate}}</h1>
      <div class="pt-2">
        @if (pages.length > 0) {
          <ul class="nav nav-tabs justify-content-start" role="tablist">
            @for (page of pages; track page) {
              <li class="nav-item" role="presentation">
                @if ((page.enabled | async)) {
                  <a
                    [attr.aria-selected]="page.page === currentPage"
                    class="nav-link"
                    [ngClass]="{'active' : page.page === currentPage}"
                    [routerLink]="['./' + page.page]"
                    [attr.data-test]="page.page"
                    role="tab">
                    {{'item.edit.tabs.' + page.page + '.head' | translate}}
                  </a>
                }
                <span [ngbTooltip]="'item.edit.tabs.disabled.tooltip' | translate">
                  @if ((page.enabled | async) !== true) {
                    <button
                      class="nav-link disabled">
                      {{'item.edit.tabs.' + page.page + '.head' | translate}}
                    </button>
                  }
                </span>
              </li>
            }
          </ul>
        }
        <div class="tab-pane active">
          <div class="mb-4">
            <router-outlet></router-outlet>
          </div>
          <div class="button-row bottom">
            <div class="text-end">
              <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
