<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">Global States</h1>
      <p class="mt-2 text-sm text-slate-700">
        A list of all global states in the system.
      </p>
    </div>
    <div class="mt-4 space-x-4 sm:ml-16 sm:mt-0 sm:flex-none">
      <%= link_to "Manage FA Cookies",
                  fa_cookies_global_states_path,
                  class:
                    "bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded" %>
      <%= link_to "Manage IB Cookies",
                  ib_cookies_global_states_path,
                  class:
                    "bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded" %>
      <%= link_to "New Global State",
                  new_global_state_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">
              Key
            </th>
            <th class="pb-2 text-left text-sm font-semibold text-slate-900">
              Value Type
            </th>
            <th class="pb-2 text-left text-sm font-semibold text-slate-900">
              Value
            </th>
            <th class="relative pb-2"><span class="sr-only">Actions</span></th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          <% @global_states.each do |global_state| %>
            <tr>
              <td class="py-2 pr-4 text-sm font-medium text-slate-900">
                <%= global_state.key %>
              </td>
              <td class="py-2 pr-4 text-sm">
                <% pill_color =
                     case global_state.value_type
                     when "string"
                       "bg-sky-100 text-sky-700"
                     when "counter"
                       "bg-emerald-100 text-emerald-700"
                     when "duration"
                       "bg-purple-100 text-purple-700"
                     when "password"
                       "bg-rose-100 text-rose-700"
                     end %>
                <span
                  class="<%= pill_color %> inline-flex items-center rounded-full px-2.5 py-0.5 font-medium"
                >
                  <%= global_state.value_type.humanize %>
                </span>
              </td>
              <td class="py-2 pr-4 text-sm text-slate-500">
                <%= global_state.display_value %>
              </td>
              <td class="py-2 text-right text-sm font-medium">
                <% if policy(global_state).edit? %>
                  <%= link_to "Edit",
                              edit_global_state_path(global_state),
                              class: "text-blue-600 hover:text-blue-900 mr-3" %>
                <% end %>
                <% if policy(global_state).destroy? %>
                  <%= button_to "Delete",
                                global_state_path(global_state),
                                method: :delete,
                                class: "text-red-600 hover:text-red-900 inline",
                                form: {
                                  class: "inline",
                                  data: {
                                    turbo_confirm: "Are you sure?",
                                  },
                                } %>
                <% end %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
</div>
