Beginner

defmodule MyAppWeb.HelloLive do
# => Defines module MyAppWeb.HelloLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
  # => Imports LiveView macros and behaviors
  # => Sets up module as a LiveView process
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    # => mount/3 is called when LiveView first loads
    # => _params: URL parameters (ignored here)
    # => _session: HTTP session data (ignored here)
    # => socket: The LiveView connection struct
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
    # => Returns {:ok, socket} tuple
    # => Signals successful mount, ready to render
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    # => render/1 generates the HTML template
    # => assigns: Map containing all socket assigns
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <h1>Hello LiveView!</h1>
      <!-- => H1 heading element -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => ~H sigil defines HEEx template
    # => Returns rendered HTML structure
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.CounterLive do
# => Defines module MyAppWeb.CounterLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    # => Initialize socket assigns with assign/3
    socket = assign(socket, :count, 0)
    # => socket.assigns.count = 0
 
    # => Creates socket.assigns.count = 0
    # => assign/3 takes: socket, key, value
    socket = assign(socket, :message, "Ready to count")
    # => socket.assigns.message = "Ready to count"
 
    # => Creates socket.assigns.message = "Ready to count"
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
    # => Returns socket with initialized assigns
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p><%= @count %></p>
      <!-- => @count accesses assigns.count (0) -->
      <p><%= @message %></p>
      <!-- => @message accesses assigns.message -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => <%= %> syntax interpolates Elixir expressions
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.TemplateLive do
# => Defines module MyAppWeb.TemplateLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket = assign(socket, :title, "LiveView Template")
    # => socket.assigns.title = "LiveView Template"
 
    # => assigns.title = "LiveView Template"
    socket = assign(socket, :items, ["Alpha", "Beta", "Gamma"])
    # => socket.assigns.items = ["Alpha", "Beta", "Gamma"]
 
    # => assigns.items = list of strings
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <h1><%= @title %></h1>
      <!-- => Outputs "LiveView Template" -->
      <ul>
      <!-- => List container for rendered items -->
        <%= for item <- @items do %>
          <!-- => Loops over ["Alpha", "Beta", "Gamma"] -->
          <li><%= item %></li>
          <!-- => Renders <li>Alpha</li>, <li>Beta</li>, <li>Gamma</li> -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ul>
      <!-- => Closes unordered list container -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => ~H""" opens HEEx template block
    # => Triple quotes allow multi-line templates
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ClickLive do
# => Defines module MyAppWeb.ClickLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket = assign(socket, :clicks, 0)
    # => socket.assigns.clicks = 0
 
    # => Initial state: clicks = 0
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("increment", _params, socket) do
  # => Handles "increment" event from client
 
    # => handle_event/3 responds to user interactions
    # => "increment": event name from phx-click attribute
    # => _params: event metadata (unused here)
    # => socket: current socket state
    clicks = socket.assigns.clicks + 1
    # => clicks bound to result of socket.assigns.clicks + 1
 
    # => Get current clicks, add 1
    socket = assign(socket, :clicks, clicks)
    # => socket.assigns.clicks = clicks
 
    # => Update assigns.clicks with new value
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
    # => Returns {:noreply, socket} tuple
    # => Triggers re-render with updated state
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p>Clicks: <%= @clicks %></p>
      <!-- => Displays current click count -->
      <button phx-click="increment">Click me</button>
      <!-- => phx-click="increment" triggers handle_event("increment", ...) -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.UpdateLive do
# => Defines module MyAppWeb.UpdateLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket = assign(socket, :score, 100)
    # => socket.assigns.score = 100
 
    # => Initial score: 100
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("add_points", %{"value" => value}, socket) do
  # => Handles "add_points" event from client
 
    # => Receives event with "value" parameter
    # => Pattern matches to extract value from params map
    points = String.to_integer(value)
    # => Converts string to integer
 
    # => Convert string parameter to integer
    socket = update(socket, :score, fn current_score -> current_score + points end)
    # => Updates assigns.score using current value
 
    # => update/3 takes: socket, key, update_function
    # => update_function receives current value (100)
    # => Returns new value (100 + points)
    # => More concise than: assign(socket, :score, socket.assigns.score + points)
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
    # => Re-render with updated score
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p>Score: <%= @score %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <button phx-click="add_points" phx-value-value="10">+10</button>
      <!-- => phx-value-value="10" sends %{"value" => "10"} to handle_event -->
      <button phx-click="add_points" phx-value-value="50">+50</button>
      <!-- => Same event, different parameter value -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.LifecycleLive do
# => Defines module MyAppWeb.LifecycleLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
  require Logger
  # => Enables macros from Logger
 
  # => Import Logger for tracing lifecycle events
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    Logger.info("🔵 MOUNT called - initializing LiveView")
    # => Logs: 🔵 MOUNT called - initializing LiveView
 
    # => Logs when mount runs (twice: static + connected)
    socket = assign(socket, :lifecycle_step, "Mounted")
    # => socket.assigns.lifecycle_step = "Mounted"
 
    # => Set initial state
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
    # => First mount: static render for initial HTML
    # => Second mount: connected render over WebSocket
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("trigger_event", _params, socket) do
  # => Handles "trigger_event" event from client
 
    Logger.info("🟢 HANDLE_EVENT called - processing user interaction")
    # => Logs: 🟢 HANDLE_EVENT called - processing user interactio
 
    # => Logs when event handler runs
    socket = assign(socket, :lifecycle_step, "Event handled, re-rendering")
    # => socket.assigns.lifecycle_step = "Event handled, re-rendering"
 
    # => Update state to trigger re-render
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
    # => Returning socket triggers render/1 again
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    Logger.info("🟣 RENDER called - generating HTML")
    # => Logs: 🟣 RENDER called - generating HTML
 
    # => Logs every render (initial + every state change)
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p>Lifecycle Step: <%= @lifecycle_step %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <button phx-click="trigger_event">Trigger Event</button>
      <!-- => Button triggers handle_event("trigger_event", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Check browser console and server logs to see lifecycle flow
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.StateLive do
# => Defines module MyAppWeb.StateLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    # => INITIAL STATE - set once during mount
    socket = assign(socket, :user_name, "Guest")
    # => socket.assigns.user_name = "Guest"
 
    # => Static value: user_name = "Guest"
    socket = assign(socket, :page_loaded_at, DateTime.utc_now())
    # => socket.assigns.page_loaded_at = DateTime.utc_now(
 
    # => Timestamp when LiveView mounted
    # => DYNAMIC STATE - will change via events
    socket = assign(socket, :interaction_count, 0)
    # => socket.assigns.interaction_count = 0
 
    # => interaction_count starts at 0, increments with events
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("interact", _params, socket) do
  # => Handles "interact" event from client
 
    # => Updates DYNAMIC STATE only
    socket = update(socket, :interaction_count, &(&1 + 1))
    # => Updates assigns.interaction_count using current value
 
    # => Increments interaction_count
    # => user_name and page_loaded_at remain unchanged
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p>User: <%= @user_name %></p>
      <!-- => Shows initial value, never changes -->
      <p>Page loaded: <%= @page_loaded_at %></p>
      <!-- => Shows mount timestamp, never changes -->
      <p>Interactions: <%= @interaction_count %></p>
      <!-- => Updates with each button click -->
      <button phx-click="interact">Interact</button>
      <!-- => Button triggers handle_event("interact", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.DebugLive do
# => Defines module MyAppWeb.DebugLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
  require Logger
  # => Enables macros from Logger
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket = assign(socket, :debug_value, "initial")
    # => socket.assigns.debug_value = "initial"
 
    # => Set initial state
    Logger.debug("Mount assigns: #{inspect(socket.assigns)}")
    # => Logs: Mount assigns: #{inspect(socket.assigns)}
 
    # => Log all assigns to see initial state
    # => Output: Mount assigns: %{debug_value: "initial", ...}
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("change_value", %{"new_value" => new_value}, socket) do
  # => Handles "change_value" event from client
 
    Logger.debug("BEFORE event - assigns: #{inspect(socket.assigns)}")
    # => Logs: BEFORE event - assigns: #{inspect(socket.assigns)}
 
    # => Log state BEFORE change
    socket = assign(socket, :debug_value, new_value)
    # => socket.assigns.debug_value = new_value
 
    # => Update state
    Logger.debug("AFTER event - assigns: #{inspect(socket.assigns)}")
    # => Logs: AFTER event - assigns: #{inspect(socket.assigns)}
 
    # => Log state AFTER change
    Logger.debug("Changed debug_value from '#{socket.assigns.debug_value}' to '#{new_value}'")
    # => Logs: Changed debug_value from '#{socket.assigns.debug_v
 
    # => Log specific change
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    # => Use IO.inspect to debug assigns in render
    IO.inspect(assigns, label: "RENDER assigns")
    # => Output: RENDER assigns: <value printed to console>
 
    # => Prints to server console with label
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p>Debug Value: <%= @debug_value %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <button phx-click="change_value" phx-value-new_value="changed">Change</button>
      <!-- => Sends new_value parameter to event handler -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.MultiAssignLive do
# => Defines module MyAppWeb.MultiAssignLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    # => APPROACH 1: Pipe multiple assign calls
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:name, "Alice")
      # => Sets assigns.name
 
      # => assigns.name = "Alice"
      |> assign(:age, 30)
      # => Sets assigns.age
 
      # => assigns.age = 30
      |> assign(:city, "Jakarta")
      # => Sets assigns.city
 
      # => assigns.city = "Jakarta"
    # => Pipe operator chains assign operations
    # => More readable for sequential assignments
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("update_all", _params, socket) do
  # => Handles "update_all" event from client
 
    # => APPROACH 2: Assign with keyword list
    socket = assign(socket, name: "Bob", age: 25, city: "Surabaya")
    # => Updates socket assigns
 
    # => assign/2 takes keyword list for multiple values
    # => Equivalent to three separate assign calls
    # => More concise for updating multiple assigns at once
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p>Name: <%= @name %>, Age: <%= @age %>, City: <%= @city %></p>
      <!-- => Shows all three assigns -->
      <button phx-click="update_all">Update All</button>
      <!-- => Button triggers handle_event("update_all", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ConnectedLive do
# => Defines module MyAppWeb.ConnectedLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    if connected?(socket) do
    # => Returns true when WebSocket established
 
      # => connected?/1 returns true during WebSocket mount
      Logger.info("✅ Connected mount - WebSocket established")
      # => Logs: ✅ Connected mount - WebSocket established
 
      # => Runs ONLY on second mount (connected)
      # => Use for: subscribing to PubSub, starting timers
      socket = assign(socket, :connection_status, "Connected via WebSocket")
      # => socket.assigns.connection_status = "Connected via WebSocket"
 
      # => Status shows connected state
      {:ok, socket}
      # => Returns success tuple to LiveView runtime
 
    else
      # => connected?/1 returns false during static render
      Logger.info("⚠️  Static mount - pre-WebSocket")
      # => Logs: ⚠️  Static mount - pre-WebSocket
 
      # => Runs ONLY on first mount (static HTML)
      # => Use for: setting initial state without side effects
      socket = assign(socket, :connection_status, "Static render")
      # => socket.assigns.connection_status = "Static render"
 
      # => Status shows static state
      {:ok, socket}
      # => Returns success tuple to LiveView runtime
 
    end
    # => Mount runs TWICE total:
    # => 1. Static render (connected? = false) - fast initial HTML
    # => 2. Connected render (connected? = true) - WebSocket upgrade
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p>Status: <%= @connection_status %></p>
      <!-- => Initially shows "Static render" -->
      <!-- => Updates to "Connected via WebSocket" after mount #2 -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.HEExLive do
# => Defines module MyAppWeb.HEExLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:user, "Alice")
      # => Sets assigns.user
 
      |> assign(:score, 42)
      # => Sets assigns.score
 
      |> assign(:tags, ["elixir", "phoenix", "liveview"])
      # => Sets assigns.tags
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- OUTPUT WITH <%= %> - evaluates expression and outputs result -->
      <p>User: <%= @user %></p>
      <!-- => Outputs: User: Alice -->
 
      <!-- EXPRESSION WITHOUT OUTPUT <% %> - evaluates but doesn't output -->
      <% computed_score = @score * 2 %>
      <!-- => Computes but doesn't render anything -->
 
      <!-- USE COMPUTED VALUE -->
      <p>Double Score: <%= computed_score %></p>
      <!-- => Outputs: Double Score: 84 -->
 
      <!-- CONDITIONAL RENDERING -->
      <%= if @score > 40 do %>
      <!-- => Renders inner content only when @score > 40 is truthy -->
        <span class="high-score">Excellent!</span>
        <!-- => Renders because 42 > 40 -->
      <% else %>
      <!-- => Else branch — renders when condition is false -->
        <span class="low-score">Keep trying</span>
        <!-- => Doesn't render -->
      <% end %>
      <!-- => End of conditional/loop block -->
 
      <!-- LOOP COMPREHENSION -->
      <ul>
      <!-- => List container for rendered items -->
        <%= for tag <- @tags do %>
          <!-- => Loops through ["elixir", "phoenix", "liveview"] -->
          <li><%= String.upcase(tag) %></li>
          <!-- => Renders: <li>ELIXIR</li>, <li>PHOENIX</li>, <li>LIVEVIEW</li> -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ul>
      <!-- => Closes unordered list container -->
 
      <!-- INLINE FUNCTION CALLS -->
      <p>Length: <%= length(@tags) %></p>
      <!-- => Outputs: Length: 3 -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.DynamicLive do
# => Defines module MyAppWeb.DynamicLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:temperature_celsius, 25)
      # => Sets assigns.temperature_celsius
 
      |> assign(:items, ["apple", "banana", "cherry"])
      # => Sets assigns.items
 
      |> assign(:show_details, false)
      # => Sets assigns.show_details
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("toggle_details", _params, socket) do
  # => Handles "toggle_details" event from client
 
    socket = update(socket, :show_details, &(!&1))
    # => Updates assigns.show_details using current value
 
    # => Toggles true <-> false
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- COMPUTED VALUE IN TEMPLATE -->
      <p>Temperature: <%= @temperature_celsius %>°C / <%= celsius_to_fahrenheit(@temperature_celsius) %>°F</p>
      <!-- => Calls helper function to convert -->
      <!-- => Outputs: Temperature: 25°C / 77°F -->
 
      <!-- CONDITIONAL BLOCK RENDERING -->
      <%= if @show_details do %>
      <!-- => Renders inner content only when @show_details is truthy -->
        <div class="details">
        <!-- => Div container with class="details" -->
          <p>Details are visible</p>
          <!-- => Paragraph element displaying dynamic content -->
          <ul>
          <!-- => List container for rendered items -->
            <%= for item <- @items do %>
            <!-- => Loops over @items, binding each element to item -->
              <li><%= item %> (<%= String.length(item) %> chars)</li>
              <!-- => List item rendered for each element -->
              # => Returns string character count
 
              <!-- => Shows item with computed character count -->
            <% end %>
            <!-- => End of conditional/loop block -->
          </ul>
          <!-- => Closes unordered list container -->
        </div>
        <!-- => Closes outer div container -->
      <% end %>
      <!-- => End of conditional/loop block -->
 
      <button phx-click="toggle_details">Toggle Details</button>
      <!-- => Button triggers handle_event("toggle_details", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  # Helper function for temperature conversion
  defp celsius_to_fahrenheit(celsius) do
  # => Defines celsius_to_fahrenheit function
 
    # => Private helper for template computation
    (celsius * 9 / 5) + 32
    # => Returns fahrenheit value
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ConditionalLive do
# => Defines module MyAppWeb.ConditionalLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:user_logged_in, false)
      # => Sets assigns.user_logged_in
 
      |> assign(:items_count, 0)
      # => Sets assigns.items_count
 
      |> assign(:loading, false)
      # => Sets assigns.loading
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("login", _params, socket) do
  # => Handles "login" event from client
 
    socket = assign(socket, :user_logged_in, true)
    # => socket.assigns.user_logged_in = true
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("add_item", _params, socket) do
  # => Handles "add_item" event from client
 
    socket = update(socket, :items_count, &(&1 + 1))
    # => Updates assigns.items_count using current value
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- IF CONDITION - renders when true -->
      <%= if @user_logged_in do %>
      <!-- => Renders inner content only when @user_logged_in is truthy -->
        <p>Welcome back!</p>
        <!-- => Paragraph element displaying dynamic content -->
        <button phx-click="add_item">Add Item</button>
        <!-- => Button triggers handle_event("add_item", ...) on click -->
      <% end %>
      <!-- => End of conditional/loop block -->
 
      <!-- IF-ELSE - renders one branch -->
      <%= if @items_count > 0 do %>
      <!-- => Renders inner content only when @items_count > 0 is truthy -->
        <p>You have <%= @items_count %> items</p>
        <!-- => Paragraph element displaying dynamic content -->
      <% else %>
      <!-- => Else branch — renders when condition is false -->
        <p>No items yet</p>
        <!-- => Paragraph element displaying dynamic content -->
      <% end %>
      <!-- => End of conditional/loop block -->
 
      <!-- UNLESS - inverse of if, renders when false -->
      <%= unless @user_logged_in do %>
      <!-- => Renders inner content only when @user_logged_in is falsy -->
        <button phx-click="login">Login</button>
        <!-- => Renders when user_logged_in is false -->
      <% end %>
      <!-- => End of conditional/loop block -->
 
      <!-- UNLESS - more readable than if !condition -->
      <%= unless @loading do %>
      <!-- => Renders inner content only when @loading is falsy -->
        <p>Content loaded</p>
        <!-- => Paragraph element displaying dynamic content -->
      <% end %>
      <!-- => End of conditional/loop block -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.LoopLive do
# => Defines module MyAppWeb.LoopLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:users, [
      # => Sets assigns.users
 
        %{id: 1, name: "Alice", role: "admin"},
        # => Map with id: 1 — hardcoded sample data for demonstration
        %{id: 2, name: "Bob", role: "user"},
        # => Map with id: 2 — hardcoded sample data for demonstration
        %{id: 3, name: "Carol", role: "user"}
        # => Map with id: 3 — hardcoded sample data for demonstration
      ])
      |> assign(:numbers, 1..5)
      # => Sets assigns.numbers
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- BASIC LOOP - iterate over list -->
      <ul>
      <!-- => List container for rendered items -->
        <%= for user <- @users do %>
          <!-- => Loops through each user map -->
          <li><%= user.name %> (<%= user.role %>)</li>
          <!-- => Accesses map fields with .field syntax -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ul>
      <!-- => Closes unordered list container -->
 
      <!-- LOOP WITH INDEX - use Enum.with_index -->
      <ol>
      <!-- => List container for rendered items -->
        <%= for {user, index} <- Enum.with_index(@users, 1) do %>
        # => Pairs each element with its index
 
          <!-- => Enum.with_index adds index, starting at 1 -->
          <!-- => Destructures to {user, index} -->
          <li><%= index %>. <%= user.name %></li>
          <!-- => Outputs: 1. Alice, 2. Bob, 3. Carol -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ol>
 
      <!-- LOOP WITH FILTER - use pattern matching -->
      <ul class="admins">
      <!-- => List container for rendered items -->
        <%= for %{role: "admin"} = user <- @users do %>
          <!-- => Pattern matches only users with role: "admin" -->
          <!-- => Only Alice matches -->
          <li>Admin: <%= user.name %></li>
          <!-- => List item rendered for each element -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ul>
      <!-- => Closes unordered list container -->
 
      <!-- LOOP OVER RANGE -->
      <ul>
      <!-- => List container for rendered items -->
        <%= for n <- @numbers do %>
        <!-- => Loops over @numbers, binding each element to n -->
          <li>Square of <%= n %> is <%= n * n %></li>
          <!-- => Computes on each iteration -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ul>
      <!-- => Closes unordered list container -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ComponentLive do
# => Defines module MyAppWeb.ComponentLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:user_name, "Alice")
      # => Sets assigns.user_name
 
      |> assign(:notifications, 5)
      # => Sets assigns.notifications
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- CALLING FUNCTION COMPONENT -->
      <.header text="Welcome to LiveView" />
      <!-- => Calls header/1 function component below -->
      <!-- => Passes text attribute as assigns.text -->
 
      <!-- COMPONENT WITH MULTIPLE ATTRIBUTES -->
      <.user_badge name={@user_name} count={@notifications} />
      <!-- => Passes multiple attributes -->
      <!-- => name={@user_name} binds assigns.name -->
      <!-- => count={@notifications} binds assigns.count -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  # Function component - renders header
  defp header(assigns) do
  # => Defines header function
 
    # => Function component takes assigns map
    # => Private function (defp) - only used in this module
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <header class="page-header">
    <!-- => header HTML element -->
      <h1><%= @text %></h1>
      <!-- => Accesses assigns.text passed from caller -->
    </header>
    """
    # => Returns rendered HTML
  end
  # => Closes enclosing function/module/block definition
 
  # Function component - renders user badge
  defp user_badge(assigns) do
  # => Defines user_badge function
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div class="user-badge">
    <!-- => Div container with class="user-badge" -->
      <span class="name"><%= @name %></span>
      <!-- => Accesses assigns.name -->
      <%= if @count > 0 do %>
      <!-- => Renders inner content only when @count > 0 is truthy -->
        <span class="badge"><%= @count %></span>
        <!-- => Accesses assigns.count -->
      <% end %>
      <!-- => End of conditional/loop block -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.SlotLive do
