<form
  id="create-api-key-form"
  hx-post="{% url 'api_keys' %}"
  hx-target="#api-key-result"
  hx-swap="innerHTML"
  hx-on::after-request="
      if (event.detail.successful) {
        window.dispatchEvent(
          new CustomEvent('close-modal', { detail: { id: 'create-api-key-modal' } })
        )
      }
  ">
  {% csrf_token %}
  
  {% if form.non_field_errors %}
  <div class="my-4 p-4 bg-red-50 border border-red-200 rounded-lg" role="alert">
    <div class="flex">
      <div class="flex-shrink-0">
        <!-- Heroicon name: solid/exclamation -->
        <i aria-hidden="true" data-lucide="triangle-alert" class="h-5 w-5 text-red-400"></i>
      </div>
      <div class="ml-3">
        <p class="text-sm text-red-700">
          {% for error in form.non_field_errors %}
            {{ error|striptags }}
          {% endfor %}
        </p>
      </div>
    </div>
  </div>
  {% endif %}
  
  <label for="id_name" class="block text-sm font-medium text-gray-700 sr-only">
    Key Name
  </label>
  <div class="mt-1 relative rounded-md shadow-sm">
    <input
      type="text"
      name="name"
      id="id_name"
      required
      placeholder="e.g. My Web App Key"
      class="
        shadow-sm block w-full sm:text-sm border-gray-300 rounded-md
        focus:ring-blue-500 focus:border-blue-500
        {% if form.name.errors %}
          border-red-300 text-red-900 placeholder-red-300
          focus:ring-red-500 focus:border-red-500 pr-10
        {% endif %}
      "
      value="{{ form.name.value|default:'New API Key' }}"
      x-ref="keyNameInput"
      autofocus
      onfocus="this.select()"
    >
    {% if form.name.errors %}
      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
        <i aria-hidden="true" data-lucide="alert-circle" class="h-5 w-5 text-red-500"></i>
      </div>
    {% endif %}
  </div>

  {% if form.name.errors %}
    <p class="mt-2 text-sm text-red-600" id="name-error">
      {{ form.name.errors|join:", "|striptags }}
    </p>
  {% endif %}

  <p class="mt-2 text-sm text-gray-500">
    Give this key a meaningful name to identify its use.
  </p>
</form>
