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

<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
>
  <div class="mb-4">
    <.link
      navigate={
        if @live_action == :edit,
          do: ~p"/sites/#{@site.id}",
          else: ~p"/sites"
      }
      class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
    >
      <.icon name="hero-arrow-left" class="h-4 w-4" />
      {if @live_action == :edit, do: "Back to Site", else: "Back to Sites"}
    </.link>
  </div>

  <.header>
    {@page_title}
    <:subtitle>
      {if @live_action == :new,
        do: "Add a new site to your organization",
        else: "Update site details"}
    </:subtitle>
  </.header>

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

      <div class="mb-4">
        <label>
          <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
            {t("Parent Site")}
            <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
          </span>
          <select
            id={@form[:parent_site_id].id}
            name={@form[:parent_site_id].name}
            class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
          >
            <option value="">No parent site</option>
            {Phoenix.HTML.Form.options_for_select(
              Enum.map(@available_parent_sites, &{&1.name, &1.id}),
              @form[:parent_site_id].value
            )}
          </select>
        </label>
      </div>

      <div class="mb-4">
        <label>
          <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
            Location <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
          </span>
          <input
            type="text"
            id={@form[:location].id}
            name={@form[:location].name}
            value={@form[:location].value}
            class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
          />
        </label>
      </div>
      
<!-- Geographic Location Section -->
      <div class="mt-6 border-t pt-6">
        <h3 class="text-base font-medium mb-4">
          {t("Geographic Location")}
          <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
          {t("Add geographic coordinates to enable network mapping and spatial analysis.")}
        </p>

        <div class="space-y-4">
          <div>
            <label>
              <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                {t("Address")}
              </span>
              <div class="flex gap-2">
                <input
                  type="text"
                  id={@form[:address].id}
                  name={@form[:address].name}
                  value={@form[:address].value}
                  placeholder="123 Main St, City, State, Country"
                  class="flex-1 rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
                />
                <button
                  type="button"
                  phx-click="geocode"
                  class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
                >
                  {t("Geocode")}
                </button>
              </div>
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                {t(
                  "Enter a full address and click Geocode to automatically fill latitude/longitude"
                )}
              </p>
            </label>
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div>
              <label>
                <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                  {t("Latitude")}
                </span>
                <input
                  type="number"
                  step="any"
                  id={@form[:latitude].id}
                  name={@form[:latitude].name}
                  value={@form[:latitude].value}
                  placeholder="40.7128"
                  min="-90"
                  max="90"
                  class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
                />
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  -90 to 90
                </p>
              </label>
            </div>

            <div>
              <label>
                <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                  {t("Longitude")}
                </span>
                <input
                  type="number"
                  step="any"
                  id={@form[:longitude].id}
                  name={@form[:longitude].name}
                  value={@form[:longitude].value}
                  placeholder="-74.0060"
                  min="-180"
                  max="180"
                  class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
                />
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  -180 to 180
                </p>
              </label>
            </div>
          </div>
          
