towerops/lib/towerops_web/live/equipment_live/form.html.heex

<Layouts.authenticated flash={@flash} current_organization={@organization}>
  <div class="mb-4">
    <.link
      navigate={
        if @live_action == :edit,
          do: ~p"/orgs/#{@organization.slug}/equipment/#{@equipment.id}",
          else: ~p"/orgs/#{@organization.slug}/equipment"
      }
      class="inline-flex items-center gap-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
    >
      <.icon name="hero-arrow-left" class="h-4 w-4" />
      {if @live_action == :edit, do: "Back to Equipment", else: "Back to Equipment List"}
    </.link>
  </div>

  <.header>
    {@page_title}
    <:subtitle>
      {if @live_action == :new,
        do: "Add new equipment to monitor",
        else: "Update equipment details"}
    </:subtitle>
  </.header>

  <div class="max-w-2xl">
    <.form for={@form} id="equipment-form" phx-change="validate" phx-submit="save">
      <.input field={@form[:name]} type="text" label="Equipment Name" required />

      <.input field={@form[:ip_address]} type="text" label="IP Address" required />

      <.input
        field={@form[:site_id]}
        type="select"
        label="Site"
        required
        prompt="Select a site"
        options={Enum.map(@available_sites, &{&1.name, &1.id})}
      />

      <.input field={@form[:description]} type="textarea" label="Description" />

      <.input
        field={@form[:check_interval_seconds]}
        type="number"
        label="Check Interval (seconds)"
        min="30"
        max="3600"
      />

      <.input field={@form[:monitoring_enabled]} type="checkbox" label="Enable Monitoring" />

      <div class="mt-8 border-t pt-6">
        <h3 class="text-lg font-medium mb-4">SNMP Configuration</h3>
        <p class="text-sm text-gray-600 mb-4">
          Enable SNMP to discover device details, monitor sensors, and track interface statistics.
        </p>

        <.input field={@form[:snmp_enabled]} type="checkbox" label="Enable SNMP Monitoring" />

        <div
          :if={@form[:snmp_enabled].value}
          class="mt-4 space-y-4 pl-6 border-l-2 border-blue-200"
        >
          <.input
            field={@form[:snmp_version]}
            type="select"
            label="SNMP Version"
            required
            value={@form[:snmp_version].value || "2c"}
            options={[{"SNMPv1", "1"}, {"SNMPv2c", "2c"}]}
          />

          <.input
            field={@form[:snmp_community]}
            type="text"
            label="Community String"
            required
            autocomplete="off"
          />

          <.input
            field={@form[:snmp_port]}
            type="number"
            label="SNMP Port"
            min="1"
            max="65535"
            value={@form[:snmp_port].value || 161}
          />

          <div
            :if={@snmp_test_result}
            class="rounded-md p-3"
            class={[
              @snmp_test_result.success && "bg-green-50 text-green-800",
              !@snmp_test_result.success && "bg-red-50 text-red-800"
            ]}
          >
            <div class="flex items-center gap-2">
              <.icon :if={@snmp_test_result.success} name="hero-check-circle" class="w-5 h-5" />
              <.icon :if={!@snmp_test_result.success} name="hero-x-circle" class="w-5 h-5" />
              <span class="text-sm font-medium">{@snmp_test_result.message}</span>
            </div>
          </div>

          <div class="flex gap-3">
            <.button type="button" phx-click="test_snmp" phx-disable-with="Testing...">
              Test SNMP Connection
            </.button>

            <%= if @live_action == :edit do %>
              <.button
                type="button"
                phx-click="trigger_discovery"
                phx-disable-with="Discovering..."
              >
                <.icon name="hero-magnifying-glass" class="h-4 w-4" /> Rediscover Device
              </.button>
            <% end %>
          </div>
        </div>
      </div>

      <div class="flex gap-3 mt-6">
        <.button phx-disable-with="Saving..." variant="primary">Save Equipment</.button>
        <.button navigate={~p"/orgs/#{@organization.slug}/equipment"}>Cancel</.button>
      </div>
    </.form>

    <%= if @live_action == :edit do %>
      <div class="mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800">
        <h3 class="text-lg font-semibold text-red-600 dark:text-red-500 mb-4">Danger Zone</h3>
        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
          Once you delete this equipment, there is no going back. All monitoring history and alerts will be permanently deleted.
        </p>
        <.button
          phx-click="delete"
          data-confirm="Are you sure you want to delete this equipment? All monitoring history and alerts will be permanently deleted."
          variant="danger"
        >
          <.icon name="hero-trash" class="h-4 w-4" /> Delete Equipment
        </.button>
      </div>
    <% end %>
  </div>
</Layouts.authenticated>