# => Defines module MyAppWeb.SlotLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket = assign(socket, :show_card, true)
    # => socket.assigns.show_card = true
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- COMPONENT WITH SLOT CONTENT -->
      <.card>
        <!-- => Content between opening and closing tags -->
        <p>This is the card body content</p>
        <!-- => Paragraph element displaying dynamic content -->
        <button>Click me</button>
        <!-- => Entire block passed as inner_block slot -->
      </.card>
      <!-- => Closes .card element -->
 
      <!-- COMPONENT WITH NAMED SLOTS -->
      <.modal title="Confirmation">
        <!-- => title attribute passed as assigns.title -->
        <:body>
          <!-- => Named slot :body -->
          <p>Are you sure you want to proceed?</p>
          <!-- => Paragraph element displaying dynamic content -->
        </:body>
        <:footer>
          <!-- => Named slot :footer -->
          <button>Cancel</button>
          <!-- => Button element -->
          <button>Confirm</button>
          <!-- => Button element -->
        </:footer>
      </.modal>
      <!-- => Closes .modal element -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  # Component with default slot (inner_block)
  defp card(assigns) do
  # => Defines card function
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div class="card">
    <!-- => Div container with class="card" -->
      <%= render_slot(@inner_block) %>
      # => Renders inner_block slot content from caller
 
      <!-- => render_slot/1 renders the slot content -->
      <!-- => @inner_block contains content from caller -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  # Component with named slots
  attr :title, :string, required: true
  # => Declares title attribute of type string
 
  # => attr/3 declares component attribute
  # => :title is required string
  slot :body, required: true
  # => Declares body slot for content injection
 
  # => slot/2 declares named slot
  slot :footer, required: true
  # => Declares footer slot for content injection
 
 
  defp modal(assigns) do
  # => Defines modal function
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div class="modal">
    <!-- => Div container with class="modal" -->
      <h2><%= @title %></h2>
      <!-- => Renders title attribute -->
      <div class="modal-body">
      <!-- => Div container with class="modal-body" -->
        <%= render_slot(@body) %>
        # => Renders body slot content from caller
 
        <!-- => Renders :body slot content -->
      </div>
      <!-- => Closes outer div container -->
      <div class="modal-footer">
      <!-- => Div container with class="modal-footer" -->
        <%= render_slot(@footer) %>
        # => Renders footer slot content from caller
 
        <!-- => Renders :footer slot content -->
      </div>
      <!-- => Closes outer div container -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

