baffle-hub/app/views/network_ranges/new.html.erb

<% content_for :title, "Add Network Range" %>

<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Add Network Range</h1>
    <p class="mt-2 text-gray-600">Create a new network range for tracking and rule management</p>
  </div>

  <div class="bg-white shadow rounded-lg">
    <%= form_with(model: @network_range, local: true, class: "space-y-6") do |form| %>
      <% if @network_range.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" fill="currentColor" viewBox="0 0 20 20">
                <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">
                There were <%= pluralize(@network_range.errors.count, "error") %> with your submission:
              </h3>
              <div class="mt-2 text-sm text-red-700">
                <ul class="list-disc list-inside space-y-1">
                  <% @network_range.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                  <% end %>
                </ul>
              </div>
            </div>
          </div>
        </div>
      <% end %>

      <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Network Information</h3>
      </div>

      <div class="px-6 py-4 space-y-6">
        <div>
          <%= form.label :network, "Network Range (CIDR)", class: "block text-sm font-medium text-gray-700" %>
          <%= form.text_field :network, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "e.g., 192.168.1.0/24 or 2001:db8::/32" %>
          <p class="mt-2 text-sm text-gray-500">Enter the network range in CIDR notation. Supports both IPv4 and IPv6.</p>
        </div>

        <div>
          <%= form.label :source, "Source", class: "block text-sm font-medium text-gray-700" %>
          <%= form.select :source, options_for_select([
            ["User Created", "user_created"],
            ["Manual Import", "manual"],
            ["API Imported", "api_imported"],
            ["Auto Generated", "auto_generated"]
          ], "user_created"), {}, { class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" } %>
        </div>

        <div>
          <%= form.label :creation_reason, "Creation Reason", class: "block text-sm font-medium text-gray-700" %>
          <%= form.text_area :creation_reason, rows: 3, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "Optional reason for creating this network range" %>
        </div>
      </div>

      <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Network Intelligence</h3>
        <p class="mt-1 text-sm text-gray-500">Optional intelligence data about this network range</p>
      </div>

      <div class="px-6 py-4 space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <%= form.label :asn, "ASN", class: "block text-sm font-medium text-gray-700" %>
            <%= form.number_field :asn, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "e.g., 15169" %>
          </div>

          <div>
            <%= form.label :asn_org, "ASN Organization", class: "block text-sm font-medium text-gray-700" %>
            <%= form.text_field :asn_org, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "e.g., Google LLC" %>
          </div>

          <div>
            <%= form.label :company, "Company", class: "block text-sm font-medium text-gray-700" %>
            <%= form.text_field :company, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "e.g., Google LLC" %>
          </div>

          <div>
            <%= form.label :country, "Country Code", class: "block text-sm font-medium text-gray-700" %>
            <%= form.text_field :country, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "e.g., US" %>
          </div>
        </div>

        <div class="space-y-4">
          <div class="flex items-center space-x-6">
            <%= form.check_box :is_datacenter, class: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" %>
            <%= form.label :is_datacenter, "Datacenter Network", class: "text-sm font-medium text-gray-900" %>
          </div>

          <div class="flex items-center space-x-6">
            <%= form.check_box :is_vpn, class: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" %>
            <%= form.label :is_vpn, "VPN Network", class: "text-sm font-medium text-gray-900" %>
          </div>

          <div class="flex items-center space-x-6">
            <%= form.check_box :is_proxy, class: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" %>
            <%= form.label :is_proxy, "Proxy Network", class: "text-sm font-medium text-gray-900" %>
          </div>
        </div>

        <div>
          <%= form.label :abuser_scores, "Abuser Scores", class: "block text-sm font-medium text-gray-700" %>
          <%= form.text_area :abuser_scores, rows: 3, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: '{ "score": "0.001", "source": "api" }' %>
          <p class="mt-2 text-sm text-gray-500">JSON format with abuser scoring information</p>
        </div>

        <div>
          <%= form.label :additional_data, "Additional Data", class: "block text-sm font-medium text-gray-700" %>
          <%= form.text_area :additional_data, rows: 4, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: '{ "custom_field": "value" }' %>
          <p class="mt-2 text-sm text-gray-500">JSON format for any additional metadata</p>
        </div>
      </div>

      <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
        <div class="flex justify-end space-x-3">
          <%= link_to "Cancel", network_ranges_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
          <%= form.submit "Create Network Range", class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" %>
        </div>
      </div>
    <% end %>
  </div>
</div>