<head>
  <link rel='stylesheet' href='/technical-styles/add-edit-application.css' />
  <script src='/technical-scripts/add-application-form.js' defer></script>
</head>

<body>
  <section>
    <div class='container my-5'>
      <div class='form-card p-5'>
        <h2 class='title mb-4'>Create an Application</h2>
        <p class='text-muted mb-4'>
          Create an application providing name and quota parameters. Description
          is optional. Required fields are marked with an asterisk (<span
            class='text-danger'
          >*</span>).
        </p>
        <form id='applicationForm'>
          <!-- Application Name -->
          <div class='mb-3'>
            <label for='applicationName' class='form-label'>Application Name
              <span class='text-danger'>*</span></label>
            <input
              type='text'
              id='applicationName'
              class='form-control'
              placeholder='My Application'
              required
            />
            <div class='form-text'>Enter a name to identify the application. You
              will be able to pick this application when subscribing to APIs.</div>
            <div
              id='nameError'
              class='error-msg text-danger mt-1'
              style='display: none;'
            >Application name cannot be empty.</div>
          </div>

          <!-- Shared Quota -->
          <div class='mb-3'>
            <label for='throttlingPolicy' class='form-label'>Shared Quota for
              Application Tokens
              <span class='text-danger'>*</span></label>
            <select id='throttlingPolicy' class='form-select'>
              {{#throttlingPoliciesMetadata}}
                <option>{{name}}</option>
              {{/throttlingPoliciesMetadata}}
            </select>
            <div class='form-text'>Assign API request quota per access token.
              Allocated quota will be shared among all the subscribed APIs of
              the application.</div>
          </div>

          <!-- Application Description -->
          <div class='mb-3'>
            <label for='applicationDescription' class='form-label'>Application
              Description</label>
            <textarea
              id='applicationDescription'
              class='form-control'
              rows='4'
              placeholder='Provide a brief description of the application'
              maxlength='512'
            ></textarea>
            <div class='form-text'>
              <span id='remainingCharacters'>512</span>
              characters remaining
            </div>
            <div
              id='descriptionError'
              class='text-danger mt-1'
              style='display: none;'
            >Description exceeds the character limit.</div>
          </div>

          <!-- Buttons -->
          <div class='d-flex gap-3'>
            <button
              type='button'
              class='common-btn-outlined'
              id='cancelButton'
            >
              Cancel
            </button>
            <button
              type='submit'
              class='common-btn-primary'
              id='saveButton'
              disabled
            >
              Save
            </button>
          </div>
        </form>
      </div>
    </div>
  </section>
</body>