# LIVECOMPONENT DEFINITION
defmodule MyAppWeb.CounterComponent do
# => Defines module MyAppWeb.CounterComponent
 
  use Phoenix.LiveComponent
  # => Imports Phoenix.LiveComponent behavior
 
  # => use LiveComponent instead of LiveView
 
  # LIVECOMPONENT LIFECYCLE
  def update(assigns, socket) do
  # => Called on component mount and parent updates
 
    # => update/2 is like mount for components
    # => Called when component mounts OR when assigns change
    # => assigns: map of attributes passed to component
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(assigns)
      # => Assigns value to socket
 
      # => Merge passed assigns into socket
      |> assign_new(:count, fn -> 0 end)
      # => Sets assigns.count only if not already present
 
      # => assign_new sets value only if not already present
      # => Prevents resetting count on re-render
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  # EVENT HANDLING IN LIVECOMPONENT
  def handle_event("increment", _params, socket) do
  # => Handles "increment" event from client
 
    # => handle_event works same as LiveView
    socket = update(socket, :count, &(&1 + 1))
    # => Updates assigns.count using current value
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
    # => Re-renders ONLY this component, not parent LiveView
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div class="counter-component">
    <!-- => Div container with class="counter-component" -->
      <p>Component Count: <%= @count %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <button phx-click="increment" phx-target={@myself}>
        <!-- => phx-target={@myself} routes event to THIS component -->
        <!-- => Without phx-target, event goes to parent LiveView -->
        Increment Component
      </button>
      <!-- => Closes button element -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition
 
