<head>
  <link rel='stylesheet' href='/technical-styles/api-key-modal.css' />
  <script src='/technical-scripts/api-key-generation.js' defer></script>
</head>

<body>
  <section>

    <div
      class='modal fade apikey-reset-alert'
      id='apiKeyModal'
      tabindex='-1'
      aria-hidden='true'
    >
      <div class='modal-dialog'>
        <div class='modal-content'>
          <div class='modal-header'>
            <h5 class='modal-title' id="keyModalTitle"></h5>
          </div>

          <div class='modal-body'>
            <div class='mb-3'>
              <label for='userName' class='form-label' id="keyModalSubTitle"></label>
              <input
                type='text'
                id='apiKeyModalField'
                class='form-control'
                placeholder='API Key'
                readonly
              />
              <div class='form-text' id='modalDescription'>Please copy this generated token value as
                it will be displayed only for the current browser session. (The
                token will not be visible in the UI after the page is refreshed)</div>
              <div
                id='userNameError'
                class='error-msg text-danger mt-1'
                style='display: none;'
              >User Name cannot be empty.</div>
            </div>
          </div>

          <div class='modal-footer'>
            <button
              type='button'
              class='btn'
              data-bs-dismiss='modal'
              id='resetCancelButton'
            >
              Cancel
            </button>
            <button
              type='button'
              class='btn'
              data-bs-dismiss='modal'
              id='copyButton'
              onclick='apiKeyCopyToClipboard()'
            >
              Copy
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>