<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="d-flex justify-content-between border-bottom">
        <h1>{{ type + '.edit.head' | translate }}</h1>
        <div class="my-auto">
          <a class="btn btn-danger"
             [routerLink]="((type === 'community') ? '/communities/' : '/collections/') + (dsoRD$ | async)?.payload.uuid + '/delete'"
             data-test="delete-button">
            <i class="fas fa-trash" aria-hidden="true"></i> {{type + '.edit.delete' | translate}}</a>
        </div>
      </div>
      <div class="pt-2">
        <ul class="nav nav-tabs justify-content-start mb-2" role="tablist">
          <li *ngFor="let page of pages" class="nav-item" role="presentation">
            <a class="nav-link" role="tab"
               [attr.aria-selected]="page === currentPage"
               [ngClass]="{'active' : page === currentPage}"
               [routerLink]="['./' + page]"
               [attr.data-test]="page">
              {{ type + '.edit.tabs.' + page + '.head' | translate}}
            </a>
          </li>
        </ul>
        <div class="tab-pane active">
          <div class="mb-4">
            <router-outlet></router-outlet>
          </div>
          <div class="col-12 text-right">
            <a *ngIf="!hideReturnButton" [routerLink]="getPageUrl((dsoRD$ | async)?.payload)" class="btn btn-outline-secondary">
              <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type + '.edit.return' | translate }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
