<div class="max-w-lg mx-auto">
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">New API Key</h1>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
      Create a bearer token for server-to-server access to a forward auth application.
    </p>
  </div>

  <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <%= form_with(model: @api_key, class: "space-y-6") do |f| %>
        <% if @api_key.errors.any? %>
          <div class="rounded-md bg-red-50 dark:bg-red-900/30 p-4">
            <div class="text-sm text-red-700 dark:text-red-300">
              <ul class="list-disc pl-5 space-y-1">
                <% @api_key.errors.full_messages.each do |msg| %>
                  <li><%= msg %></li>
                <% end %>
              </ul>
            </div>
          </div>
        <% end %>

        <div>
          <%= f.label :name, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
          <%= f.text_field :name, class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
              placeholder: "e.g., Video Player WebDAV" %>
        </div>

        <div>
          <%= f.label :application_id, "Application", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
          <% if @applications.any? %>
            <%= f.collection_select :application_id, @applications, :id, :name,
                { prompt: "Select an application" },
                { class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" } %>
          <% else %>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">No forward auth applications available.</p>
          <% end %>
        </div>

        <div>
          <%= f.label :expires_at, "Expiration (optional)", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
          <%= f.datetime_local_field :expires_at, class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave blank for no expiration.</p>
        </div>

        <div class="flex items-center justify-end gap-3">
          <%= link_to "Cancel", api_keys_path, class: "text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-400" %>
          <%= f.submit "Create API Key",
              class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" %>
        </div>
      <% end %>
    </div>
  </div>
</div>
