<%= form_with(model: [:state, ip_address_role], local: true, class: "space-y-6") do |form| %>
  <% if ip_address_role.errors.any? %>
    <div class="rounded-md bg-red-50 p-4">
      <div class="flex">
        <div class="flex-shrink-0">
          <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="ml-3">
          <h3 class="text-sm font-medium text-red-800">
            <%= pluralize(ip_address_role.errors.count, "error") %> prohibited this IP address role from being saved:
          </h3>
          <div class="mt-2 text-sm text-red-700">
            <ul class="list-disc space-y-1 pl-5">
              <% ip_address_role.errors.full_messages.each do |message| %>
                <li><%= message %></li>
              <% end %>
            </ul>
          </div>
        </div>
      </div>
    </div>
  <% end %>
  <div>
    <%= form.label :ip_address, class: "block text-sm font-medium text-slate-700" %>
    <div class="mt-1">
      <%= react_component("IpAddressInput", {
        prerender: false,
        props: {
            name: "ip_address_role[ip_address]",
            id: "ip_address_role_ip_address",
            initialValue: format_ip_address(ip_address_role.ip_address),
            placeholder: "Example: 192.168.1.1 or 10.0.0.0/24"
        }
      }) %>
    </div>
    <% if ip_address_role.errors[:ip_address].any? %>
      <p class="mt-2 text-sm text-red-600">
        <%= ip_address_role.errors[:ip_address].join(", ") %>
      </p>
    <% end %>
  </div>
  <div>
    <%= form.label :role, class: "block text-sm font-medium text-slate-700" %>
    <div class="mt-1">
      <%= form.select :role,
                     IpAddressRole.roles.keys.map { |r| [r.titleize, r] },
                     {},
                     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">Select the role that will be assigned to this IP address or range.</p>
  </div>
  <div>
    <%= form.label :description, class: "block text-sm font-medium text-slate-700" %>
    <div class="mt-1">
      <%= form.text_area :description,
                         class: "block w-full rounded-md border-slate-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm",
                         rows: 3,
                         placeholder: "Describe why this IP address role is being added" %>
    </div>
    <p class="mt-2 text-sm text-slate-500">Provide a description for future reference (e.g., "Office network", "Admin home IP").</p>
  </div>
  <div class="relative flex items-start">
    <div class="flex h-5 items-center">
      <%= form.check_box :active, class: "h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500" %>
    </div>
    <div class="ml-3 text-sm">
      <%= form.label :active, class: "font-medium text-slate-700" %>
      <p class="text-slate-500">Uncheck to temporarily disable this IP address role without deleting it.</p>
    </div>
  </div>
  <div class="pt-5">
    <div class="flex justify-end space-x-3">
      <%= link_to 'Cancel',
                 state_ip_address_roles_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" %>
      <%= form.submit 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 %>
