<div class="container" *ngVar="(collectionRD$ | async)?.payload as collection">
  <div class="row">
    <div class="col-12" *ngVar="(itemRD$ | async) as itemRD">
      @if (itemRD?.hasSucceeded) {
        <h1 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: dsoNameService.getName(collection) } }}</h1>
        <ds-dso-edit-metadata [updateDataService]="itemTemplateService" [dso]="itemRD?.payload"></ds-dso-edit-metadata>
        <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
      }
      @if (itemRD?.isLoading) {
        <ds-loading [message]="'collection.edit.template.loading' | translate"></ds-loading>
      }
      @if (itemRD?.hasFailed) {
        <ds-alert [type]="AlertTypeEnum.Error" [content]="'collection.edit.template.error' | translate"></ds-alert>
      }
    </div>
  </div>
</div>