# USING LIVECOMPONENT IN LIVEVIEW
defmodule MyAppWeb.ComponentHostLive do
# => Defines module MyAppWeb.ComponentHostLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <h1>LiveComponent Example</h1>
      <!-- => H1 heading element -->
      <.live_component module={MyAppWeb.CounterComponent} id="counter-1" />
      <!-- => module: component module -->
      <!-- => id: unique identifier (required) -->
      <.live_component module={MyAppWeb.CounterComponent} id="counter-2" initial_count={10} />
      <!-- => Each instance has independent state -->
      <!-- => Can pass additional assigns like initial_count -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.AttributeLive do
# => Defines module MyAppWeb.AttributeLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- COMPONENT WITH REQUIRED ATTRIBUTE -->
      <.button text="Click Me" type="primary" />
      <!-- => text and type passed as attributes -->
 
      <!-- COMPONENT WITH OPTIONAL ATTRIBUTE -->
      <.button text="Submit" type="success" disabled={true} />
      <!-- => disabled is optional attribute -->
 
      <!-- COMPONENT WITH DEFAULT VALUE -->
      <.alert message="Warning!" />
      <!-- => severity not provided, uses default -->
 
      <.alert message="Error occurred" severity="error" />
      <!-- => severity provided, overrides default -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  # ATTRIBUTE DECLARATIONS
  attr :text, :string, required: true
  # => Declares text attribute of type string
 
  # => attr/3 declares attribute
  # => :text is attribute name
  # => :string is type
  # => required: true makes it mandatory
  attr :type, :string, default: "default"
  # => Declares type attribute of type string
 
  # => default: "default" provides fallback value
  attr :disabled, :boolean, default: false
  # => Declares disabled attribute of type boolean
 
  # => :boolean type for true/false values
 
  defp button(assigns) do
  # => Defines button function
 
    # => assigns contains validated attributes
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <button class={["btn", "btn-#{@type}"]} disabled={@disabled}>
    <!-- => Button element -->
      <%= @text %>
      <!-- => Outputs assigns.text value as HTML -->
    </button>
    <!-- => Closes button element -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  attr :message, :string, required: true
  # => Declares message attribute of type string
 
  attr :severity, :string, default: "info", values: ["info", "warning", "error"]
  # => Declares severity attribute of type string
 
  # => values: [...] restricts to allowed values
  # => Raises error if invalid value passed
 
  defp alert(assigns) do
  # => Defines alert function
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div class={["alert", "alert-#{@severity}"]}>
    <!-- => Div container with class="class" -->
      <%= @message %>
      <!-- => Outputs assigns.message value as HTML -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.StylingLive do
