{{title "Tokens"}}
<section class="section">
  <h1 class="title">Access Control Tokens</h1>
  <div class="columns">
    <div class="column is-two-thirds">
      <p class="message">Clusters that use Access Control Lists require tokens to perform certain tasks. By providing a token <strong>Secret ID</strong>, each future request will be authenticated, potentially authorizing read access to additional information. By providing a token <strong>Accessor ID</strong>, the policies and rules for the token will be listed.</p>

      <div class="notification is-info">
        <div class="columns">
          <div class="column">
            <h3 class="title is-4">Token Storage</h3>
            <p>Tokens are stored client-side in <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">local storage</a>. This will persist your token across sessions. You can manually clear your token here.</p>
          </div>
          <div class="column is-centered is-minimum">
            <button data-test-token-clear class="button is-info" {{action "clearTokenProperties"}} type="button">Clear Token</button>
          </div>
        </div>
      </div>

      {{#unless this.tokenIsValid}}
        <div class="field">
          <label class="label" for="token-input">Secret ID</label>
          <div class="control">
            <input
              id="token-input"
              class="input"
              type="text"
              placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
              {{!-- FIXME this placeholder gets read out by VoiceOver sans dashes 😵 --}}
              value={{this.token.secret}}
              oninput={{action (mut this.secret) value="target.value"}}
              data-test-token-secret>
          </div>
          <p class="help">Sent with every request to determine authorization</p>
        </div>

        <p class="content"><button data-test-token-submit class="button is-primary" {{action "verifyToken"}} type="button">Set Token</button></p>
      {{/unless}}

      {{#if this.tokenIsValid}}
        <div data-test-token-success class="notification is-success">
          <div class="columns">
            <div class="column">
              <h3 class="title is-4">Token Authenticated!</h3>
              <p>Your token is valid and authorized for the following policies.</p>
            </div>
          </div>
        </div>
      {{/if}}

      {{#if this.tokenIsInvalid}}
        <div data-test-token-error class="notification is-danger">
          <div class="columns">
            <div class="column">
              <h3 class="title is-4">Token Failed to Authenticate</h3>
              <p>The token secret you have provided does not match an existing token.</p>
            </div>
          </div>
        </div>
      {{/if}}

      {{#if this.tokenRecord}}
        <h3 class="title is-4">Token: {{this.tokenRecord.name}}</h3>
        <div class="content">
          <div>AccessorID: <code>{{this.tokenRecord.accessor}}</code></div>
          <div>SecretID: <code>{{this.tokenRecord.secret}}</code></div>
        </div>
        <h3 class="title is-4">Policies</h3>
        {{#if (eq this.tokenRecord.type "management")}}
          <div data-test-token-management-message class="boxed-section">
            <div class="boxed-section-body has-centered-text">
              The management token has all permissions
            </div>
          </div>
        {{else}}
          {{#each this.tokenRecord.policies as |policy|}}
            <div data-test-token-policy class="boxed-section">
              <div data-test-policy-name class="boxed-section-head">
                {{policy.name}}
              </div>
              <div class="boxed-section-body">
                <p data-test-policy-description class="content">
                  {{#if policy.description}}
                    {{policy.description}}
                  {{else}}
                    <em>No description</em>
                  {{/if}}
                </p>
                <pre><code data-test-policy-rules>{{policy.rules}}</code></pre>
              </div>
            </div>
          {{/each}}
        {{/if}}
      {{/if}}
    </div>
  </div>
</section>