<turbo-frame id="api-modal">
<form method="post"
      action="{% url 'linkding:settings.integrations.create_api_token' %}"
      data-turbo-frame="api-section">
  {% csrf_token %}
  <ld-modal class="modal active"
            data-close-url="{% url 'linkding:settings.integrations' %}"
            data-turbo-frame="api-modal">
    <div class="modal-overlay" data-close-modal></div>
    <div class="modal-container" role="dialog" aria-modal="true">
      {% include 'shared/modal_header.html' with title="Create API Token" %}
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label" for="token-name">Token name</label>
          <input type="text"
                 class="form-input"
                 id="token-name"
                 name="name"
                 placeholder="e.g., Browser Extension, Mobile App"
                 value="API Token"
                 maxlength="128">
          <p class="form-input-hint">A descriptive name to identify the purpose of the token</p>
        </div>
      </div>
      <div class="modal-footer d-flex justify-between">
        <button type="button" class="btn btn-wide" data-close-modal>Cancel</button>
        <button type="submit" class="btn btn-primary">Create Token</button>
      </div>
    </div>
  </ld-modal>
</form>
</turbo-frame>