# => Defines module MyAppWeb.StylingLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:active, false)
      # => Sets assigns.active
 
      |> assign(:theme, "light")
      # => Sets assigns.theme
 
      |> assign(:progress, 65)
      # => Sets assigns.progress
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("toggle_active", _params, socket) do
  # => Handles "toggle_active" event from client
 
    socket = update(socket, :active, &(!&1))
    # => Updates assigns.active using current value
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("change_theme", %{"theme" => theme}, socket) do
  # => Handles "change_theme" event from client
 
    socket = assign(socket, :theme, theme)
    # => socket.assigns.theme = theme
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- CONDITIONAL CLASS WITH LIST -->
      <button class={["btn", @active && "active"]} phx-click="toggle_active">
        <!-- => class attribute accepts list -->
        <!-- => "btn" always present -->
        <!-- => "active" only when @active is true -->
        <!-- => nil/false values filtered out automatically -->
        Toggle
      </button>
      <!-- => Closes button element -->
 
      <!-- MULTIPLE CONDITIONAL CLASSES -->
      <div class={[
      <!-- => Div container with class="class" -->
        "panel",
        @theme == "dark" && "panel-dark",
        # => Module-level constant @theme = == "dark" && "panel-dark",
        @theme == "light" && "panel-light",
        # => Module-level constant @theme = == "light" && "panel-light",
        @active && "panel-active"
        # => Module-level constant @active = && "panel-active"
      ]}>
        <!-- => Multiple conditions evaluated -->
        <!-- => Example: ["panel", false, "panel-light", false] -->
        <!-- => Becomes: "panel panel-light" -->
        Content
      </div>
      <!-- => Closes outer div container -->
 
      <!-- DYNAMIC INLINE STYLES -->
      <div style={"width: #{@progress}%"} class="progress-bar">
        <!-- => String interpolation for inline styles -->
        <!-- => Renders: style="width: 65%" -->
        <%= @progress %>%
        <!-- => Outputs assigns.progress value as HTML -->
      </div>
      <!-- => Closes outer div container -->
 
      <!-- COMPUTED CLASS NAME -->
      <span class={status_class(@progress)}>
        <!-- => Calls helper function -->
        Status
      </span>
 
      <button phx-click="change_theme" phx-value-theme="dark">Dark</button>
      <!-- => Button triggers handle_event("change_theme", ...) on click -->
      <button phx-click="change_theme" phx-value-theme="light">Light</button>
      <!-- => Button triggers handle_event("change_theme", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  # Helper for computed class
  defp status_class(progress) do
  # => Defines status_class function
 
    cond do
    # => Evaluates conditions, first true branch executes
 
      progress >= 80 -> "status-excellent"
      progress >= 50 -> "status-good"
      true -> "status-poor"
    end
    # => Closes enclosing function/module/block definition
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.IconLive do
# => Defines module MyAppWeb.IconLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket = assign(socket, :show_success, false)
    # => socket.assigns.show_success = false
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("show_success", _params, socket) do
  # => Handles "show_success" event from client
 
    socket = assign(socket, :show_success, true)
    # => socket.assigns.show_success = true
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- INLINE SVG -->
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <!-- => SVG works directly in HEEx templates -->
        <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor"/>
        <!-- => Uses currentColor for dynamic coloring via CSS -->
      </svg>
 
      <!-- SVG WITH DYNAMIC ATTRIBUTES -->
      <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
      <!-- => SVG container for vector graphics -->
        <circle cx="24" cy="24" r="20" stroke="currentColor" stroke-width="4" fill={@show_success && "#4ade80" || "none"}>
          <!-- => Conditional fill color based on state -->
          <!-- => Green when show_success is true -->
        </circle>
      </svg>
 
      <!-- SVG ICON AS COMPONENT -->
      <.icon name="check" size="24" color="#10b981" />
      <!-- => Reusable icon component -->
 
      <button phx-click="show_success">Show Success</button>
      <!-- => Button triggers handle_event("show_success", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  # Icon component for reusable SVGs
  attr :name, :string, required: true
  # => Declares name attribute of type string
 
  attr :size, :string, default: "24"
  # => Declares size attribute of type string
 
  attr :color, :string, default: "currentColor"
  # => Declares color attribute of type string
 
 
  defp icon(assigns) do
  # => Defines icon function
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <svg width={@size} height={@size} viewBox="0 0 24 24" fill="none">
    <!-- => SVG container for vector graphics -->
      <%= if @name == "check" do %>
        <!-- => Conditional SVG path based on icon name -->
        <path d="M20 6L9 17l-5-5" stroke={@color} stroke-width="2"/>
        <!-- => path HTML element -->
      <% end %>
      <!-- => End of conditional/loop block -->
      <%= if @name == "close" do %>
      <!-- => Renders inner content only when @name == "close" is truthy -->
        <path d="M18 6L6 18M6 6l12 12" stroke={@color} stroke-width="2"/>
        <!-- => path HTML element -->
      <% end %>
      <!-- => End of conditional/loop block -->
    </svg>
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ClickLive do
# => Defines module MyAppWeb.ClickLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:counter, 0)
      # => Sets assigns.counter
 
      |> assign(:last_action, "none")
      # => Sets assigns.last_action
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("increment", _params, socket) do
  # => Handles "increment" event from client
 
    # => "increment" matches phx-click="increment"
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> update(:counter, &(&1 + 1))
      # => Updates assign using current value
 
      |> assign(:last_action, "incremented")
      # => Sets assigns.last_action
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("decrement", _params, socket) do
  # => Handles "decrement" event from client
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> update(:counter, &(&1 - 1))
      # => Updates assign using current value
 
      |> assign(:last_action, "decremented")
      # => Sets assigns.last_action
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("reset", _params, socket) do
  # => Handles "reset" event from client
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:counter, 0)
      # => Sets assigns.counter
 
      |> assign(:last_action, "reset")
      # => Sets assigns.last_action
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p>Counter: <%= @counter %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <p>Last Action: <%= @last_action %></p>
      <!-- => Paragraph element displaying dynamic content -->
 
      <!-- BASIC CLICK EVENT -->
      <button phx-click="increment">
        <!-- => phx-click binds to handle_event("increment", ...) -->
        +1
      </button>
      <!-- => Closes button element -->
 
      <button phx-click="decrement">-1</button>
      <!-- => Button triggers handle_event("decrement", ...) on click -->
 
      <!-- CLICK EVENT ON NON-BUTTON ELEMENT -->
      <div phx-click="reset" class="reset-box">
        <!-- => phx-click works on any element -->
        Click to Reset
      </div>
      <!-- => Closes outer div container -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.FormLive do
# => Defines module MyAppWeb.FormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:username, "")
      # => Sets assigns.username
 
      |> assign(:email, "")
      # => Sets assigns.email
 
      |> assign(:validation_message, "")
      # => Sets assigns.validation_message
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", %{"username" => username, "email" => email}, socket) do
  # => Handles "validate" event from client
 
    # => phx-change sends form data on every input change
    # => Destructures form params
    validation_message =
    # => Binds result to variable
 
      cond do
      # => Evaluates conditions, first true branch executes
 
        String.length(username) < 3 ->
        # => Returns string character count
 
          "Username too short"
        !String.contains?(email, "@") ->
        # => Returns true if string contains substring
 
          "Invalid email"
        true ->
        # => Matches this pattern — executes right-hand side
          "Form looks good!"
      end
      # => Closes enclosing function/module/block definition
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:username, username)
      # => Sets assigns.username
 
      |> assign(:email, email)
      # => Sets assigns.email
 
      |> assign(:validation_message, validation_message)
      # => Sets assigns.validation_message
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
    # => Updates on EVERY keystroke
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("submit", %{"username" => username, "email" => email}, socket) do
  # => Handles "submit" event from client
 
    # => phx-submit sends form data on form submission
    IO.puts("Form submitted: #{username}, #{email}")
    # => Output: prints string to console
 
    # => Process submission (save to DB, etc.)
    socket = assign(socket, :validation_message, "Form submitted!")
    # => socket.assigns.validation_message = "Form submitted!"
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <form phx-change="validate" phx-submit="submit">
        <!-- => phx-change="validate" triggers on input change -->
        <!-- => phx-submit="submit" triggers on form submit -->
 
        <input type="text" name="username" value={@username} placeholder="Username" />
        <!-- => name="username" becomes key in params map -->
        <!-- => value={@username} sets input value from assigns -->
 
        <input type="email" name="email" value={@email} placeholder="Email" />
        <!-- => email input field -->
 
        <button type="submit">Submit</button>
        <!-- => Submit button — triggers phx-submit form event -->
      </form>
      <!-- => Closes form element — phx-submit/phx-change handlers deactivated -->
 
      <p class="validation"><%= @validation_message %></p>
      <!-- => Shows real-time validation feedback -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.KeyboardLive do
