<form {{action "onSubmit" "secondary-token" "primary" (hash ttl=this.ttl id=this.id) on="submit"}}>
  <div class="box is-fullwidth is-shadowless is-marginless">
    <h4 class="title is-5">
      Generate a secondary token
    </h4>
    <p>
      Generate a token to enable
      {{this.model.replicationModeForDisplay}}
      replication or change primaries on secondary cluster.
    </p>
  </div>
  <MessageError @errors={{this.errors}} />
  <div class="field">
    <label for="activation-token-id" class="is-label">
      Secondary ID
    </label>
    <div class="control">
      <Input
        class="input"
        name="activation-token-id"
        id="activation-token-id"
        @value={{this.id}}
        data-test-replication-secondary-id={{true}}
      />
    </div>
    <p class="help has-text-grey">
      This will be used to identify a secondary cluster once a connection has been established with the primary.
    </p>
  </div>
  <div class="field">
    <TtlPicker
      @initialValue="30m"
      @label="Time to Live (TTL) for generated secondary token"
      @helperTextDisabled="If not set, the default value (30 minutes) will be used"
      @helperTextEnabled="After this period, the generated token will no longer be valid."
      @onChange={{action "updateTtl"}}
      @changeOnInit={{true}}
    />
  </div>
  {{#if (eq this.replicationMode "performance")}}
    <PathFilterConfigList @paths={{this.paths}} @config={{this.filterConfig}} @id={{this.id}} />
  {{/if}}
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <button type="submit" class="button is-primary" data-test-secondary-add={{true}}>
        Generate token
      </button>
    </div>
    <div class="control">
      <LinkTo @route="mode.secondaries" @model={{this.replicationMode}} class="button">
        Cancel
      </LinkTo>
    </div>
  </div>
</form>

{{#if this.isModalActive}}
  <Modal @title="Copy your token" @onClose={{action "toggleModal" "Token copied!"}} @isActive={{this.isModalActive}}>
    <section class="modal-card-body">
      <p>
        This token can be used to enable
        {{this.model.replicationModeForDisplay}}
        replication or change primaries on the secondary cluster.
      </p>
      <div class="box is-shadowless is-fullwidth is-sideless">
        <h2 class="title is-6">Activation token</h2>
        <div class="copy-text level">
          <div class="is-fullwidth">
            <textarea readonly value={{this.token}} id="token-textarea" class="textarea level-left"></textarea>
          </div>
        </div>
        <div class="has-top-margin-xl has-bottom-margin-s">
          <InfoTableRow @label="TTL" @value={{this.ttl}} />
          <InfoTableRow @label="Expires" @value={{date-format this.expirationDate "MMM dd, yyyy hh:mm:ss a"}} />
        </div>
      </div>
    </section>
    <footer class="modal-card-foot">
      <CopyButton
        class="button is-primary copy-close"
        data-test-button="modal-copy-close"
        @clipboardText={{this.token}}
        @buttonType="button"
        @type="copy"
        @success={{action "copyClose" "Token copied!"}}
      >
        Copy &amp; Close
      </CopyButton>
    </footer>
  </Modal>
{{/if}}