<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Unwrap data
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if @unwrap_data}}
  <div class="box is-sideless is-fullwidth is-marginless">
    <nav class="tabs">
      <ul>
        {{! template-lint-configure no-nested-interactive "warn" }}
        <li
          aria-selected={{if (eq @unwrapActiveTab "data") "true" "false"}}
          class={{if (eq @unwrapActiveTab "data") "is-active"}}
        >
          <button
            type="button"
            class="link link-plain tab has-text-weight-semibold"
            {{action (mut @unwrapActiveTab) "data"}}
            data-test-button-data
          >
            Data
          </button>
        </li>
        <li
          aria-selected={{if (eq @unwrapActiveTab "data") "true" "false"}}
          class={{if (eq @unwrapActiveTab "details") "is-active"}}
        >
          <button
            type="button"
            class="link link-plain tab has-text-weight-semibold"
            {{action (mut @unwrapActiveTab) "details"}}
            data-test-button-details
          >
            Wrap Details
          </button>
        </li>
        {{! template-lint-configure no-nested-interactive "on" }}
      </ul>
    </nav>
    {{#if (eq @unwrapActiveTab "data")}}
      <div class="field">
        <div class="control">
          <JsonEditor @title="Unwrapped Data" @value={{stringify @unwrap_data}} @readOnly={{true}} />
        </div>
      </div>
    {{else}}
      <div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
        {{#each-in @details as |key detail|}}
          <InfoTableRow @label={{key}} @value={{key}}>
            {{#if (or (eq detail "No") (eq detail "None"))}}
              <Icon @name="x-circle" class="has-text-grey" />
              {{detail}}
            {{else}}
              {{#if (eq detail "Yes")}}
                <Icon @name="check-circle" class="has-text-success" />
              {{/if}}
              {{detail}}
            {{/if}}
          </InfoTableRow>
        {{/each-in}}
      </div>
    {{/if}}
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <CopyButton
        @clipboardText={{stringify @unwrap_data}}
        @class="button is-primary"
        @buttonType="button"
        @success={{action (set-flash-message "Data copied!")}}
      >
        Copy
      </CopyButton>
    </div>
    <div class="control">
      <button {{on "click" this.onClear}} type="button" class="button">
        Back
      </button>
    </div>
  </div>
{{else}}
  <div class="box is-sideless is-fullwidth is-marginless">
    <NamespaceReminder @mode="perform" @noun={{@selectedAction}} />
    <MessageError @errors={{@errors}} />
    <div class="field">
      <label for="token" class="is-label">Wrapped token</label>
      <div class="has-text-grey is-size-8 has-bottom-margin-xs">
        Enter your wrapped token here to unwrap it and return its original value.
      </div>
      <div class="control">
        <Input
          @value={{@token}}
          class="input"
          id="token"
          name="token"
          autocomplete="off"
          spellcheck="false"
          data-test-tools-input="wrapping-token"
        />
      </div>
    </div>
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <button type="submit" data-test-tools-submit="true" class="button is-primary">
        Unwrap data
      </button>
    </div>
  </div>
{{/if}}