# => Defines module MyAppWeb.KeyboardLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:message, "")
      # => Sets assigns.message
 
      |> assign(:last_key, "")
      # => Sets assigns.last_key
 
      |> assign(:search_query, "")
      # => Sets assigns.search_query
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("keydown", %{"key" => key}, socket) do
  # => Handles "keydown" event from client
 
    # => phx-keydown sends key info on key press
    # => %{"key" => key} contains pressed key
    socket = assign(socket, :last_key, key)
    # => socket.assigns.last_key = key
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("keyup", %{"key" => "Enter"}, socket) do
  # => Handles "keyup" event from client
 
    # => Pattern match specific key
    # => Only handles Enter key on keyup
    socket = assign(socket, :message, "Enter pressed!")
    # => socket.assigns.message = "Enter pressed!"
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("keyup", %{"key" => "Escape"}, socket) do
  # => Handles "keyup" event from client
 
    # => Another pattern match for Escape
    socket = assign(socket, :search_query, "")
    # => socket.assigns.search_query = ""
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("keyup", _params, socket) do
  # => Handles "keyup" event from client
 
    # => Catch-all for other keys
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("search_keyup", %{"key" => "Enter", "value" => query}, socket) do
  # => Handles "search_keyup" event from client
 
    # => Destructures key AND input value
    # => Triggers search on Enter
    IO.puts("Searching for: #{query}")
    # => Output: prints string to console
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("search_keyup", _params, socket) do
  # => Handles "search_keyup" event from client
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- WINDOW-LEVEL KEYDOWN -->
      <div phx-window-keydown="keydown">
        <!-- => phx-window-keydown captures keys anywhere on page -->
        <p>Last key pressed: <%= @last_key %></p>
        <!-- => Paragraph element displaying dynamic content -->
      </div>
      <!-- => Closes outer div container -->
 
      <!-- INPUT-LEVEL KEYUP -->
      <input
      <!-- => text input field -->
        type="text"
        # => type bound to result of "text"
 
        placeholder="Press Enter or Escape"
        # => placeholder bound to result of "Press Enter or Escape"
 
        phx-keyup="keyup"
      />
      <!-- => phx-keyup captures key release on this input -->
 
      <!-- SEARCH INPUT WITH ENTER TO SUBMIT -->
      <input
      <!-- => text input field -->
        type="text"
        # => type bound to result of "text"
 
        placeholder="Search (press Enter)"
        # => placeholder bound to result of "Search (press Enter)"
 
        value={@search_query}
        # => value bound to result of {@search_query}
 
        phx-keyup="search_keyup"
      />
      <!-- => Self-closing tag — no inner content -->
 
      <p><%= @message %></p>
      <!-- => Paragraph element displaying dynamic content -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.FocusLive do