<!-- Map Preview -->
          <%= if @form[:latitude].value && @form[:longitude].value do %>
            <div class="mt-4">
              <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                {t("Map Preview")}
              </span>
              <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <img
                  src={"https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/#{@form[:longitude].value},#{@form[:latitude].value},14,0/400x200?access_token=pk.1234"}
                  alt="Location preview"
                  class="w-full h-48 object-cover"
                  onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjRjNGNEY2Ii8+Cjx0ZXh0IHg9IjIwMCIgeT0iMTAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZmlsbD0iIzZCNzI4MCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPk1hcCBwcmV2aWV3IG5vdCBhdmFpbGFibGU8L3RleHQ+Cjwvc3ZnPgo='; this.alt='Map preview not available';"
                />
              </div>
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Coordinates: {@form[:latitude].value}, {@form[:longitude].value}
              </p>
            </div>
          <% end %>
        </div>
      </div>

      <div class="mb-4">
        <label>
          <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
            {t("Description")}
            <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
          </span>
          <textarea
            id={@form[:description].id}
            name={@form[:description].name}
            class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
          >{Phoenix.HTML.Form.normalize_value("textarea", @form[:description].value)}</textarea>
        </label>
      </div>

      <%= if @available_agents != [] do %>
        <div class="mt-6 border-t pt-6">
          <h3 class="text-base font-medium mb-4">
            {t("Agent Configuration")}
            <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
            {t(
              "Set a default agent for SNMP polling at this site. This will override the organization default for all devices at this site. Leave blank to inherit from organization."
            )}
          </p>

          <.input
            field={@form[:agent_token_id]}
            type="select"
            label={t("Default Agent for Site")}
            prompt="Inherit from organization"
            options={Enum.map(@available_agents, &{&1.name, &1.id})}
          />

          <%= if @live_action == :edit and @site.agent_token_id do %>
            <p class="mt-1 text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
              <.icon name="hero-exclamation-triangle" class="h-4 w-4" />
              <strong>{t("Overriding")}</strong> organization default -
              all devices at this site will use this agent
            </p>

            <div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
              <p class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
                {t("Force Apply to Site Device")}
              </p>
              <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
                {t("This will assign this agent to ALL devices at this site.")}
              </p>
              <.button
                type="button"
                phx-click="apply_agent_to_all"
                data-confirm={
                  t(
                    "This will replace agent assignments for ALL devices at this site. Are you sure?"
                  )
                }
                variant="danger"
              >
                <.icon name="hero-arrow-path" class="h-4 w-4" /> Apply Agent to All Device
              </.button>
            </div>
          <% else %>
            <%= if Map.get(assigns, :org_agent) do %>
              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
                <.icon name="hero-building-office-2" class="h-4 w-4" />
                Currently inheriting organization default: <strong>{@org_agent.name}</strong>
              </p>
            <% else %>
              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                {t(
                  "Set a default agent for all devices at this site. Device can override this setting individually."
                )}
              </p>
            <% end %>
          <% end %>
        </div>
      <% end %>

      <div class="mt-6 border-t pt-6">
        <h3 class="text-base font-medium mb-4">
          {t("SNMP Configuration")}
          <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
          {t(
            "Override organization SNMP defaults for all devices at this site. Leave blank to inherit from organization."
          )}
        </p>

        <.input
          field={@form[:snmp_version]}
          type="select"
          label={t("SNMP Version")}
          prompt="Inherit from organization"
          options={[{"v1", "1"}, {"v2c", "2c"}, {"v3", "3"}]}
        />
        
<!-- v1/v2c Community String -->
        <%= if @form[:snmp_version].value in ["1", "2c"] do %>
          <.input
            field={@form[:snmp_community]}
            type="text"
            label={t("SNMP Community String")}
            placeholder={t("Leave blank to inherit from organization")}
          />
        <% end %>
        
<!-- v3 Credentials -->
        <%= if @form[:snmp_version].value == "3" do %>
          <.input
            field={@form[:snmpv3_security_level]}
            type="select"
            label={t("Security Level")}
            prompt="Select security level"
            options={[
              {"No Auth, No Priv", "noAuthNoPriv"},
              {"Auth, No Priv", "authNoPriv"},
              {"Auth, Priv", "authPriv"}
            ]}
          />

          <.input
            field={@form[:snmpv3_username]}
            type="text"
            label={t("Username")}
            placeholder={t("Leave blank to inherit from organization")}
          />
          
<!-- Auth fields (shown for authNoPriv and authPriv) -->
          <%= if @form[:snmpv3_security_level].value in ["authNoPriv", "authPriv"] do %>
            <.input
              field={@form[:snmpv3_auth_protocol]}
              type="select"
              label={t("Auth Protocol")}
              prompt="Select protocol"
              options={[
                {"SHA-256 (recommended)", "SHA-256"},
                {"SHA-512", "SHA-512"},
                {"SHA-384", "SHA-384"},
                {"SHA-224", "SHA-224"},
                {"SHA (SHA-1)", "SHA"},
                {"MD5", "MD5"}
              ]}
            />

            <.input
              field={@form[:snmpv3_auth_password]}
              type="password"
              label={t("Auth Password")}
              placeholder={t("Min 8 characters")}
              autocomplete="off"
            />
          <% end %>
          
