<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">FurAffinity Cookies</h1>
      <p class="mt-2 text-sm text-slate-700">
        Manage cookies for FurAffinity authentication.
      </p>
    </div>
    <div class="mt-4 space-x-4 sm:ml-16 sm:mt-0 sm:flex-none">
      <%= link_to "Back to Global States",
                  global_states_path,
                  class:
                    "bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded mr-3" %>
      <%= link_to "Edit Cookies",
                  fa_cookies_edit_global_states_path,
                  class:
                    "bg-blue-500 hover:bg-blue-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">
      <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">
              Cookie
            </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">
          <% @fa_cookies.each do |cookie| %>
            <tr>
              <td class="py-2 pr-4 text-sm font-medium text-slate-900">
                <%= cookie.key.sub("furaffinity-cookie-", "").upcase %>
              </td>
              <td class="py-2 pr-4 text-sm text-slate-500">
                <%= cookie.value.present? ? cookie.value : "(not set)" %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
</div>