# => Defines module MyAppWeb.FocusLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:field1_focused, false)
      # => Sets assigns.field1_focused
 
      |> assign(:field2_focused, false)
      # => Sets assigns.field2_focused
 
      |> assign(:focus_message, "Click an input to focus")
      # => Sets assigns.focus_message
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("focus_field1", _params, socket) do
  # => Handles "focus_field1" event from client
 
    # => phx-focus sends event when element gains focus
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:field1_focused, true)
      # => Sets assigns.field1_focused
 
      |> assign(:focus_message, "Field 1 is focused")
      # => Sets assigns.focus_message
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("blur_field1", _params, socket) do
  # => Handles "blur_field1" event from client
 
    # => phx-blur sends event when element loses focus
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:field1_focused, false)
      # => Sets assigns.field1_focused
 
      |> assign(:focus_message, "Field 1 lost focus")
      # => Sets assigns.focus_message
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("focus_field2", _params, socket) do
  # => Handles "focus_field2" event from client
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:field2_focused, true)
      # => Sets assigns.field2_focused
 
      |> assign(:focus_message, "Field 2 is focused")
      # => Sets assigns.focus_message
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("blur_field2", _params, socket) do
  # => Handles "blur_field2" event from client
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:field2_focused, false)
      # => Sets assigns.field2_focused
 
      |> assign(:focus_message, "Field 2 lost focus")
      # => Sets assigns.focus_message
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <p><%= @focus_message %></p>
      <!-- => Paragraph element displaying dynamic content -->
 
      <!-- FOCUS AND BLUR EVENTS -->
      <input
      <!-- => text input field -->
        type="text"
        # => type bound to result of "text"
 
        placeholder="Field 1"
        # => placeholder bound to result of "Field 1"
 
        class={[@field1_focused && "focused"]}
        # => class bound to result of {[@field1_focused && "focused"]}
 
        phx-focus="focus_field1"
        phx-blur="blur_field1"
        <!-- => Triggers "blur_field1" event when element loses focus -->
      />
      <!-- => phx-focus triggers when input gains focus -->
      <!-- => phx-blur triggers when input loses focus -->
 
      <input
      <!-- => text input field -->
        type="text"
        # => type bound to result of "text"
 
        placeholder="Field 2"
        # => placeholder bound to result of "Field 2"
 
        class={[@field2_focused && "focused"]}
        # => class bound to result of {[@field2_focused && "focused"]}
 
        phx-focus="focus_field2"
        phx-blur="blur_field2"
        <!-- => Triggers "blur_field2" event when element loses focus -->
      />
      <!-- => Self-closing tag — no inner content -->
 
      <!-- FOCUS INDICATOR -->
      <div class="focus-indicators">
      <!-- => Div container with class="focus-indicators" -->
        <span class={["indicator", @field1_focused && "active"]}>Field 1</span>
        <!-- => span HTML element -->
        <span class={["indicator", @field2_focused && "active"]}>Field 2</span>
        <!-- => span HTML element -->
      </div>
      <!-- => Closes outer div container -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.WindowLive do
# => Defines module MyAppWeb.WindowLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:scroll_position, 0)
      # => Sets assigns.scroll_position
 
      |> assign(:window_width, 0)
      # => Sets assigns.window_width
 
      |> assign(:at_top, true)
      # => Sets assigns.at_top
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("scroll", %{"scrollY" => scroll_y}, socket) when is_number(scroll_y) do
  # => Handles "scroll" event from client
 
    # => phx-window-scroll sends scroll position
    # => scrollY is pixels scrolled from top
    at_top = scroll_y < 50
    # => at_top bound to result of scroll_y < 50
 
    # => Determine if near top of page
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:scroll_position, scroll_y)
      # => Sets assigns.scroll_position
 
      |> assign(:at_top, at_top)
      # => Sets assigns.at_top
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("scroll", _params, socket) do
  # => Handles "scroll" event from client
 
    # => Catch-all for invalid scroll data
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("resize", %{"width" => width}, socket) when is_number(width) do
  # => Handles "resize" event from client
 
    # => phx-window-resize sends window dimensions
    socket = assign(socket, :window_width, width)
    # => socket.assigns.window_width = width
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("resize", _params, socket) do
  # => Handles "resize" event from client
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div
    <!-- => Div container wrapping component content -->
      phx-window-scroll="scroll"
      phx-window-resize="resize"
    >
      <!-- => phx-window-scroll captures window scroll events -->
      <!-- => phx-window-resize captures window resize events -->
 
      <header class={["site-header", !@at_top && "scrolled"]}>
        <!-- => Conditional class when scrolled past top -->
        <p>Scroll Position: <%= @scroll_position %>px</p>
        <!-- => Paragraph element displaying dynamic content -->
        <p>Window Width: <%= @window_width %>px</p>
        <!-- => Paragraph element displaying dynamic content -->
      </header>
 
      <div style="height: 2000px; padding: 20px;">
        <!-- => Tall div to enable scrolling -->
        <p>Scroll down to see scroll position update</p>
        <!-- => Paragraph element displaying dynamic content -->
        <p>Resize window to see width update</p>
        <!-- => Paragraph element displaying dynamic content -->
      </div>
      <!-- => Closes outer div container -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.EventDataLive do
# => Defines module MyAppWeb.EventDataLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:selected_item, nil)
      # => Sets assigns.selected_item
 
      |> assign(:selected_color, nil)
      # => Sets assigns.selected_color
 
      |> assign(:last_target, "")
      # => Sets assigns.last_target
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("select_item", %{"item-id" => item_id, "item-name" => item_name}, socket) do
  # => Handles "select_item" event from client
 
    # => phx-value-item-id becomes "item-id" key
    # => phx-value-item-name becomes "item-name" key
    # => Values are always strings
    socket = assign(socket, :selected_item, "#{item_name} (ID: #{item_id})")
    # => socket.assigns.selected_item = "#{item_name} (ID: #{item_id}
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("select_color", %{"color" => color}, socket) do
  # => Handles "select_color" event from client
 
    # => Single phx-value-* attribute
    socket = assign(socket, :selected_color, color)
    # => socket.assigns.selected_color = color
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("click_with_target", params, socket) do
  # => Handles "click_with_target" event from client
 
    # => params contains event metadata
    target_id = params["target_id"] || "unknown"
    # => target_id bound to result of params["target_id"] || "unknown"
 
    # => Extract target info if available
    socket = assign(socket, :last_target, target_id)
    # => socket.assigns.last_target = target_id
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- MULTIPLE phx-value-* ATTRIBUTES -->
      <button phx-click="select_item" phx-value-item-id="101" phx-value-item-name="Apple">
        <!-- => phx-value-item-id sends item-id: "101" -->
        <!-- => phx-value-item-name sends item-name: "Apple" -->
        Select Apple
      </button>
      <!-- => Closes button element -->
 
      <button phx-click="select_item" phx-value-item-id="102" phx-value-item-name="Banana">
      <!-- => Button triggers handle_event("select_item", ...) on click -->
        Select Banana
      </button>
      <!-- => Closes button element -->
 
      <!-- SINGLE phx-value-* FOR SIMPLE DATA -->
      <div class="color-picker">
      <!-- => Div container with class="color-picker" -->
        <%= for color <- ["red", "green", "blue"] do %>
        <!-- => Loops over ["red", "green", "blue"], binding each element to color -->
          <button phx-click="select_color" phx-value-color={color} style={"background: #{color}"}>
          <!-- => Button triggers handle_event("select_color", ...) on click -->
            <%= color %>
            <!-- => Evaluates Elixir expression and outputs result as HTML -->
          </button>
          <!-- => Closes button element -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </div>
      <!-- => Closes outer div container -->
 
      <!-- EVENT WITH METADATA -->
      <div id="target-div" phx-click="click_with_target">
        <!-- => Clicking sends element metadata -->
        Click me
      </div>
      <!-- => Closes outer div container -->
 
      <p>Selected Item: <%= @selected_item || "none" %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <p>Selected Color: <%= @selected_color || "none" %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <p>Last Target: <%= @last_target %></p>
      <!-- => Paragraph element displaying dynamic content -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.DebounceLive do
