<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  <div class="sm:flex sm:items-center">
    <div class="sm:flex-auto">
      <h1 class="text-2xl font-semibold text-slate-900">
        Edit Inkbunny Credentials
      </h1>
      <p class="mt-2 text-sm text-slate-700">
        Update the credentials used for Inkbunny authentication. You can either
        set username and password, or set a session ID directly.
      </p>
    </div>
    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
      <%= link_to "Back to Credentials",
                  ib_cookies_global_states_path,
                  class:
                    "bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded" %>
    </div>
  </div>

  <div class="mt-6 overflow-hidden bg-white shadow sm:rounded-lg">
    <div class="p-3 sm:p-4">
      <div class="mb-8">
        <h2 class="mb-4 text-lg font-medium text-slate-900">
          Login with Username and Password
        </h2>
        <%= form_tag ib_cookies_global_states_path, method: :patch do %>
          <table class="min-w-full divide-y divide-slate-300">
            <thead>
              <tr>
                <th class="pb-2 text-left text-sm font-semibold text-slate-900">
                  Field
                </th>
                <th class="pb-2 text-left text-sm font-semibold text-slate-900">
                  Value
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
              <% @ib_cookies.each do |cookie| %>
                <tr>
                  <td class="py-2 pr-4 text-sm font-medium text-slate-900">
                    <%= cookie.key.sub("inkbunny-", "").titleize %>
                  </td>
                  <td class="py-2 pr-4">
                    <%= text_field_tag "ib_cookies[#{cookie.key}]",
                                       cookie.value,
                                       type: cookie.key == "inkbunny-password" ? "password" : "text",
                                       class:
                                         "block w-full rounded-md border-slate-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm" %>
                  </td>
                </tr>
              <% end %>
            </tbody>
          </table>

          <div class="mt-4 flex justify-end space-x-3">
            <%= link_to "Cancel",
                        ib_cookies_global_states_path,
                        class:
                          "rounded-md border border-slate-300 bg-white py-2 px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2" %>
            <%= submit_tag "Save Credentials",
                           class:
                             "inline-flex justify-center rounded-md border border-transparent bg-sky-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2" %>
          </div>
        <% end %>
      </div>

      <div class="border-t border-slate-200 pt-8">
        <h2 class="mb-4 text-lg font-medium text-slate-900">
          Set Session ID Directly
        </h2>
        <%= form_tag ib_cookies_global_states_path, method: :patch do %>
          <div class="space-y-4">
            <div>
              <label
                for="ib_cookies[inkbunny-sid]"
                class="block text-sm font-medium text-slate-700"
                >Session ID</label
              >
              <div class="mt-1">
                <%= text_field_tag "ib_cookies[inkbunny-sid]",
                                   @ib_sid&.value,
                                   class:
                                     "block w-full rounded-md border-slate-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm" %>
              </div>
              <p class="mt-2 text-sm text-slate-500">
                Current session ID:
                <%= @ib_sid&.value.present? ? @ib_sid.value : "(not set)" %>
              </p>
            </div>

            <div class="flex justify-end space-x-3">
              <%= link_to "Cancel",
                          ib_cookies_global_states_path,
                          class:
                            "rounded-md border border-slate-300 bg-white py-2 px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2" %>
              <%= submit_tag "Save Session ID",
                             class:
                               "inline-flex justify-center rounded-md border border-transparent bg-sky-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2" %>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
