<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">IP Address Roles</h1>
      <p class="mt-2 text-sm text-slate-700">
        Manage roles assigned to IP addresses and CIDR ranges.
      </p>
    </div>
    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
      <%= link_to 'Add New IP Address Role',
                  new_state_ip_address_role_path,
                  class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>
    </div>
  </div>
  <% if @ip_address_roles.any? %>
    <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">IP Address/Range</th>
              <th class="pb-2 text-left text-sm font-semibold text-slate-900">Role</th>
              <th class="pb-2 text-left text-sm font-semibold text-slate-900">Description</th>
              <th class="pb-2 text-left text-sm font-semibold text-slate-900">Status</th>
              <th class="pb-2 text-left text-sm font-semibold text-slate-900">Created</th>
              <th class="relative pb-2"><span class="sr-only">Actions</span></th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-200">
            <% @ip_address_roles.each do |ip_role| %>
              <tr>
                <td class="py-2 pr-4 text-sm font-medium text-slate-900">
                  <code class="bg-slate-100 px-1 py-0.5 rounded text-slate-800"><%= format_ip_address(ip_role.ip_address) %></code>
                </td>
                <td class="py-2 pr-4 text-sm">
                  <% pill_color =
                    case ip_role.role
                    when "admin"
                      "bg-rose-100 text-rose-700"
                    when "moderator"
                      "bg-amber-100 text-amber-700"
                    else
                      "bg-sky-100 text-sky-700"
                    end
                  %>
                  <span class="<%= pill_color %> inline-flex items-center rounded-full px-2.5 py-0.5 font-medium">
                    <%= ip_role.role.titleize %>
                  </span>
                </td>
                <td class="py-2 pr-4 text-sm text-slate-500">
                  <%= ip_role.description %>
                </td>
                <td class="py-2 pr-4 text-sm">
                  <%= button_to toggle_state_ip_address_role_path(ip_role),
                              method: :patch,
                              class: "#{ip_role.active? ? 'bg-emerald-100 hover:bg-emerald-200 text-emerald-700' : 'bg-slate-100 hover:bg-slate-200 text-slate-700'} font-medium py-1 px-3 rounded inline-flex items-center w-24 justify-center" do %>
                    <i class="fa-solid <%= ip_role.active? ? 'fa-check-circle' : 'fa-circle-xmark' %> mr-1.5"></i>
                    <%= ip_role.active? ? 'Active' : 'Inactive' %>
                  <% end %>
                </td>
                <td class="py-2 pr-4 text-sm text-slate-500">
                  <%= ip_role.created_at.strftime('%Y-%m-%d %H:%M') %>
                </td>
                <td class="py-2 text-right text-sm font-medium space-x-2">
                  <%= link_to 'Edit',
                             edit_state_ip_address_role_path(ip_role),
                             class: "bg-blue-100 hover:bg-blue-200 text-blue-700 font-medium py-1 px-3 rounded inline-block" %>
                  <%= button_to 'Delete',
                              state_ip_address_role_path(ip_role),
                              method: :delete,
                              class: "bg-rose-100 hover:bg-rose-200 text-rose-700 font-medium py-1 px-3 rounded inline-block",
                              form: {
                                class: "inline",
                                data: {
                                  confirm: 'Are you sure you want to delete this IP address role?'
                                }
                              } %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    </div>
  <% else %>
    <div class="mt-6 rounded-md bg-blue-50 p-4">
      <div class="flex">
        <div class="flex-shrink-0">
          <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-sm text-blue-700">
            No IP address roles have been created yet.
          </p>
        </div>
      </div>
    </div>
  <% end %>
  <div class="mt-8 bg-white shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg font-medium leading-6 text-slate-900">About IP Address Roles</h3>
      <div class="mt-2 max-w-xl text-sm text-slate-500">
        <p>IP address roles allow you to grant permissions to specific IP addresses or IP ranges without requiring a user account.</p>
      </div>
      <div class="mt-3">
        <h4 class="text-md font-medium text-slate-900">Usage Information</h4>
        <ul class="mt-2 list-disc pl-5 text-sm text-slate-700 space-y-1">
          <li>Use <strong>single IP addresses</strong> like <code class="bg-slate-100 px-1 py-0.5 rounded">192.168.1.1</code> to grant roles to a specific IP.</li>
          <li>Use <strong>CIDR notation</strong> like <code class="bg-slate-100 px-1 py-0.5 rounded">192.168.1.0/24</code> to grant roles to an entire subnet.</li>
          <li>Roles will be checked from most specific to least specific, with user accounts taking precedence.</li>
          <li>Overlapping IP ranges with different roles are not allowed to prevent conflicts.</li>
        </ul>
      </div>
    </div>
  </div>
</div>
