{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle="Version Diff">
  <:toolbarFilters>
    <span class="has-text-grey has-text-weight-semibold is-size-8">FROM:</span>
    <KvVersionDropdown
      @displayVersion={{this.leftVersion}}
      @metadata={{@metadata}}
      @onSelect={{fn this.handleSelect "leftVersion"}}
    />
    <span class="has-text-grey has-text-weight-semibold is-size-8">TO:</span>
    <KvVersionDropdown
      @displayVersion={{this.rightVersion}}
      @metadata={{@metadata}}
      @onSelect={{fn this.handleSelect "rightVersion"}}
    />
    {{#if this.statesMatch}}
      <div class="has-left-padding-s">
        <Icon @name="check-circle-fill" class="has-text-success" />
        <span>States match</span>
      </div>
    {{/if}}
  </:toolbarFilters>
</KvPageHeader>

{{#if this.deactivatedState}}
  <EmptyState
    @title="Version {{this.rightVersion}} has been {{this.deactivatedState}}"
    @message="The current version of this secret has been {{this.deactivatedState}}. Select another version to compare."
  />
{{else}}
  <div class="form-section visual-diff text-grey-lightest background-color-black has-top-margin-s">
    <pre data-test-visual-diff>{{sanitized-html this.visualDiff}}</pre>
  </div>
{{/if}}