raxol

# This example demonstrates advanced layout techniques using the `row` and `column` elements from Raxol.View.Elements.
defmodule Raxol.Docs.Guides.Examples.Layout.AdvancedLayoutTest do
  use Raxol.Core.Runtime.Application
  import Raxol.View.Elements

  @impl true
  def init(_opts) do
    # No initial state needed for this static layout example
    %{}
  end

  @impl true
  def update(message, model) do
    model
  end

  @impl true
  def view(_model) do
    view do
      column(gap: 20, padding: 10, style: "border: 1px solid #ccc; width: 400px;") do
        # Example 1: Centered Row
        text(content: "Row with centered items:", style: "font-weight: bold;")
        row(gap: 10, justify: :center, align: :center, style: "border: 1px dashed blue; padding: 5px;") do
          button(content: "Btn 1")
          button(content: "Button 2")
          button(content: "B3")
        end

        # Example 2: Space Between
        text(content: "Row with space-between items:", style: "font-weight: bold;")
        row(gap: 10, justify: :space_between, style: "border: 1px dashed green; padding: 5px;") do
          text(content: "Left Item")
          text(content: "Right Item")
        end

        # Example 3: Nested Layout with Flex
        text(content: "Nested Column/Row with Flex:", style: "font-weight: bold;")
        row(gap: 15, align: :start, style: "border: 1px dashed red; padding: 5px;") do
          # Fixed width column
          column(gap: 5, style: "border: 1px solid orange; padding: 5px; width: 100px;") do
            text(content: "Sidebar")
            button(content: "Nav 1")
            button(content: "Nav 2")
          end

          # Flexible column taking remaining space
          column(gap: 10, flex: 1, style: "border: 1px solid purple; padding: 5px;") do
            text(content: "Main Content Area", style: "font-weight: bold; text-align: center;")
            row(gap: 5, justify: :space_around) do
              text_input(placeholder: "Input 1")
              text_input(placeholder: "Input 2")
            end
            panel(title: "Inner Panel") do
              text(content: "Content inside a panel within the flexible column.")
            end
          end
        end

        # Example 4: Column Alignment
        text(content: "Column with different alignments:", style: "font-weight: bold;")
        row(gap: 10, style: "border: 1px dashed teal; padding: 5px; height: 100px; align-items: stretch;") do
          column(align: :start, flex: 1, style: "border: 1px solid gray; padding: 3px;") do
            text(content: "Align Start")
            button(content: "S")
          end
          column(align: :center, flex: 1, style: "border: 1px solid gray; padding: 3px;") do
            text(content: "Align Center")
            button(content: "C")
          end
           column(align: :end, flex: 1, style: "border: 1px solid gray; padding: 3px;") do
            text(content: "Align End")
            button(content: "E")
          end
        end

      end # End main column
    end
  end

  # Function to run the example directly
  def main do
    Raxol.start_link(__MODULE__, [])
    # For CI/test/demo: sleep for 2 seconds, then exit. Adjust as needed.
    Process.sleep(2000)
  end
end

# To run this example: mix run -e "Raxol.Docs.Guides.Examples.Layout.AdvancedLayoutTest.main()"
# (Assuming Raxol is a dependency or mix project is set up)