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

<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  active_page="maintenance"
  unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
>
  <div class="mb-6">
    <.link
      navigate={~p"/maintenance"}
      class="inline-flex items-center gap-1 text-sm text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
    >
      <.icon name="hero-arrow-left" class="h-4 w-4" />
      {t("Back to Maintenance Windows")}
    </.link>
  </div>

  <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-6">{@page_title}</h1>

  <div class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 p-6">
    <.form
      for={@form}
      phx-change="validate"
      phx-submit="save"
      id="maintenance-form"
    >
      <div class="space-y-6">
        <%!-- Name --%>
        <.input
          field={@form[:name]}
          type="text"
          label={t("Name") <> " *"}
          required
          placeholder={t("e.g., Tower firmware upgrade")}
        />

        <%!-- Reason --%>
        <.input
          field={@form[:reason]}
          type="textarea"
          label={t("Reason")}
          rows="3"
          placeholder={t("Optional description of the maintenance work")}
        />

        <%!-- Scope --%>
        <div>
          <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-2">
            {t("Scope")}
          </label>
          <div class="flex items-center gap-4 mb-3">
            <label class="inline-flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="scope_type"
                value="org"
                checked={@scope_type == "org"}
                phx-click="change_scope"
                phx-value-scope_type="org"
                class="text-cerulean-600 focus:ring-cerulean-500 dark:bg-cool-steel-800 dark:border-white/10"
              />
              <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
                {t("Org-wide")}
              </span>
            </label>
            <label class="inline-flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="scope_type"
                value="site"
                checked={@scope_type == "site"}
                phx-click="change_scope"
                phx-value-scope_type="site"
                class="text-cerulean-600 focus:ring-cerulean-500 dark:bg-cool-steel-800 dark:border-white/10"
              />
              <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
                {t("Site")}
              </span>
            </label>
            <label class="inline-flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="scope_type"
                value="device"
                checked={@scope_type == "device"}
                phx-click="change_scope"
                phx-value-scope_type="device"
                class="text-cerulean-600 focus:ring-cerulean-500 dark:bg-cool-steel-800 dark:border-white/10"
              />
              <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
                {t("Device")}
              </span>
            </label>
          </div>

          <%= if @scope_type == "site" do %>
            <.input
              field={@form[:site_id]}
              type="select"
              prompt={t("Select a site...")}
              options={Enum.map(@sites, &{&1.name, &1.id})}
            />
          <% end %>

          <%= if @scope_type == "device" do %>
            <.input
              field={@form[:device_id]}
              type="select"
              prompt={t("Select a device...")}
              options={Enum.map(@devices, &{&1.name, &1.id})}
            />
          <% end %>
        </div>

        <%!-- Time Range --%>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <.input
            field={@form[:starts_at]}
            type="datetime-local"
            label={t("Starts At") <> " *"}
            required
            value={format_datetime_local(@form[:starts_at].value)}
          />
          <.input
            field={@form[:ends_at]}
            type="datetime-local"
            label={t("Ends At") <> " *"}
            required
            value={format_datetime_local(@form[:ends_at].value)}
          />
        </div>

        <%!-- Suppress Alerts --%>
        <.input
          field={@form[:suppress_alerts]}
          type="checkbox"
          label={t("Suppress alerts during this window")}
        />

        <%!-- Recurring --%>
        <.input
          field={@form[:recurring]}
          type="checkbox"
          label={t("Recurring")}
        />

        <%!-- Recurrence Rule --%>
        <%= if Phoenix.HTML.Form.input_value(@form, :recurring) == true do %>
          <.input
            field={@form[:recurrence_rule]}
            type="text"
            label={t("Recurrence Rule")}
            placeholder={t("e.g., FREQ=WEEKLY;BYDAY=SU")}
          />
        <% end %>

        <%!-- Submit --%>
        <div class="flex items-center justify-end gap-3 pt-4 border-t border-cool-steel-200 dark:border-white/10">
          <.link
            navigate={~p"/maintenance"}
            class="rounded-lg px-4 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800 transition-colors"
          >
            {t("Cancel")}
          </.link>
          <button
            type="submit"
            class="rounded-lg bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 transition-colors"
          >
            {t("Save")}
          </button>
        </div>
      </div>
    </.form>
  </div>
</Layouts.authenticated>