<div class="bg-component p-t-8 p-b-8 separator-bottom text-center">
  <i
    class="text-info m-r-4"
    c8yIcon="info"
  ></i>
  {{
    versionHistoryLimitMessage
      | translate: { versionHistoryLimit: contextDashboardService.VERSION_HISTORY_SIZE_LIMIT }
  }}
</div>
<c8y-list-group class="p-t-24 p-b-24">
  <c8y-li-timeline
    *ngFor="let dashboard of dashboardHistoryExtended; index as i"
    [ngClass]="{ active: i === 0 }"
  >
    {{ dashboard.created | date: 'mediumDate' }}
    {{ dashboard.created | date: 'shortTime' }}
    <c8y-li data-cy="c8y-dashboard-version-history--history-row">
      <c8y-li-body>
        <div class="d-flex a-i-start">
          <div class="flex-grow">
            <span
              class="text-truncate-wrap"
              title="{{ dashboard.descriptionText }}"
              data-cy="c8y-dashboard-version-history--history-title"
            >
              {{ dashboard.descriptionText }}
              {{
                dashboard.historyDescription.restored
                  ? (restoredDashboardMessage
                    | translate
                      : {
                          restoredStateCreationDate: dashboard.historyDescription.restored | c8yDate
                        })
                  : ''
              }}
            </span>
            <small
              class="text-muted"
              title="{{ 'by`user`' | translate }} {{ dashboard.author }}"
              *ngIf="dashboard.author"
            >
              <div class="icon-flex">
                <i c8yIcon="c8y-user"></i>
                {{ dashboard.author }}
              </div>
            </small>
          </div>

          <span
            class="label label-primary m-l-auto"
            title="{{ 'The last saved status of the dashboard' | translate }}"
            *ngIf="i === 0"
          >
            {{ 'Current`dashboard status`' | translate }}
          </span>
          <span
            class="m-l-auto showOnHover"
            *ngIf="dashboardHistoryExtended.length > 1 && i > 0"
          >
            <button
              class="btn btn-default btn-sm"
              title="{{ 'Restore the dashboard to this status' | translate }}"
              type="button"
              (click)="revertDashboard(dashboard)"
            >
              {{ 'Restore' | translate }}
            </button>
          </span>
        </div>
      </c8y-li-body>
    </c8y-li>
  </c8y-li-timeline>
</c8y-list-group>