<!-- Priv fields (shown only for authPriv) -->
          <%= if @form[:snmpv3_security_level].value == "authPriv" do %>
            <.input
              field={@form[:snmpv3_priv_protocol]}
              type="select"
              label={t("Privacy Protocol")}
              prompt="Select protocol"
              options={[
                {"AES-128 (recommended)", "AES"},
                {"AES-256", "AES-256"},
                {"AES-192", "AES-192"},
                {"AES-256-C", "AES-256-C"},
                {"DES (legacy)", "DES"}
              ]}
            />

            <.input
              field={@form[:snmpv3_priv_password]}
              type="password"
              label={t("Privacy Password")}
              placeholder={t("Min 8 characters")}
              autocomplete="off"
            />
          <% end %>
        <% end %>

        <.input
          field={@form[:snmp_port]}
          type="number"
          label={t("SNMP Port")}
          placeholder={t("Leave blank to inherit from organization (default: 161)")}
        />

        <%= if @live_action == :edit and @site.snmp_community do %>
          <div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
            <p class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
              {t("Force Apply to Site Device")}
            </p>
            <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
              {t("This will override SNMP settings for ALL devices at this site.")}
            </p>
            <.button
              type="button"
              phx-click="apply_snmp_to_all"
              data-confirm={
                t("This will replace SNMP settings for ALL devices at this site. Are you sure?")
              }
              variant="danger"
            >
              <.icon name="hero-arrow-path" class="h-4 w-4" /> Apply SNMP Config to All Device
            </.button>
          </div>
        <% end %>
      </div>

      <%= if false and @current_scope.user.is_superuser do %>
        <div class="mt-6 border-t pt-6">
          <h3 class="text-base font-medium mb-4">
            {t("MikroTik API Configuration")}
            <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
            {t(
              "Override organization MikroTik API defaults for all devices at this site. Leave blank to inherit from organization. Only applies to MikroTik devices."
            )}
          </p>
          <div class="mb-4 rounded-md bg-blue-50 dark:bg-blue-900/20 p-3">
            <p class="text-xs text-blue-700 dark:text-blue-300">
              <.icon name="hero-beaker" class="h-4 w-4 inline" />
              <strong>{t("Experimental Feature:")}</strong>
              {t("MikroTik API integration is under active development.")}
            </p>
          </div>

          <.input
            field={@form[:mikrotik_enabled]}
            type="checkbox"
            label={t("Enable MikroTik API")}
          />

          <%= if @form[:mikrotik_enabled].value do %>
            <.input
              field={@form[:mikrotik_username]}
              type="text"
              label={t("Username")}
              placeholder={t("Leave blank to inherit from organization")}
            />

            <.input
              field={@form[:mikrotik_password]}
              type="password"
              label={t("Password")}
              placeholder={t("Leave blank to inherit from organization")}
            />

            <.input
              field={@form[:mikrotik_port]}
              type="number"
              label={t("API Port")}
              placeholder="8729 (SSL) or 8728 (plain)"
            />

            <.input
              field={@form[:mikrotik_use_ssl]}
              type="checkbox"
              label={t("Use SSL (API-SSL)")}
            />

            <%= if @form[:mikrotik_use_ssl].value == false do %>
              <div class="mt-3 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
                <p class="text-sm text-red-700 dark:text-red-300">
                  <strong>🚨 Critical Security Warning:</strong>
                  {t(
                    "Plain API (port 8728) sends credentials unencrypted over the network. This setting is"
                  )}
                  <strong>blocked for devices using cloud pollers</strong>
                  and should only be used with local agents on trusted networks.
                </p>
              </div>
            <% else %>
              <div class="mt-3 rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
                <p class="text-sm text-yellow-700 dark:text-yellow-300">
                  <strong>⚠️ Security Warning:</strong>
                  {t(
                    "Plain API (port 8728) sends credentials unencrypted. Use SSL (port 8729) whenever possible."
                  )}
                </p>
              </div>
            <% end %>
          <% end %>
        </div>
      <% end %>

      <div class="flex gap-3 mt-6">
        <.button phx-disable-with={t("Saving...")} variant="primary">Save Site</.button>
        <.button navigate={~p"/sites"}>{t("Cancel")}</.button>
      </div>
    </.form>

    <%= if @live_action == :edit do %>
      <div class="mt-12 pt-8 border-t border-gray-200 dark:border-white/10">
        <h3 class="text-lg font-semibold text-red-600 dark:text-red-500 mb-4">
          {t("Danger Zone")}
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
          {t(
            "Once you delete a site, there is no going back. This will also delete all devices at this site."
          )}
        </p>
        <.button
          phx-click="delete"
          data-confirm={
            t(
              "Are you sure you want to delete this site? This will also delete all devices at this site."
            )
          }
          variant="danger"
        >
          <.icon name="hero-trash" class="h-4 w-4" /> Delete Site
        </.button>
      </div>
    <% end %>
  </div>
</Layouts.authenticated>