{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<Page::Header @title="Version Diff">
  <:breadcrumbs>
    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
  </:breadcrumbs>

  <:actions>
    <CodeGenerator::Policy::Flyout />
  </:actions>
</Page::Header>

<KvTabsToolbar>
  <: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>
</KvTabsToolbar>

{{#if this.deactivatedState}}
  <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
    <A.Header
      @title="Version {{this.rightVersion}} has been {{this.deactivatedState}}"
      @titleTag="h2"
      data-test-empty-state-title
    />
    <A.Body
      @text="The current version of this secret has been {{this.deactivatedState}}. Select another version to compare."
      data-test-empty-state-message
    />
  </Hds::ApplicationState>
{{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}}