<div class="item-metadata">
    <div class="button-row top d-flex mb-2">
        <button class="mr-auto btn btn-success"
                (click)="add()"><i
                class="fas fa-plus"></i>
            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.add-button" | translate}}</span>
        </button>
        <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
                [disabled]="!(hasChanges() | async)"
                (click)="discard()"><i
                class="fas fa-times"></i>
            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
        </button>
        <button class="btn btn-warning" *ngIf="isReinstatable() | async"
                (click)="reinstate()"><i
                class="fas fa-undo-alt"></i>
            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
        </button>
        <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
                (click)="submit()"><i
                class="fas fa-save"></i>
            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
        </button>
    </div>
    <table class="table table-responsive table-striped table-bordered" *ngIf="((updates$ | async)| dsObjectValues).length > 0">
        <tbody>
        <tr>
            <th>{{'item.edit.metadata.headers.field' | translate}}</th>
            <th>{{'item.edit.metadata.headers.value' | translate}}</th>
            <th class="text-center">{{'item.edit.metadata.headers.language' | translate}}</th>
            <th class="text-center">{{'item.edit.metadata.headers.edit' | translate}}</th>
        </tr>
        <tr *ngFor="let updateValue of ((updates$ | async)| dsObjectValues); trackBy: trackUpdate"
            ds-edit-in-place-field
            [fieldUpdate]="updateValue || {}"
            [metadataFields]="metadataFields$ | async"
            [url]="url"
            [ngClass]="{
                'table-warning': updateValue.changeType === 0,
                'table-danger': updateValue.changeType === 2,
                'table-success': updateValue.changeType === 1
            }">

        </tr>
        </tbody>
    </table>
    <div *ngIf="((updates$ | async)| dsObjectValues).length == 0">
      <ds-alert [content]="'item.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
    </div>
    <div class="button-row bottom">
          <div class="float-right">
              <button class="btn btn-danger mr-1" *ngIf="!(isReinstatable() | async)"
                      [disabled]="!(hasChanges() | async)"
                      (click)="discard()"><i
                      class="fas fa-times"></i> {{"item.edit.metadata.discard-button" | translate}}
              </button>
              <button class="btn btn-warning mr-1" *ngIf="isReinstatable() | async"
                      (click)="reinstate()"><i
                      class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
              </button>
              <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
                      (click)="submit()"><i
                      class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
              </button>
          </div>
      </div>
</div>
