Intermediate

defmodule MyAppWeb.UserFormLive do
# => Defines module MyAppWeb.UserFormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
  alias MyApp.Accounts.User
  # => Aliases MyApp.Accounts.User for shorter references
 
  import Ecto.Changeset
  # => Imports functions from Ecto.Changeset
 
 
  # Initialize form with empty changeset
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    changeset = change_user(%User{}) # => Empty changeset for User struct
    # => changeset.valid? is true (no validations run yet)
    socket = assign(socket, :form, to_form(changeset)) # => Convert changeset to form struct
    # => form ready for rendering with .to_form/1
    {:ok, socket} # => Socket ready with form assign
    # => Pattern: successful result — socket bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  # Handle form validation on input changes
  def handle_event("validate", %{"user" => user_params}, socket) do
  # => Handles "validate" event from client
 
    # Run validations without persisting
    changeset =
    # => Binds result to variable
 
      %User{}
      # => Creates empty User struct as base for changeset
      |> change_user(user_params) # => Applies user_params to empty User
      # => Pipes result into: change_user(user_params) # => Applies user_pa
      |> Map.put(:action, :validate) # => Marks changeset as validation (shows errors)
    # => changeset may have errors if validation fails
 
    socket = assign(socket, :form, to_form(changeset)) # => Update form with validation results
    # => socket.assigns.form = to_form(changeset)
    {:noreply, socket} # => Re-render with error messages
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <.form for={@form} phx-change="validate" phx-submit="save">
    <!-- => Form with live validation (phx-change) and submission (phx-submit) -->
      <.input field={@form[:name]} label="Name" />
      <!-- => Renders 'Name' text input with error display -->
      <.input field={@form[:email]} label="Email" type="email" />
      <!-- => Renders 'Email' email input with error display -->
      <.button>Save</.button>
      <!-- => Renders styled submit button -->
    </.form>
    <!-- => Closes .form element -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp change_user(user, attrs \\ %{}) do
  # => Defines change_user function
 
    # Define validation rules
    user
    # => user piped into following operations
    |> cast(attrs, [:name, :email]) # => Allow name and email fields
    # => Casts :name, :email from params — converts strings to typed values
    |> validate_required([:name, :email]) # => Both fields required
    # => Validates :name, :email are present — adds error if blank
    |> validate_format(:email, ~r/@/) # => Email must contain @
    # => Validates email matches regex pattern — error if no match
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ProductFormLive do
# => Defines module MyAppWeb.ProductFormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
  import Ecto.Changeset
  # => Imports functions from Ecto.Changeset
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    changeset = product_changeset(%{}) # => Empty changeset
    # => changeset contains validation state and any errors
    {:ok, assign(socket, form: to_form(changeset))} # => Form ready
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", %{"product" => params}, socket) do
  # => Handles "validate" event from client
 
    changeset =
    # => Binds result to variable
 
      params
      # => params piped into following operations
      |> product_changeset()
      # => Creates changeset for validation
 
      |> Map.put(:action, :validate) # => Show errors immediately
    # => If price < 0, changeset.errors includes {:price, {"must be greater than 0", []}}
 
    {:noreply, assign(socket, form: to_form(changeset))} # => Errors displayed in form
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
    # => Re-render updates error display without page reload
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <.form for={@form} phx-change="validate">
    <!-- => Form with live validation — phx-change fires on every input change -->
      <.input field={@form[:name]} label="Product Name" />
      <!-- => Renders 'Product Name' text input with error display -->
      <%!-- Errors shown below input automatically --%>
 
      <.input field={@form[:price]} label="Price" type="number" step="0.01" />
      <!-- => Renders 'Price' number input with error display -->
      <%!-- If price < 0, error "must be greater than 0" appears --%>
 
      <.input field={@form[:quantity]} label="Quantity" type="number" />
      <!-- => Renders 'Quantity' number input with error display -->
      <%!-- If quantity not integer, error "must be an integer" appears --%>
    </.form>
    <!-- => Closes .form element -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp product_changeset(attrs) do
  # => Defines product_changeset function
 
    data = %{name: nil, price: nil, quantity: nil} # => Empty data
    # => data = %{name: nil, price: nil, quantity: nil}
    types = %{name: :string, price: :decimal, quantity: :integer} # => Field types
    # => types = %{name: :string, price: :decimal, quanti
 
    {data, types}
    # => Creates schemaless changeset: {data, types} tuple for Ecto validation
    |> cast(attrs, [:name, :price, :quantity]) # => Cast with type validation
    # => Casts :name, :price, :quantity from params — converts strings to typed values
    |> validate_required([:name, :price, :quantity]) # => All required
    # => Validates :name, :price, :quantity are present — adds error if blank
    |> validate_number(:price, greater_than: 0) # => Price must be positive
    # => Validates price numeric value meets conditions
    |> validate_number(:quantity, greater_than_or_equal_to: 0) # => Quantity >= 0
    # => Validates quantity numeric value meets conditions
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.AddressFormLive do
# => Defines module MyAppWeb.AddressFormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
  import Ecto.Changeset
  # => Imports functions from Ecto.Changeset
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    changeset = address_changeset(%{}) # => Empty address
    # => changeset contains validation state and any errors
    {:ok, assign(socket, form: to_form(changeset))} # => Ready to render
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", %{"address" => params}, socket) do
  # => Handles "validate" event from client
 
    changeset =
    # => Binds result to variable
 
      params
      # => params piped into following operations
      |> address_changeset()
      # => Creates changeset for validation
 
      |> Map.put(:action, :validate) # => Validate immediately
      # => action: :validate enables error display in form components
 
    {:noreply, assign(socket, form: to_form(changeset))} # => Display errors
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("save", %{"address" => params}, socket) do
  # => Handles "save" event from client
 
    case address_changeset(params) do
    # => Creates changeset for validation
 
      %{valid?: true} = changeset ->
      # => Pattern: changeset is valid — proceed with success path
        # Apply changeset to get validated data
        address = apply_changes(changeset) # => Extract validated address map
        # => address: %{street: "...", city: "...", postal_code: "..."}
        IO.inspect(address, label: "Saved Address") # => Output: Saved Address: %{...}
        # => Output: Saved Address: <inspected value printed to console>
        {:noreply, socket} # => Success
 
      %{valid?: false} = changeset ->
      # => Pattern: changeset invalid — show validation errors
        # Invalid data, show errors
        {:noreply, assign(socket, form: to_form(changeset))} # => Display validation errors
        # => Converts changeset to Phoenix.HTML.Form struct for rendering
    end
    # => Closes enclosing function/module/block definition
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <.form for={@form} phx-change="validate" phx-submit="save">
    <!-- => Form with live validation (phx-change) and submission (phx-submit) -->
      <.input field={@form[:street]} label="Street Address" />
      <!-- => Renders 'Street Address' text input with error display -->
      <.input field={@form[:city]} label="City" />
      <!-- => Renders 'City' text input with error display -->
      <.input field={@form[:state]} label="State" />
      <!-- => Renders 'State' text input with error display -->
      <.input field={@form[:postal_code]} label="Postal Code" />
      <!-- => Renders 'Postal Code' text input with error display -->
      <.input field={@form[:country]} label="Country" />
      <!-- => Renders 'Country' text input with error display -->
      <.button>Save Address</.button>
      <!-- => Renders styled submit button -->
    </.form>
    <!-- => Closes .form element -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp address_changeset(attrs) do
  # => Defines address_changeset function
 
    data = %{street: nil, city: nil, state: nil, postal_code: nil, country: nil}
    # => data bound to result of %{street: nil, city: nil, state: nil, postal_code:
 
    types = %{street: :string, city: :string, state: :string, postal_code: :string, country: :string}
    # => types bound to result of %{street: :string, city: :string, state: :string,
 
 
    {data, types}
    # => Creates schemaless changeset: {data, types} tuple for Ecto validation
    |> cast(attrs, [:street, :city, :state, :postal_code, :country])
    # => Casts :street, :city, :state, :postal_code, :country from params to changeset
 
    |> validate_required([:street, :city, :postal_code, :country]) # => State optional
    # => Validates :street, :city, :postal_code, :country are present — adds error if blank
    |> validate_length(:postal_code, min: 5, max: 10) # => Postal code length
    # => Validates postal_code string length is within constraints
    |> validate_format(:postal_code, ~r/^[0-9A-Z\s-]+$/i) # => Alphanumeric + space/dash
    # => Validates postal_code matches regex pattern — error if no match
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.UserWithAddressLive do
# => Defines module MyAppWeb.UserWithAddressLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
  import Ecto.Changeset
  # => Imports functions from Ecto.Changeset
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    changeset = user_changeset(%{}) # => User with empty address
    # => changeset contains validation state and any errors
    {:ok, assign(socket, form: to_form(changeset))} # => Ready
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", %{"user" => params}, socket) do
  # => Handles "validate" event from client
 
    changeset =
    # => Binds result to variable
 
      params
      # => params piped into following operations
      |> user_changeset()
      # => Creates changeset for validation
 
      |> Map.put(:action, :validate)
      # => Marks changeset action, enables error display
 
 
    {:noreply, assign(socket, form: to_form(changeset))}
    # => Updates socket 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 -->
    <.form for={@form} phx-change="validate">
    <!-- => Form with live validation — phx-change fires on every input change -->
      <.input field={@form[:name]} label="Name" />
      <!-- => Renders 'Name' text input with error display -->
      <.input field={@form[:email]} label="Email" type="email" />
      <!-- => Renders 'Email' email input with error display -->
 
      <%!-- Nested address fields using inputs_for --%>
      <.inputs_for :let={address_form} field={@form[:address]}>
      <!-- => Renders 'field' text input with error display -->
        <h3>Address</h3>
        <!-- => H3 heading element -->
        <.input field={address_form[:street]} label="Street" />
        <!-- => Renders 'Street' text input with error display -->
        <.input field={address_form[:city]} label="City" />
        <!-- => Renders 'City' text input with error display -->
        <.input field={address_form[:postal_code]} label="Postal Code" />
        <!-- => Renders 'Postal Code' text input with error display -->
      </.inputs_for>
      <!-- => Closes .inputs_for element -->
    </.form>
    <!-- => Closes .form element -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp user_changeset(attrs) do
  # => Defines user_changeset function
 
    data = %{name: nil, email: nil, address: %{street: nil, city: nil, postal_code: nil}}
    # => data bound to result of %{name: nil, email: nil, address: %{street: nil, c
 
    types = %{name: :string, email: :string, address: :map}
    # => types bound to result of %{name: :string, email: :string, address: :map}
 
 
    {data, types}
    # => Creates schemaless changeset: {data, types} tuple for Ecto validation
    |> cast(attrs, [:name, :email])
    # => Casts :name, :email from params to changeset
 
    |> validate_required([:name, :email])
    # => Validates listed fields are present
 
    # => Recursively validates embedded address schema
    |> cast_embed(:address, with: &address_changeset/2) # => Validate nested address
    # => address validation errors appear under address fields
  end
  # => Closes enclosing function/module/block definition
 
  defp address_changeset(address, attrs) do
  # => Defines address_changeset function
 
    types = %{street: :string, city: :string, postal_code: :string}
    # => types bound to result of %{street: :string, city: :string, postal_code: :st
 
 
    {address, types}
    # => Creates schemaless changeset: {address, types} tuple for Ecto validation
    |> cast(attrs, [:street, :city, :postal_code])
    # => Casts :street, :city, :postal_code from params to changeset
 
    |> validate_required([:street, :city, :postal_code]) # => All address fields required
    # => Validates :street, :city, :postal_code are present — adds error if blank
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.LongFormLive do
# => Defines module MyAppWeb.LongFormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    changeset = article_changeset(%{}) # => Empty article
    # => changeset contains validation state and any errors
    {:ok, assign(socket, form: to_form(changeset))} # => Ready
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", %{"article" => params}, socket) do
  # => Handles "validate" event from client
 
    changeset =
    # => Binds result to variable
 
      params
      # => params piped into following operations
      |> article_changeset()
      # => Creates changeset for validation
 
      |> Map.put(:action, :validate)
      # => Marks changeset action, enables error display
 
 
    {:noreply, assign(socket, form: to_form(changeset))} # => Update form
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <%!-- phx-auto-recover="ignore" preserves form inputs during reconnection --%>
    <.form for={@form} phx-change="validate" phx-auto-recover="ignore">
    <!-- => Form with live validation — phx-change fires on every input change -->
      <.input field={@form[:title]} label="Article Title" />
      <!-- => Renders 'Article Title' text input with error display -->
 
      <%!-- Long textarea benefits most from auto-recovery --%>
      <.input field={@form[:content]} label="Content" type="textarea" rows="20" />
      <!-- => Renders 'Content' textarea input with error display -->
      <%!-- If LiveView disconnects/reconnects, content preserved in browser --%>
 
      <.input field={@form[:tags]} label="Tags (comma-separated)" />
      <!-- => Renders 'Tags (comma-separated)' text input with error display -->
      <.button>Save Draft</.button>
      <!-- => Renders styled submit button -->
    </.form>
    <!-- => Closes .form element -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp article_changeset(attrs) do
  # => Defines article_changeset function
 
    data = %{title: nil, content: nil, tags: nil}
    # => data bound to result of %{title: nil, content: nil, tags: nil}
 
    types = %{title: :string, content: :string, tags: :string}
    # => types bound to result of %{title: :string, content: :string, tags: :string}
 
 
    {data, types}
    # => Creates schemaless changeset: {data, types} tuple for Ecto validation
    |> cast(attrs, [:title, :content, :tags])
    # => Casts :title, :content, :tags from params to changeset
 
    |> validate_required([:title, :content])
    # => Validates listed fields are present
 
    |> validate_length(:title, min: 5, max: 200)
    # => Validates field string length constraints
 
    |> validate_length(:content, min: 50)
    # => Validates field string length constraints
 
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ContactFormLive do
# => Defines module MyAppWeb.ContactFormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
  import Ecto.Changeset
  # => Imports functions from Ecto.Changeset
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    changeset = contact_changeset(%{}) # => Empty contact form
    # => changeset contains validation state and any errors
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:form, to_form(changeset))
      # => Sets assigns.form
 
      |> assign(:submitted, false) # => Track submission state
      # => socket.assigns.submitted = false) # => Track submission state
 
    {:ok, socket} # => Ready
    # => Pattern: successful result — socket bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", %{"contact" => params}, socket) do
  # => Handles "validate" event from client
 
    changeset =
    # => Binds result to variable
 
      params
      # => params piped into following operations
      |> contact_changeset()
      # => Creates changeset for validation
 
      |> Map.put(:action, :validate)
      # => Marks changeset action, enables error display
 
 
    {:noreply, assign(socket, form: to_form(changeset))} # => Live validation
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("submit", %{"contact" => params}, socket) do
  # => Handles "submit" event from client
 
    changeset = contact_changeset(params) # => Final validation
    # => changeset contains validation state and any errors
 
    case changeset do
    # => Pattern matches on result value
 
      %{valid?: true} ->
      # => Pattern: changeset is valid — proceed with success path
        # Extract and process data
        contact = apply_changes(changeset) # => %{name: "...", email: "...", message: "..."}
        # => Extracts validated data struct from valid changeset
        IO.inspect(contact, label: "Contact Submission") # => Log submission
        # => Output: Contact Submission: <inspected value printed to console>
 
        # Simulate sending email
        Process.sleep(500) # => Simulate network delay
        # => Pauses execution for given milliseconds (for simulation)
 
        socket =
        # => socket updated via pipeline below
          socket
          # => Starting socket as base for pipeline operations
          |> assign(:submitted, true) # => Mark as submitted
          # => socket.assigns.submitted = true) # => Mark as submitted
          |> assign(:form, to_form(contact_changeset(%{}))) # => Reset form
        # => Form cleared, submitted flag true
 
        {:noreply, socket} # => Re-render with success message
 
      %{valid?: false} ->
      # => Pattern: changeset invalid — show validation errors
        # Show validation errors
        changeset = Map.put(changeset, :action, :validate)
        # => Returns new map with key updated
 
        {:noreply, assign(socket, form: to_form(changeset))} # => Display errors
        # => Converts changeset to Phoenix.HTML.Form struct for rendering
    end
    # => Closes enclosing function/module/block definition
  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 @submitted do %>
      <!-- => Renders inner content only when @submitted is truthy -->
        <div class="alert alert-success">
        <!-- => Div container with class="alert alert-success" -->
          Thank you! Your message has been sent.
        </div>
        <!-- => Closes outer div container -->
      <% end %>
      <!-- => End of conditional/loop block -->
 
      <.form for={@form} phx-change="validate" phx-submit="submit">
      <!-- => Form with live validation (phx-change) and submission (phx-submit) -->
        <.input field={@form[:name]} label="Name" />
        <!-- => Renders 'Name' text input with error display -->
        <.input field={@form[:email]} label="Email" type="email" />
        <!-- => Renders 'Email' email input with error display -->
        <.input field={@form[:message]} label="Message" type="textarea" rows="5" />
        <!-- => Renders 'Message' textarea input with error display -->
        <.button>Send Message</.button>
        <!-- => Renders styled submit button -->
      </.form>
      <!-- => Closes .form element -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp contact_changeset(attrs) do
  # => Defines contact_changeset function
 
    data = %{name: nil, email: nil, message: nil}
    # => data bound to result of %{name: nil, email: nil, message: nil}
 
    types = %{name: :string, email: :string, message: :string}
    # => types bound to result of %{name: :string, email: :string, message: :string}
 
 
    {data, types}
    # => Creates schemaless changeset: {data, types} tuple for Ecto validation
    |> cast(attrs, [:name, :email, :message])
    # => Casts :name, :email, :message from params to changeset
 
    |> validate_required([:name, :email, :message])
    # => Validates listed fields are present
 
    |> validate_format(:email, ~r/@/)
    # => Validates field matches regex pattern
 
    |> validate_length(:message, min: 10)
    # => Validates field string length constraints
 
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.PreferencesFormLive do
# => Defines module MyAppWeb.PreferencesFormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
  import Ecto.Changeset
  # => Imports functions from Ecto.Changeset
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    changeset = preferences_changeset(%{}) # => Empty preferences
    # => changeset contains validation state and any errors
    {:ok, assign(socket, form: to_form(changeset))} # => Ready
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", %{"preferences" => params}, socket) do
  # => Handles "validate" event from client
 
    changeset =
    # => Binds result to variable
 
      params
      # => params piped into following operations
      |> preferences_changeset()
      # => Creates changeset for validation
 
      |> Map.put(:action, :validate)
      # => Marks changeset action, enables error display
 
 
    {:noreply, assign(socket, form: to_form(changeset))}
    # => Updates socket with validated changeset
    # => Re-render shows errors for invalid fields
 
  end
  # => Closes enclosing function/module/block definition
 
  def render(assigns) do
  # => Generates LiveView HTML template
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <.form for={@form} phx-change="validate">
    <!-- => Form with live validation — phx-change fires on every input change -->
      <%!-- Text input — casts to :string --%>
      <.input field={@form[:username]} label="Username" />
      <!-- => Renders 'Username' text input with error display -->
 
      <%!-- Checkbox input - boolean value --%>
      <.input field={@form[:newsletter]} label="Subscribe to newsletter" type="checkbox" />
      <!-- => Renders 'Subscribe to newsletter' checkbox input with error display -->
      <%!-- Checked = true, unchecked = false --%>
 
      <%!-- Select input - dropdown --%>
      <.input
      <!-- => Renders 'field' text input with error display -->
        field={@form[:theme]}
        # => field bound to result of {@form[:theme]}
 
        label="Theme"
        # => label bound to result of "Theme"
 
        type="select"
        # => type bound to result of "select"
 
        options={[{"Light", "light"}, {"Dark", "dark"}, {"Auto", "auto"}]}
        # => options bound to result of {[{"Light", "light"}, {"Dark", "dark"}, {"Auto", "
 
      />
      <!-- => Self-closing tag — no inner content -->
      <%!-- Options: [{"Display", "value"}, ...] --%>
 
      <%!-- Number input --%>
      <.input field={@form[:items_per_page]} label="Items per page" type="number" />
      <!-- => Renders 'Items per page' number input with error display -->
 
      <%!-- Email input with HTML5 validation --%>
      <.input field={@form[:email]} label="Email" type="email" />
      <!-- => Renders 'Email' email input with error display -->
    </.form>
    <!-- => Closes .form element -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp preferences_changeset(attrs) do
  # => Defines preferences_changeset function
 
    data = %{username: nil, newsletter: false, theme: "auto", items_per_page: 10, email: nil}
    # => data bound to result of %{username: nil, newsletter: false, theme: "auto",
 
    types = %{username: :string, newsletter: :boolean, theme: :string, items_per_page: :integer, email: :string}
    # => types bound to result of %{username: :string, newsletter: :boolean, theme:
 
 
    {data, types}
    # => Creates schemaless changeset: {data, types} tuple for Ecto validation
    |> cast(attrs, [:username, :newsletter, :theme, :items_per_page, :email])
    # => Casts :username, :newsletter, :theme, :items_per_page, :email from params to changeset
 
    |> validate_required([:username, :email])
    # => Validates listed fields are present
 
    |> validate_inclusion(:theme, ["light", "dark", "auto"]) # => Theme must be valid
    # => Validates theme is one of the allowed values
    |> validate_number(:items_per_page, greater_than: 0, less_than_or_equal_to: 100)
    # => Validates field numeric constraints
 
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.CustomFormLive do
# => Defines module MyAppWeb.CustomFormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    changeset = event_changeset(%{}) # => Empty event
    # => changeset contains validation state and any errors
    {:ok, assign(socket, form: to_form(changeset))} # => Ready
    # => Converts changeset to Phoenix.HTML.Form struct for rendering
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", %{"event" => params}, socket) do
  # => Handles "validate" event from client
 
    changeset =
    # => Binds result to variable
 
      params
      # => params piped into following operations
      |> event_changeset()
      # => Creates changeset for validation
 
      |> Map.put(:action, :validate)
      # => Marks changeset action, enables error display
 
 
    {:noreply, assign(socket, form: to_form(changeset))}
    # => Updates socket 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 -->
    <.form for={@form} phx-change="validate">
    <!-- => Form with live validation — phx-change fires on every input change -->
      <.input field={@form[:title]} label="Event Title" />
      <!-- => Renders 'Event Title' text input with error display -->
 
      <%!-- Custom date-time picker component --%>
      <.date_time_input field={@form[:starts_at]} label="Start Date & Time" />
      <!-- => element HTML element -->
 
      <%!-- Custom duration selector --%>
      <.duration_input field={@form[:duration_minutes]} label="Duration" />
      <!-- => element HTML element -->
    </.form>
    <!-- => Closes .form element -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  # Custom date-time input component
  def date_time_input(assigns) do
  # => Defines date_time_input function
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div class="form-group">
    <!-- => Div container with class="form-group" -->
      <label><%= @label %></label>
      <!-- => label HTML element -->
      <input
      <!-- => text input field -->
        type="datetime-local"
        # => type bound to result of "datetime-local"
 
        id={@field.id}
        # => id bound to result of {@field.id}
 
        name={@field.name}
        # => name bound to result of {@field.name}
 
        value={@field.value}
        # => value bound to result of {@field.value}
 
        class="form-control"
        # => class bound to result of "form-control"
 
      />
      <!-- => Self-closing tag — no inner content -->
      <%!-- Display errors if present --%>
      <.error :for={msg <- @field.errors}><%= msg %></.error>
      <!-- => element HTML element -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  # Custom duration selector (hours + minutes)
  def duration_input(assigns) do
  # => Defines duration_input function
 
    ~H"""
    <!-- => Opens HEEx template — HTML+Elixir embedded template language -->
    <div class="form-group">
    <!-- => Div container with class="form-group" -->
      <label><%= @label %></label>
      <!-- => label HTML element -->
      <select name={@field.name} id={@field.id} class="form-control">
      <!-- => select HTML element -->
        <option value="30">30 minutes</option>
        <!-- => option HTML element -->
        <option value="60" selected={@field.value == "60"}>1 hour</option>
        <!-- => option HTML element -->
        <option value="90">1.5 hours</option>
        <!-- => option HTML element -->
        <option value="120">2 hours</option>
        <!-- => option HTML element -->
      </select>
      <.error :for={msg <- @field.errors}><%= msg %></.error>
      <!-- => element HTML element -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp event_changeset(attrs) do
  # => Defines event_changeset function
 
    data = %{title: nil, starts_at: nil, duration_minutes: 60}
    # => data bound to result of %{title: nil, starts_at: nil, duration_minutes: 60
 
    types = %{title: :string, starts_at: :naive_datetime, duration_minutes: :integer}
    # => types bound to result of %{title: :string, starts_at: :naive_datetime, dura
 
 
    {data, types}
    # => Creates schemaless changeset: {data, types} tuple for Ecto validation
    |> cast(attrs, [:title, :starts_at, :duration_minutes])
    # => Casts :title, :starts_at, :duration_minutes from params to changeset
 
    |> validate_required([:title, :starts_at])
    # => Validates listed fields are present
 
    |> validate_number(:duration_minutes, greater_than: 0)
    # => Validates field numeric constraints
 
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.AvatarUploadLive do
# => Defines module MyAppWeb.AvatarUploadLive
 
  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(:uploaded_files, []) # => Track uploaded files
      # => socket.assigns.uploaded_files = []) # => Track uploaded files
      |> allow_upload(:avatar, # => Configure avatar upload
      # => Configures avatar upload: sets file type, size, count limits
        accept: ~w(.jpg .jpeg .png), # => Allowed extensions
        max_entries: 1, # => Single file only
        max_file_size: 5_000_000 # => 5MB limit (bytes)
      )
    # => Upload configuration stored in socket
 
    {:ok, socket} # => Ready for uploads
    # => Pattern: successful result — socket bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", _params, socket) do
  # => Handles "validate" event from client
 
    # Validation happens automatically based on allow_upload config
    # => LiveView checks file type and size constraints from allow_upload
    {:noreply, socket} # => Errors shown if file invalid
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("save", _params, socket) do
  # => Handles "save" event from client
 
    # Consume uploaded files
    uploaded_files =
    # => Binds result to variable
 
      consume_uploaded_entries(socket, :avatar, fn %{path: path}, entry ->
      # => Processes uploaded files, returns results list
 
        # path: temporary file path on server
        # entry: upload metadata (client_name, content_type, etc.)
        dest = Path.join("priv/static/uploads", entry.client_name) # => Destination path
        # => dest bound to result of Path.join(...)
        File.cp!(path, dest) # => Copy to permanent location
        {:ok, "/uploads/#{entry.client_name}"} # => Return public URL
        # => Pattern: successful result — result bound to returned value
      end)
    # => uploaded_files: ["/uploads/avatar.jpg"] or []
 
    socket = assign(socket, :uploaded_files, uploaded_files) # => Store uploaded paths
    # => socket.assigns.uploaded_files = uploaded_files
    {:noreply, socket} # => Display uploaded files
  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="save">
      <!-- => form HTML element -->
        <%!-- File input with upload configuration --%>
        <.live_file_input upload={@uploads.avatar} />
        <!-- => element HTML element -->
        <%!-- Automatically validates against allow_upload rules --%>
 
        <%!-- Show validation errors --%>
        <%= for entry <- @uploads.avatar.entries do %>
        <!-- => Loops over @uploads.avatar.entries, binding each element to entry -->
          <div>
          <!-- => Div container wrapping component content -->
            <%= entry.client_name %> - <%= entry.progress %>%
            <!-- => Evaluates Elixir expression and outputs result as HTML -->
            <%!-- Display upload errors --%>
            <%= for err <- upload_errors(@uploads.avatar, entry) do %>
            <!-- => Loops over upload_errors(@uploads.avatar,, binding each element to err -->
              <p class="error"><%= error_to_string(err) %></p>
              <!-- => Paragraph element displaying dynamic content -->
            <% end %>
            <!-- => End of conditional/loop block -->
          </div>
          <!-- => Closes outer div container -->
        <% end %>
        <!-- => End of conditional/loop block -->
 
        <button type="submit">Upload</button>
        <!-- => Submit button — triggers phx-submit form event -->
      </form>
      <!-- => Closes form element — phx-submit/phx-change handlers deactivated -->
 
      <%!-- Display uploaded files --%>
      <%= for file <- @uploaded_files do %>
      <!-- => Loops over @uploaded_files, binding each element to file -->
        <img src={file} alt="Uploaded avatar" width="200" />
        <!-- => img HTML element -->
      <% end %>
      <!-- => End of conditional/loop block -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp error_to_string(:too_large), do: "File too large (max 5MB)"
  # => Defines error_to_string function
 
  defp error_to_string(:not_accepted), do: "Invalid file type (jpg, jpeg, png only)"
  # => Defines error_to_string function
 
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.WizardFormLive do
# => Defines module MyAppWeb.WizardFormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    changeset = registration_changeset(%{}) # => Empty registration
    # => changeset contains validation state and any errors
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:form, to_form(changeset))
      # => Sets assigns.form
 
      |> assign(:current_step, 1) # => Start at step 1
      # => socket.assigns.current_step = 1) # => Start at step 1
      |> assign(:max_step, 3) # => 3 steps total
      # => socket.assigns.max_step = 3) # => 3 steps total
 
    {:ok, socket} # => Ready
    # => Pattern: successful result — socket bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("validate", %{"registration" => params}, socket) do
  # => Handles "validate" event from client
 
    changeset =
    # => Binds result to variable
 
      params
      # => params piped into following operations
      |> registration_changeset()
      # => Creates changeset for validation
 
      |> Map.put(:action, :validate)
      # => Marks changeset action, enables error display
 
 
    {:noreply, assign(socket, form: to_form(changeset))}
    # => Updates socket assigns
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("next_step", _params, socket) do
  # => Handles "next_step" event from client
 
    # Move to next step if not at max
    new_step = min(socket.assigns.current_step + 1, socket.assigns.max_step)
    # => new_step bound to result of min(socket.assigns.current_step + 1, socket.assign
 
    {:noreply, assign(socket, :current_step, new_step)} # => Increment step
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("prev_step", _params, socket) do
  # => Handles "prev_step" event from client
 
    # Move to previous step if not at first
    new_step = max(socket.assigns.current_step - 1, 1)
    # => new_step bound to result of max(socket.assigns.current_step - 1, 1)
 
    {:noreply, assign(socket, :current_step, new_step)} # => Decrement step
  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 -->
      <%!-- Progress indicator --%>
      <div class="progress-bar">
      <!-- => Div container with class="progress-bar" -->
        Step <%= @current_step %> of <%= @max_step %>
        <!-- => Static text with interpolated Elixir expression -->
        <%= trunc((@current_step / @max_step) * 100) %>% complete
        <!-- => Evaluates Elixir expression and outputs result as HTML -->
      </div>
      <!-- => Closes outer div container -->
 
      <.form for={@form} phx-change="validate">
      <!-- => Form with live validation — phx-change fires on every input change -->
        <%!-- Step 1: Personal Info --%>
        <%= if @current_step == 1 do %>
        <!-- => Renders inner content only when @current_step == 1 is truthy -->
          <.input field={@form[:name]} label="Full Name" />
          <!-- => Renders 'Full Name' text input with error display -->
          <.input field={@form[:email]} label="Email" type="email" />
          <!-- => Renders 'Email' email input with error display -->
        <% end %>
        <!-- => End of conditional/loop block -->
 
        <%!-- Step 2: Address --%>
        <%= if @current_step == 2 do %>
        <!-- => Renders inner content only when @current_step == 2 is truthy -->
          <.input field={@form[:street]} label="Street Address" />
          <!-- => Renders 'Street Address' text input with error display -->
          <.input field={@form[:city]} label="City" />
          <!-- => Renders 'City' text input with error display -->
        <% end %>
        <!-- => End of conditional/loop block -->
 
        <%!-- Step 3: Confirmation --%>
        <%= if @current_step == 3 do %>
        <!-- => Renders inner content only when @current_step == 3 is truthy -->
          <p>Review your information:</p>
          <!-- => Paragraph element displaying dynamic content -->
          <p>Name: <%= @form[:name].value %></p>
          <!-- => Paragraph element displaying dynamic content -->
          <p>Email: <%= @form[:email].value %></p>
          <!-- => Paragraph element displaying dynamic content -->
          <p>Address: <%= @form[:street].value %>, <%= @form[:city].value %></p>
          <!-- => Paragraph element displaying dynamic content -->
        <% end %>
        <!-- => End of conditional/loop block -->
 
        <%!-- Navigation buttons --%>
        <button type="button" phx-click="prev_step" disabled={@current_step == 1}>
        <!-- => Button triggers handle_event("prev_step", ...) on click -->
          Previous
        </button>
        <!-- => Closes button element -->
        <button type="button" phx-click="next_step" disabled={@current_step == @max_step}>
        <!-- => Button triggers handle_event("next_step", ...) on click -->
          Next
        </button>
        <!-- => Closes button element -->
        <%= if @current_step == @max_step do %>
        <!-- => Renders inner content only when @current_step == @max_step is truthy -->
          <button type="submit">Submit</button>
          <!-- => Submit button — triggers phx-submit form event -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </.form>
      <!-- => Closes .form element -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp registration_changeset(attrs) do
  # => Defines registration_changeset function
 
    data = %{name: nil, email: nil, street: nil, city: nil}
    # => data bound to result of %{name: nil, email: nil, street: nil, city: nil}
 
    types = %{name: :string, email: :string, street: :string, city: :string}
    # => types bound to result of %{name: :string, email: :string, street: :string,
 
 
    {data, types}
    # => Creates schemaless changeset: {data, types} tuple for Ecto validation
    |> cast(attrs, [:name, :email, :street, :city])
    # => Casts :name, :email, :street, :city from params to changeset
 
    |> validate_required([:name, :email])
    # => Validates listed fields are present
 
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.LogViewerLive do
# => Defines module MyAppWeb.LogViewerLive
 
  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(:logs, fetch_logs()) # => Load initial logs
      # => socket.assigns.logs = fetch_logs()) # => Load initial logs
      |> assign(:page, 1) # => Current page number
      # => socket.assigns.page = 1) # => Current page number
 
    {:ok, socket, temporary_assigns: [logs: []]} # => logs cleared after render
    # => After render, socket.assigns.logs becomes []
    # => Reduces memory for large log lists
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("load_more", _params, socket) do
  # => Handles "load_more" event from client
 
    page = socket.assigns.page + 1 # => Increment page
    # => page = socket.assigns.page + 1 # => Increment p
    new_logs = fetch_logs(page) # => Fetch next page
    # => new_logs = fetch_logs(page) # => Fetch next page
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:logs, new_logs) # => Assign new logs (old logs already cleared)
      # => socket.assigns.logs = new_logs) # => Assign new logs (old logs
      |> assign(:page, page) # => Update page number
      # => socket.assigns.page = page) # => Update page number
 
    {:noreply, socket} # => Render new logs, then clear from memory
  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 -->
      <h2>Application Logs</h2>
      <!-- => H2 heading element -->
      <ul>
      <!-- => List container for rendered items -->
        <%= for log <- @logs do %>
        <!-- => Loops over @logs, binding each element to log -->
          <li><%= log.timestamp %> - <%= log.message %></li>
          <!-- => List item rendered for each element -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ul>
      <!-- => Closes unordered list container -->
      <button phx-click="load_more">Load More</button>
      <!-- => Button triggers handle_event("load_more", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp fetch_logs(page \\ 1) do
  # => Defines fetch_logs function
 
    # Simulate fetching logs from database
    Enum.map(1..50, fn i ->
    # => Transforms each element in list
 
      %{timestamp: DateTime.utc_now(), message: "Log entry #{(page - 1) * 50 + i}"}
    end)
    # => Closes anonymous function; returns result to calling function
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.DashboardLive do
# => Defines module MyAppWeb.DashboardLive
 
  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_id, 123) # => Set user_id
      # => socket.assigns.user_id = 123) # => Set user_id
      |> assign_new(:stats, fn -> compute_expensive_stats(123) end) # => Lazy load stats
    # => compute_expensive_stats only runs if :stats not already assigned
 
    {:ok, socket} # => Ready
    # => Pattern: successful result — socket bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("refresh_stats", _params, socket) do
  # => Handles "refresh_stats" event from client
 
    # Force recalculation by removing and re-adding
    stats = compute_expensive_stats(socket.assigns.user_id) # => Recompute
    # => stats = compute_expensive_stats(socket.assigns.u
    {:noreply, assign(socket, :stats, stats)} # => Update stats
  end
  # => Closes enclosing function/module/block definition
 
  def handle_params(_params, _uri, socket) do
  # => Defines handle_params function
 
    # assign_new won't recompute stats on navigation
    socket = assign_new(socket, :stats, fn -> compute_expensive_stats(socket.assigns.user_id) end)
    # => Sets assign only if key missing
 
    # => stats remain from previous load
    {:noreply, socket} # => Keep existing stats
  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 -->
      <h2>Dashboard</h2>
      <!-- => H2 heading element -->
      <p>Total Sales: <%= @stats.total_sales %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <p>Active Users: <%= @stats.active_users %></p>
      <!-- => Paragraph element displaying dynamic content -->
      <button phx-click="refresh_stats">Refresh</button>
      <!-- => Button triggers handle_event("refresh_stats", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp compute_expensive_stats(user_id) do
  # => Defines compute_expensive_stats function
 
    IO.puts("Computing expensive stats for user #{user_id}...")
    # => Output: prints string to console
 
    Process.sleep(1000) # => Simulate expensive computation
    # => Pauses execution for given milliseconds (for simulation)
    %{total_sales: 10_000, active_users: 250} # => Stats data
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.CounterListLive do
# => Defines module MyAppWeb.CounterListLive
 
  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(:counters, %{a: 0, b: 0, c: 0}) # => Three independent counters
      # => socket.assigns.counters = %{a: 0, b: 0, c: 0}) # => Three independ
      |> assign(:total_clicks, 0) # => Global click counter
      # => socket.assigns.total_clicks = 0) # => Global click counter
 
    {:ok, socket} # => Ready
    # => Pattern: successful result — socket bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("increment", %{"counter" => key}, socket) do
  # => Handles "increment" event from client
 
    counter_key = String.to_atom(key) # => Convert "a" to :a
    # => Converts string to atom — use carefully, atoms not GC'd
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> update(:counters, fn counters ->
      # => Updates assign using current value
 
        # Update nested map value
        Map.update!(counters, counter_key, &(&1 + 1)) # => Increment specific counter
        # => If counter_key is :a, counters becomes %{a: 1, b: 0, c: 0}
      end)
      # => Closes anonymous function; returns result to calling function
      |> update(:total_clicks, &(&1 + 1)) # => Increment total
      # => total_clicks goes from 0 to 1
 
    {:noreply, socket} # => Re-render with updated counters
  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 -->
      <h2>Counters</h2>
      <!-- => H2 heading element -->
      <%= for {key, value} <- @counters do %>
      <!-- => Loops over @counters, binding each element to {key, value} -->
        <div>
        <!-- => Div container wrapping component content -->
          Counter <%= key %>: <%= value %>
          <!-- => Static text with interpolated Elixir expression -->
          <button phx-click="increment" phx-value-counter={key}>+</button>
          <!-- => Button triggers handle_event("increment", ...) on click -->
        </div>
        <!-- => Closes outer div container -->
      <% end %>
      <!-- => End of conditional/loop block -->
      <p>Total Clicks: <%= @total_clicks %></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.TaskListLive do
# => Defines module MyAppWeb.TaskListLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    tasks = [
    # => tasks bound to result of [
 
      %{id: 1, title: "Task 1", completed: false},
      # => Map with id: 1 — hardcoded sample data for demonstration
      %{id: 2, title: "Task 2", completed: false}
      # => Map with id: 2 — hardcoded sample data for demonstration
    ]
    # => Closes list literal
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> stream(:tasks, tasks) # => Initialize stream with tasks
      # => Stream tracks items by :id field
      # => Client renders list keyed by item :id
 
    {:ok, socket} # => Ready
    # => Pattern: successful result — socket bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("add_task", %{"title" => title}, socket) do
  # => Handles "add_task" event from client
 
    new_task = %{id: System.unique_integer([:positive]), title: title, completed: false}
    # => new_task bound to result of %{id: System.unique_integer([:positive]), title: t
 
    # => Create new task with unique ID
 
    socket = stream_insert(socket, :tasks, new_task, at: 0) # => Prepend to stream
    # => Only new task sent to client, existing tasks unchanged
    {:noreply, socket} # => Efficient update
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("delete_task", %{"id" => id_str}, socket) do
  # => Handles "delete_task" event from client
 
    id = String.to_integer(id_str) # => Convert to integer
    # => Converts "123" to integer 123 — raises if not valid integer
    socket = stream_delete_by_dom_id(socket, :tasks, "tasks-#{id}") # => Remove from stream
    # => Only deletion sent to client
    {:noreply, socket} # => Task removed from DOM
  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 -->
      <h2>Task List</h2>
      <!-- => H2 heading element -->
      <form phx-submit="add_task">
      <!-- => form HTML element -->
        <input type="text" name="title" placeholder="New task" />
        <!-- => text input field -->
        <button>Add</button>
        <!-- => Button element -->
      </form>
      <!-- => Closes form element — phx-submit/phx-change handlers deactivated -->
 
      <%!-- Stream rendering with phx-update="stream" --%>
      <ul id="tasks" phx-update="stream">
      <!-- => List container for rendered items -->
        <%= for {dom_id, task} <- @streams.tasks do %>
        <!-- => Loops over @streams.tasks, binding each element to {dom_id, task} -->
          <li id={dom_id}>
          <!-- => List item rendered for each element -->
            <%= task.title %>
            <!-- => Evaluates Elixir expression and outputs result as HTML -->
            <button phx-click="delete_task" phx-value-id={task.id}>Delete</button>
            <!-- => Button triggers handle_event("delete_task", ...) on click -->
          </li>
          <!-- => Closes list item element -->
        <% 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.ActivityFeedLive do
# => Defines module MyAppWeb.ActivityFeedLive
 
  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 over WebSocket
      Phoenix.PubSub.subscribe(MyApp.PubSub, "activities") # => Subscribe to updates
      # => Subscribes process to broadcast topic — receives future broadcasts
      activities = load_recent_activities() # => Load from database
      # => activities = load_recent_activities() # => Load from
 
      socket =
      # => socket updated via pipeline below
        socket
        # => Starting socket as base for pipeline operations
        |> stream(:activities, activities, reset: true) # => Reset on reconnect
        # => Clears any stale stream data from disconnection
 
      {:ok, socket}
      # => Returns success tuple to LiveView runtime
 
    else
    # => Else branch executes when condition was false
      # Initial HTTP render (not connected yet)
      {:ok, assign(socket, :activities_loaded, false)} # => Defer loading
      # => Pattern: successful result — result bound to returned value
    end
    # => Closes enclosing function/module/block definition
  end
  # => Closes enclosing function/module/block definition
 
  def handle_info({:new_activity, activity}, socket) do
  # => Handles internal Elixir messages
 
    # Received from PubSub
    socket = stream_insert(socket, :activities, activity, at: 0) # => Prepend new activity
    # => Inserts/updates item in stream — patches only changed DOM node
    {:noreply, socket} # => Update feed
  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 -->
      <h2>Activity Feed</h2>
      <!-- => H2 heading element -->
      <ul id="activities" phx-update="stream">
      <!-- => List container for rendered items -->
        <%= for {dom_id, activity} <- @streams.activities do %>
        <!-- => Loops over @streams.activities, binding each element to {dom_id, activity} -->
          <li id={dom_id}><%= activity.description %></li>
          <!-- => List item rendered for each element -->
        <% 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
 
  defp load_recent_activities do
  # => Defines load_recent_activities function
 
    # Simulate database query
    [
    # => Opens list of metric definitions
      %{id: 1, description: "User logged in"},
      # => Map with id: 1 — hardcoded sample data for demonstration
      %{id: 2, description: "New comment posted"}
      # => Map with id: 2 — hardcoded sample data for demonstration
    ]
    # => Closes list literal
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ProductListLive do
# => Defines module MyAppWeb.ProductListLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  @page_size 20
  # => Module-level constant @page_size = 20
 
  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(:page, 1) # => Current page (increments on scroll trigger)
      # => socket.assigns.page = 1) # => Current page
      |> load_products() # => Load first page
      # => Pipes result into: load_products() # => Load first page
 
    {:ok, socket} # => Ready
    # => Pattern: successful result — socket bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("load_next_page", _params, socket) do
  # => Handles "load_next_page" event from client
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> update(:page, &(&1 + 1)) # => Increment page
      # => Transforms assigns.page using current value via function
      |> load_products() # => Load next page
      # => Pipes result into: load_products() # => Load next page
 
    {:noreply, socket} # => Append products to stream
  end
  # => Closes enclosing function/module/block definition
 
  defp load_products(socket) do
  # => Defines load_products function
 
    page = socket.assigns.page
    # => page bound to result of socket.assigns.page
 
    offset = (page - 1) * @page_size # => Calculate offset
    # => offset = (page - 1) * @page_size # => Calculate o
    products = fetch_products(offset, @page_size) # => Query database
    # => products: [%{id: 1, name: "Product 1"}, ...]
 
    if page == 1 do
    # => Branches on condition: executes inner block when page == 1 is truthy
      # First page: initialize stream
      stream(socket, :products, products) # => Create new stream
    else
    # => Else branch executes when condition was false
      # Subsequent pages: append to stream
      Enum.reduce(products, socket, fn product, acc ->
      # => Accumulates result by applying function to each element
        stream_insert(acc, :products, product, at: -1) # => Append to end
        # => Inserts/updates item in stream — patches only changed DOM node
      end)
      # => Closes anonymous function; returns result to calling function
    end
    # => Closes enclosing function/module/block definition
  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 -->
      <h2>Products</h2>
      <!-- => H2 heading element -->
      <ul id="products" phx-update="stream">
      <!-- => List container for rendered items -->
        <%= for {dom_id, product} <- @streams.products do %>
        <!-- => Loops over @streams.products, binding each element to {dom_id, product} -->
          <li id={dom_id}><%= product.name %></li>
          <!-- => List item rendered for each element -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ul>
      <!-- => Closes unordered list container -->
      <button phx-click="load_next_page">Load More</button>
      <!-- => Button triggers handle_event("load_next_page", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp fetch_products(offset, limit) do
  # => Defines fetch_products function
 
    # Simulate database query
    Enum.map((offset + 1)..(offset + limit), fn i ->
    # => Transforms each element in list
 
      %{id: i, name: "Product #{i}"}
      # => Creates map with id: i — dynamically generated sample data
    end)
    # => Closes anonymous function; returns result to calling function
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.InfiniteScrollLive do
# => Defines module MyAppWeb.InfiniteScrollLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  @page_size 20
  # => Module-level constant @page_size = 20
 
  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(:page, 1)
      # => Sets assigns.page
 
      |> assign(:has_more, true) # => Track if more items available
      # => socket.assigns.has_more = true) # => Track if more items available
      |> load_page()
      # => Pipes result into load_page()
 
 
    {:ok, socket}
    # => Returns success tuple to LiveView runtime
 
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("load-more", _params, socket) do
  # => Handles "load-more" event from client
 
    if socket.assigns.has_more do
    # => Branches on condition: executes inner block when socket.assigns.has_more is truthy
      socket =
      # => socket updated via pipeline below
        socket
        # => Starting socket as base for pipeline operations
        |> update(:page, &(&1 + 1))
        # => Updates assign using current value
 
        |> load_page()
        # => Pipes result into load_page()
 
 
      {:noreply, socket}
      # => Returns updated socket, triggers re-render
 
    else
    # => Else branch executes when condition was false
      {:noreply, socket} # => No more items
    end
    # => Closes enclosing function/module/block definition
  end
  # => Closes enclosing function/module/block definition
 
  defp load_page(socket) do
  # => Defines load_page function
 
    page = socket.assigns.page
    # => page bound to result of socket.assigns.page
 
    items = fetch_items(page, @page_size)
    # => items bound to result of fetch_items(page, @page_size)
 
    has_more = length(items) == @page_size # => Check if more available
    # => has_more = length(items) == @page_size # => Check i
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:has_more, has_more)
      # => Sets assigns.has_more
 
      |> then(fn socket ->
      # => Pipes result into then(fn socket ->
 
        if page == 1 do
        # => Branches on condition: executes inner block when page == 1 is truthy
          stream(socket, :items, items)
          # => Initializes efficient stream for large collections
 
        else
        # => Else branch executes when condition was false
          Enum.reduce(items, socket, fn item, acc ->
          # => Accumulates result by applying function to each element
            stream_insert(acc, :items, item, at: -1)
            # => Inserts item into stream, triggers DOM patch
 
          end)
          # => Closes anonymous function; returns result to calling function
        end
        # => Closes enclosing function/module/block definition
      end)
      # => Closes anonymous function; returns result to calling function
 
    socket
    # => Starting socket as base for pipeline operations
  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 id="infinite-scroll-container" phx-hook="InfiniteScroll">
    <!-- => Div container wrapping component content -->
      <ul id="items" phx-update="stream">
      <!-- => List container for rendered items -->
        <%= for {dom_id, item} <- @streams.items do %>
        <!-- => Loops over @streams.items, binding each element to {dom_id, item} -->
          <li id={dom_id}><%= item.content %></li>
          <!-- => List item rendered for each element -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ul>
      <!-- => Closes unordered list container -->
 
      <%= if @has_more do %>
      <!-- => Renders inner content only when @has_more is truthy -->
        <div id="loading-trigger">Loading...</div>
        <!-- => Div container wrapping component content -->
      <% else %>
      <!-- => Else branch — renders when condition is false -->
        <div>No more items</div>
        <!-- => Div container wrapping component content -->
      <% end %>
      <!-- => End of conditional/loop block -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp fetch_items(page, limit) do
  # => Defines fetch_items function
 
    offset = (page - 1) * limit
    # => offset bound to result of (page - 1) * limit
 
    # Simulate limited dataset
    if offset < 100 do
    # => Branches on condition: executes inner block when offset < 100 is truthy
      Enum.map((offset + 1)..min(offset + limit, 100), fn i ->
      # => Transforms each element in list
 
        %{id: i, content: "Item #{i}"}
        # => Creates map with id: i — dynamically generated sample data
      end)
      # => Closes anonymous function; returns result to calling function
    else
    # => Else branch executes when condition was false
      [] # => No more items
    end
    # => Closes enclosing function/module/block definition
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

// InfiniteScroll hook detects when user scrolls near bottom
let Hooks = {};
Hooks.InfiniteScroll = {
  mounted() {
    this.observer = new IntersectionObserver(
      (entries) => {
        // => Triggered when loading-trigger becomes visible
        if (entries[0].isIntersecting) {
          this.pushEvent("load-more", {}); // => Request more items from server
        }
      },
      { threshold: 1.0 },
    );
 
    const trigger = document.getElementById("loading-trigger");
    if (trigger) {
      this.observer.observe(trigger); // => Watch loading-trigger element
    }
  },
  destroyed() {
    if (this.observer) {
      this.observer.disconnect(); // => Cleanup
    }
  },
};

defmodule MyAppWeb.BlogLive do
# => Defines module MyAppWeb.BlogLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    {:ok, assign(socket, :posts, load_posts())} # => Load all posts
    # => Pattern: successful result — result bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_params(params, _uri, socket) do
  # => Defines handle_params function
 
    # Called on navigation and initial load
    post_id = params["id"] # => Extract post ID from URL
    # => post_id = params["id"] # => Extract post ID from U
    selected_post = find_post(socket.assigns.posts, post_id) # => Find post by ID
    # => selected_post = find_post(socket.assigns.posts, post_id)
 
    socket = assign(socket, :selected_post, selected_post) # => Set selected post
    # => socket.assigns.selected_post = selected_post
    {:noreply, socket} # => Update view
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("select_post", %{"id" => id}, socket) do
  # => Handles "select_post" event from client
 
    # patch keeps LiveView process alive, just updates params
    {:noreply, push_patch(socket, to: "/blog?id=#{id}")} # => Update URL, call handle_params
    # => Same LiveView process, no remount
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("go_to_settings", _params, socket) do
  # => Handles "go_to_settings" event from client
 
    # navigate terminates current LiveView, starts new one
    {:noreply, push_navigate(socket, to: "/settings")} # => Different LiveView
    # => Current process terminates, new LiveView mounts
  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 -->
      <h2>Blog Posts</h2>
      <!-- => H2 heading element -->
      <ul>
      <!-- => List container for rendered items -->
        <%= for post <- @posts do %>
        <!-- => Loops over @posts, binding each element to post -->
          <li>
          <!-- => List item rendered for each element -->
            <button phx-click="select_post" phx-value-id={post.id}>
            <!-- => Button triggers handle_event("select_post", ...) on click -->
              <%= post.title %>
              <!-- => Evaluates Elixir expression and outputs result as HTML -->
            </button>
            <!-- => Closes button element -->
          </li>
          <!-- => Closes list item element -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </ul>
      <!-- => Closes unordered list container -->
 
      <%= if @selected_post do %>
      <!-- => Renders inner content only when @selected_post is truthy -->
        <div>
        <!-- => Div container wrapping component content -->
          <h3><%= @selected_post.title %></h3>
          <!-- => H3 heading element -->
          <p><%= @selected_post.content %></p>
          <!-- => Paragraph element displaying dynamic content -->
        </div>
        <!-- => Closes outer div container -->
      <% end %>
      <!-- => End of conditional/loop block -->
 
      <button phx-click="go_to_settings">Settings</button>
      <!-- => Button triggers handle_event("go_to_settings", ...) on click -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp load_posts do
  # => Defines load_posts function
 
    [
    # => Opens list of metric definitions
      %{id: 1, title: "Post 1", content: "Content 1"},
      # => Map with id: 1 — hardcoded sample data for demonstration
      %{id: 2, title: "Post 2", content: "Content 2"}
      # => Map with id: 2 — hardcoded sample data for demonstration
    ]
    # => Closes list literal
  end
  # => Closes enclosing function/module/block definition
 
  defp find_post(posts, nil), do: nil
  # => Defines find_post function
 
  defp find_post(posts, id_str) do
  # => Defines find_post function
 
    id = String.to_integer(id_str)
    # => Converts string to integer
 
    Enum.find(posts, &(&1.id == id))
    # => Finds first element matching predicate
 
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.SearchLive do
# => Defines module MyAppWeb.SearchLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    {:ok, assign(socket, :results, [])} # => Empty results initially
    # => Pattern: successful result — result bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_params(params, _uri, socket) do
  # => Defines handle_params function
 
    # Extract query parameters from URL
    query = params["q"] || "" # => Search query
    # => query = params["q"] || "" # => Search query
    category = params["category"] || "all" # => Filter category
    # => category = params["category"] || "all" # => Filter
    page = params["page"] || "1" # => Pagination
    # => page = params["page"] || "1" # => Pagination
 
    results = perform_search(query, category, page) # => Search with params
    # => results = perform_search(query, category, page) #
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:query, query)
      # => Sets assigns.query
 
      |> assign(:category, category)
      # => Sets assigns.category
 
      |> assign(:page, String.to_integer(page))
      # => Sets assigns.page
 
      |> assign(:results, results)
      # => Sets assigns.results
 
 
    {:noreply, socket} # => Render with query state
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("search", %{"q" => query, "category" => category}, socket) do
  # => Handles "search" event from client
 
    # Update URL with new query parameters
    {:noreply, push_patch(socket, to: "/search?q=#{query}&category=#{category}&page=1")}
    # => Patches URL without full LiveView remount
 
    # => URL updated, handle_params called with new params
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("next_page", _params, socket) do
  # => Handles "next_page" event from client
 
    next_page = socket.assigns.page + 1
    # => next_page bound to result of socket.assigns.page + 1
 
    query = socket.assigns.query
    # => query bound to result of socket.assigns.query
 
    category = socket.assigns.category
    # => category bound to result of socket.assigns.category
 
 
    {:noreply, push_patch(socket, to: "/search?q=#{query}&category=#{category}&page=#{next_page}")}
    # => Patches URL without full LiveView remount
 
  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-submit="search">
      <!-- => form HTML element -->
        <input type="text" name="q" value={@query} placeholder="Search..." />
        <!-- => text input field -->
        <select name="category">
        <!-- => select HTML element -->
          <option value="all" selected={@category == "all"}>All</option>
          <!-- => option HTML element -->
          <option value="products" selected={@category == "products"}>Products</option>
          <!-- => option HTML element -->
          <option value="articles" selected={@category == "articles"}>Articles</option>
          <!-- => option HTML element -->
        </select>
        <button>Search</button>
        <!-- => Button element -->
      </form>
      <!-- => Closes form element — phx-submit/phx-change handlers deactivated -->
 
      <div>
      <!-- => Div container wrapping component content -->
        <h3>Results (Page <%= @page %>)</h3>
        <!-- => H3 heading element -->
        <ul>
        <!-- => List container for rendered items -->
          <%= for result <- @results do %>
          <!-- => Loops over @results, binding each element to result -->
            <li><%= result %></li>
            <!-- => List item rendered for each element -->
          <% end %>
          <!-- => End of conditional/loop block -->
        </ul>
        <!-- => Closes unordered list container -->
        <button phx-click="next_page">Next Page</button>
        <!-- => Button triggers handle_event("next_page", ...) on click -->
      </div>
      <!-- => Closes outer div container -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp perform_search(query, category, page) do
  # => Defines perform_search function
 
    # Simulate search
    ["Result for #{query} in #{category} (page #{page})"]
    # => Returns simulated search results list
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.TaskFormLive do
# => Defines module MyAppWeb.TaskFormLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    {:ok, assign(socket, :task_title, "")} # => Empty form
    # => Pattern: successful result — result bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("save_task", %{"title" => title}, socket) do
  # => Handles "save_task" event from client
 
    case save_task(title) do
    # => Pattern matches on result value
 
      {:ok, _task} ->
      # => Matches this pattern — executes right-hand side
        socket =
        # => socket updated via pipeline below
          socket
          # => Starting socket as base for pipeline operations
          |> put_flash(:info, "Task created successfully!") # => Sets @flash[:info] in socket
          # => Pipes result into: put_flash(:info, "Task created successfully!"
          |> assign(:task_title, "") # => Clear form
          # => socket.assigns.task_title = "") # => Clear form
 
        {:noreply, socket} # => Flash shown at top
 
      {:error, reason} ->
      # => Pattern: error result — reason bound to error reason
        socket = put_flash(socket, :error, "Failed to create task: #{reason}") # => Error flash
        # => socket variable updated with new state
        {:noreply, socket} # => Error shown at top
    end
    # => Closes enclosing function/module/block definition
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("clear_flash", _params, socket) do
  # => Handles "clear_flash" event from client
 
    socket = clear_flash(socket) # => Remove all flash messages
    # => socket variable updated with new state
    {:noreply, socket} # => Flash cleared
  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 -->
      <%!-- Flash messages displayed at top --%>
      <div :if={@flash["info"]} class="alert alert-info">
      <!-- => Div container with class="alert alert-info" -->
        <%= @flash["info"] %>
        <!-- => Outputs assigns.flash value as HTML -->
        <button phx-click="clear_flash">×</button>
        <!-- => Button triggers handle_event("clear_flash", ...) on click -->
      </div>
      <!-- => Closes outer div container -->
 
      <div :if={@flash["error"]} class="alert alert-error">
      <!-- => Div container with class="alert alert-error" -->
        <%= @flash["error"] %>
        <!-- => Outputs assigns.flash value as HTML -->
        <button phx-click="clear_flash">×</button>
        <!-- => Button triggers handle_event("clear_flash", ...) on click -->
      </div>
      <!-- => Closes outer div container -->
 
      <form phx-submit="save_task">
      <!-- => form HTML element -->
        <input type="text" name="title" value={@task_title} placeholder="Task title" />
        <!-- => text input field -->
        <button>Save</button>
        <!-- => Button element -->
      </form>
      <!-- => Closes form element — phx-submit/phx-change handlers deactivated -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
 
  defp save_task(""), do: {:error, "Title cannot be empty"}
  # => Defines save_task function
 
  defp save_task(title) do
  # => Defines save_task function
 
    # Simulate save
    {:ok, %{id: 1, title: title}}
    # => Pattern: successful result — result bound to returned value
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition

defmodule MyAppWeb.ChatRoomLive do
# => Defines module MyAppWeb.ChatRoomLive
 
  use MyAppWeb, :live_view
  # => Imports LiveView macros and callbacks
 
 
  @topic "chat:lobby"
  # => Module-level constant @topic = "chat:lobby"
 
  def mount(_params, _session, socket) do
  # => Called on LiveView initialization
 
    if connected?(socket) do
    # => Returns true when WebSocket established
 
      # Subscribe to chat topic when connected via WebSocket
      Phoenix.PubSub.subscribe(MyApp.PubSub, @topic) # => Listen for broadcasts
      # => Any broadcast to "chat:lobby" received in handle_info
    end
    # => Closes enclosing function/module/block definition
 
    socket =
    # => socket updated via pipeline below
      socket
      # => Starting socket as base for pipeline operations
      |> assign(:messages, []) # => Empty message list
      # => socket.assigns.messages = []) # => Empty message list
      |> assign(:username, "User#{:rand.uniform(1000)}") # => Random username
      # => socket.assigns.username = "User#{:rand.uniform(1000)}") # => Rando
 
    {:ok, socket} # => Ready
    # => Pattern: successful result — socket bound to returned value
  end
  # => Closes enclosing function/module/block definition
 
  def handle_event("send_message", %{"text" => text}, socket) do
  # => Handles "send_message" event from client
 
    message = %{
    # => message bound to result of %{
 
      username: socket.assigns.username,
      # => Sets username: field to socket.assigns.username
      text: text,
      # => Sets text: field to text
      timestamp: DateTime.utc_now()
      # => Sets timestamp: field to DateTime.utc_now()
    }
 
    # Broadcast to all subscribers
    Phoenix.PubSub.broadcast(MyApp.PubSub, @topic, {:new_message, message})
    # => Broadcasts message to all subscribers
 
    # => Sent to all LiveView processes subscribed to "chat:lobby"
    # => Including this process (will receive in handle_info)
 
    {:noreply, socket} # => Don't update yet (wait for broadcast)
  end
  # => Closes enclosing function/module/block definition
 
  def handle_info({:new_message, message}, socket) do
  # => Handles internal Elixir messages
 
    # Received broadcast from any process (including self)
    socket = update(socket, :messages, fn messages ->
    # => Updates assigns.messages using current value
 
      [message | messages] # => Prepend new message
    end)
    # => Closes anonymous function; returns result to calling function
 
    {:noreply, socket} # => Re-render with new message
  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 -->
      <h2>Chat Room</h2>
      <!-- => H2 heading element -->
      <div id="messages">
      <!-- => Div container wrapping component content -->
        <%= for msg <- Enum.reverse(@messages) do %>
        <!-- => Loops over Enum.reverse(@messages), binding each element to msg -->
          <p><strong><%= msg.username %>:</strong> <%= msg.text %></p>
          <!-- => Paragraph element displaying dynamic content -->
        <% end %>
        <!-- => End of conditional/loop block -->
      </div>
      <!-- => Closes outer div container -->
 
      <form phx-submit="send_message">
      <!-- => form HTML element -->
        <input type="text" name="text" placeholder="Type a message..." />
        <!-- => text input field -->
        <button>Send</button>
        <!-- => Button element -->
      </form>
      <!-- => Closes form element — phx-submit/phx-change handlers deactivated -->
    </div>
    <!-- => Closes outer div container -->
    """
    # => Closes HEEx template string
  end
  # => Closes enclosing function/module/block definition
end
# => Closes enclosing function/module/block definition