# => Defines module MyAppWeb.DebounceLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:search_query, "")
      # => Sets assigns.search_query
 
      |> assign(:search_count, 0)
      # => Sets assigns.search_count
 
      |> assign(:instant_count, 0)
      # => Sets assigns.instant_count
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("search_debounced", %{"value" => query}, socket) do
  # => Handles "search_debounced" event from client
 
    # => Only called after 500ms of no typing
    IO.puts("Debounced search: #{query}")
    # => Output: prints string to console
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:search_query, query)
      # => Sets assigns.search_query
 
      |> update(:search_count, &(&1 + 1))
      # => Updates assign using current value
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("search_instant", %{"value" => query}, socket) do
  # => Handles "search_instant" event from client
 
    # => Called on EVERY keystroke immediately
    IO.puts("Instant search: #{query}")
    # => Output: prints string to console
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:search_query, query)
      # => Sets assigns.search_query
 
      |> update(:instant_count, &(&1 + 1))
      # => Updates assign using current value
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- DEBOUNCED INPUT - waits 500ms after typing stops -->
      <input
      <!-- => text input field -->
        type="text"
        # => type bound to result of "text"
 
        placeholder="Search (debounced)"
        # => placeholder bound to result of "Search (debounced)"
 
        phx-debounce="500"
        phx-keyup="search_debounced"
      />
      <!-- => phx-debounce="500" delays event 500 milliseconds -->
      <!-- => Event only sent if user stops typing for 500ms -->
      <p>Debounced searches: <%= @search_count %></p>
      <!-- => Paragraph element displaying dynamic content -->
 
      <!-- INSTANT INPUT - no debounce -->
      <input
      <!-- => text input field -->
        type="text"
        # => type bound to result of "text"
 
        placeholder="Search (instant)"
        # => placeholder bound to result of "Search (instant)"
 
        phx-keyup="search_instant"
      />
      <!-- => No phx-debounce, event fires immediately -->
      <p>Instant searches: <%= @instant_count %></p>
      <!-- => Paragraph element displaying dynamic content -->
 
      <p>Current query: <%= @search_query %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <p class="info">Type in both inputs and compare event counts</p>
      <!-- => Paragraph element displaying dynamic content -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ThrottleLive do
# => Defines module MyAppWeb.ThrottleLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:throttled_scroll, 0)
      # => Sets assigns.throttled_scroll
 
      |> assign(:throttled_count, 0)
      # => Sets assigns.throttled_count
 
      |> assign(:instant_scroll, 0)
      # => Sets assigns.instant_scroll
 
      |> assign(:instant_count, 0)
      # => Sets assigns.instant_count
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("scroll_throttled", %{"scrollY" => scroll_y}, socket) when is_number(scroll_y) do
  # => Handles "scroll_throttled" event from client
 
    # => Only called at most once per second (1000ms)
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:throttled_scroll, scroll_y)
      # => Sets assigns.throttled_scroll
 
      |> update(:throttled_count, &(&1 + 1))
      # => Updates assign using current value
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("scroll_throttled", _params, socket) do
  # => Handles "scroll_throttled" event from client
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("scroll_instant", %{"scrollY" => scroll_y}, socket) when is_number(scroll_y) do
  # => Handles "scroll_instant" event from client
 
    # => Called on EVERY scroll event (can be hundreds per scroll)
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:instant_scroll, scroll_y)
      # => Sets assigns.instant_scroll
 
      |> update(:instant_count, &(&1 + 1))
      # => Updates assign using current value
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("scroll_instant", _params, socket) do
  # => Handles "scroll_instant" event from client
 
    {:noreply, socket}
    # => Returns updated socket, triggers re-render
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div>
    <!-- => Div container wrapping component content -->
      <!-- THROTTLED SCROLL - max 1 event per second -->
      <div
      <!-- => Div container wrapping component content -->
        class="scroll-area throttled"
        # => class bound to result of "scroll-area throttled"
 
        style="height: 200px; overflow-y: scroll; border: 2px solid blue;"
        # => style bound to result of "height: 200px; overflow-y: scroll; border: 2px so
 
        phx-throttle="1000"
        phx-window-scroll="scroll_throttled"
      >
        <!-- => phx-throttle="1000" limits to 1 event per 1000ms -->
        <!-- => Even if user scrolls continuously, max 1 event/second -->
        <div style="height: 1000px; padding: 20px;">
        <!-- => Div container wrapping component content -->
          <p>Throttled Scroll Position: <%= @throttled_scroll %>px</p>
          <!-- => Paragraph element displaying dynamic content -->
          <p>Throttled Event Count: <%= @throttled_count %></p>
          <!-- => Paragraph element displaying dynamic content -->
          <p>Scroll this area to see throttled events</p>
          <!-- => Paragraph element displaying dynamic content -->
        </div>
        <!-- => Closes outer div container -->
      </div>
      <!-- => Closes outer div container -->
 
      <!-- INSTANT SCROLL - no throttle -->
      <div
      <!-- => Div container wrapping component content -->
        class="scroll-area instant"
        # => class bound to result of "scroll-area instant"
 
        style="height: 200px; overflow-y: scroll; border: 2px solid red; margin-top: 20px;"
        # => style bound to result of "height: 200px; overflow-y: scroll; border: 2px so
 
        phx-window-scroll="scroll_instant"
      >
        <!-- => No phx-throttle, all scroll events sent immediately -->
        <div style="height: 1000px; padding: 20px;">
        <!-- => Div container wrapping component content -->
          <p>Instant Scroll Position: <%= @instant_scroll %>px</p>
          <!-- => Paragraph element displaying dynamic content -->
          <p>Instant Event Count: <%= @instant_count %></p>
          <!-- => Paragraph element displaying dynamic content -->
          <p>Scroll this area to see instant events</p>
          <!-- => Paragraph element displaying dynamic content -->
        </div>
        <!-- => Closes outer div container -->
      </div>
      <!-- => Closes outer div container -->
 
      <p class="info">Compare event counts between throttled and instant scrolling</p>
      <!-- => Paragraph element displaying dynamic content -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition