### Import Pode.Web and Start Server

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Basics.md

Import the Pode.Web module and start a Pode server. This is the initial setup required for any Pode.Web application.

```powershell
Import-Module -Name Pode.Web

Start-PodeServer {
    # logic
}
```

--------------------------------

### Start Pode Server with Web Templates

Source: https://github.com/badgerati/pode.web/blob/develop/docs/index.md

This snippet demonstrates how to start a Pode server, configure endpoints, initialize Pode.Web templates with a title and theme, and add a web page containing a table of services. It's useful for creating dynamic web interfaces directly from PowerShell.

```powershell
Import-Module Pode.Web

Start-PodeServer {
    Add-PodeEndpoint -Address localhost -Port 8080 -Protocol Http

    Initialize-PodeWebTemplates -Title 'Example' -Theme Midnight

    Add-PodeWebPage -Name 'Services' -Icon 'Settings' -ScriptBlock {
        New-PodeWebCard -Content @(
            New-PodeWebTable -Name 'Services' -ScriptBlock {
                foreach ($svc in (Get-Service)) {
                    [ordered]@{
                        Name   = $svc.Name
                        Status = "$($svc.Status)"
                    }
                }
            }
        )
    }
}
```

--------------------------------

### Build Pode.Web Project

Source: https://github.com/badgerati/pode.web/blob/develop/README.md

Run this command to build the Pode.Web project. This is necessary before running examples or contributing to the project.

```powershell
Invoke-Build Build
```

--------------------------------

### Build Documentation with InvokeBuild

Source: https://github.com/badgerati/pode.web/blob/develop/README.md

Use this command to build the documentation locally. Ensure the InvokeBuild module is installed.

```powershell
Invoke-Build Docs
```

--------------------------------

### Create a Basic Web Page in Pode.Web

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Getting-Started/Migrating/04-to-05.md

This example shows how to add a basic web page without assigning it to a group.

```powershell
Add-PodeWebPage -Name Example
```

--------------------------------

### Install Pode.Web from PowerShell Gallery

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Getting-Started/Installation.md

Use this command to install the Pode.Web module from the PowerShell Gallery. Ensure you have PowerShell 5+ or PowerShell Core 6+ installed.

```powershell
Install-Module -Name Pode.Web
```

--------------------------------

### Create a Basic Card with Content

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Card.md

Use `New-PodeWebCard` to create a card and supply content via the `-Content` parameter. This example shows a card containing a quote.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebQuote -Value 'Pode is awesome!' -Source 'Badgerati'
)
```

--------------------------------

### Create Container with Content

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Container.md

Use New-PodeWebContainer to create a container and supply an array of elements to the -Content parameter. This example includes a quote.

```powershell
New-PodeWebContainer -Content @(
    New-PodeWebQuote -Value 'Pode is awesome!' -Source 'Badgerati'
)
```

--------------------------------

### Start Pode.web Video

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Video.md

Use `Start-PodeWebVideo` to play video that is currently stopped or paused. This action requires the video element to be defined.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebVideo -Name 'example' -Thumbnail 'https://samplelib.com/lib/preview/mp4/sample-5s.jpg' -Source @(
        New-PodeWebVideoSource -Url 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4'
    )
)

New-PodeWebContainer -Content @(
    New-PodeWebButton -Name 'Play' -ScriptBlock {
        Start-PodeWebVideo -Name 'example'
    }
)
```

--------------------------------

### Register Play Event for Video

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Video.md

Handle video playback events, such as 'Play', by registering a script block using Register-PodeWebMediaEvent. This example shows how to display a toast notification when the video starts playing.

```powershell
New-PodeWebVideo -Name 'example' -Thumbnail 'https://samplelib.com/lib/preview/mp4/sample-5s.jpg' -Source @(
        New-PodeWebVideoSource -Url 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4'
    ) |
Register-PodeWebMediaEvent -Type Play -ScriptBlock {
    Show-PodeWebToast -Title 'Action' -Message $EventType
}
```

--------------------------------

### Register Audio Playback Event

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Audio.md

Register for audio events like 'Play' using Register-PodeWebMediaEvent. This example shows how to display a toast notification when the audio starts playing.

```powershell
New-PodeWebAudio -Name 'example' -Source @(
    New-PodeWebAudioSource -Id 'sample' -Url 'https://samplelib.com/lib/preview/mp3/sample-6s.mp3'
) |
Register-PodeWebMediaEvent -Type Play -ScriptBlock {
    Show-PodeWebToast -Title 'Action' -Message $EventType
}
```

--------------------------------

### Import and Initialize Pode.Web Module

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Getting-Started/Installation.md

After installing Pode.Web, import the module at the beginning of your Pode server script. Then, initialize Pode.Web templates within your Start-PodeServer script block.

```powershell
Import-Module -Name Pode.Web

Start-PodeServer {
    Initialize-PodeWebTemplates -Title '<Title>'
}
```

--------------------------------

### Start Audio

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Audio.md

Use `Start-PodeWebAudio` to play audio that is currently stopped or paused. This action requires an existing audio element to be defined.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebAudio -Name 'example' -Source @(
        New-PodeWebAudioSource -Url 'https://samplelib.com/lib/preview/mp3/sample-6s.mp3'
    )
)

New-PodeWebContainer -Content @(
    New-PodeWebButton -Name 'Play' -ScriptBlock {
        Start-PodeWebAudio -Name 'example'
    }
)
```

--------------------------------

### Build Comprehensive Custom Darkred Theme

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Themes.md

This example demonstrates building a detailed custom theme named 'DarkRed' based on the 'Dark' theme. It configures background, border, text, navigation, toast, calendar icon, and chart colors extensively. Initialize Pode.Web templates before applying the custom theme.

```powershell
Initialize-PodeWebTemplates -Title 'Test' -Logo '/pode.web-static/images/icon.png' -Theme Custom

$bgColourConfig = @{
    Page      = '#000'
    Hero      = '#210000'
    Primary   = '#1a0000'
    Secondary = '#1f0000'
    Tertiary  = '#240000'
}
$bgColourConfig = New-PodeWebBackgroundColourConfig @bgColourConfig

$borderColourConfig = @{
    Primary   = '#4c0000'
    Secondary = '#ba0000'
    Tertiary  = '#4c0000'
}
$borderColourConfig = New-PodeWebBorderColourConfig @borderColourConfig

$txtColourConfig = @{
    Primary        = '#afafaf'
    Secondary      = '#afafaf'
    Tertiary       = '#d6d6d6'
    Link           = '#ff2f2f'
    HoverPrimary   = '#ff2f2f'
    HoverSecondary = '#dedede'
    Disabled       = '#959595'
    Enabled        = '#1a0000'
}
$txtColourConfig = New-PodeWebTextColourConfig @txtColourConfig

$navColourConfig = @{
    Background = '#2f0000'
    Border     = '#4c0000'
    Text       = '#e3e3e3'
    HoverText  = '#ff1a1a'
}
$navColourConfig = New-PodeWebNavColourConfig @navColourConfig

$toastColourConfig = @{
    BackgroundPrimary   = '#1f0000'
    BackgroundSecondary = '#3a0000'
    Border              = '#614d4d'
    TextPrimary         = '#bcbcbc'
    TextSecondary       = '#d6d6d6'
}
$toastColourConfig = New-PodeWebToastColourConfig @toastColourConfig

$calColourConfig = @{
    Primary = 'invert(0%)'
    Hover   = 'invert(100%) sepia() brightness(30%) saturate(10000%) hue-rotate(120deg)'
}
$calColourConfig = New-PodeWebCalendarIconColourConfig @calColourConfig

$chartColourConfig = @{
    Point  = @('#ff4a4a', '#bd10e0', '#4a90e2', '#b8e986', '#ffdab9')
    Grid   = '#4c0000'
    Tick   = '#afafaf'
    Border = '#4c0000'
}
$chartColourConfig = New-PodeWebChartColourConfig @chartColourConfig

Add-PodeWebCustomTheme -Name 'DarkRed' -Base Dark \
    -BackgroundColourConfig $bgColourConfig \
    -BorderColourConfig $borderColourConfig
```

--------------------------------

### Create a Basic Link

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Link.md

Use New-PodeWebLink to create a hyperlink. Supply a -Url for the href and a -Value for the display text. This example embeds a link within text content.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebText -Value 'This is a link to '
    New-PodeWebLink -Url 'https://github.com/Badgerati/Pode' -Value 'Pode'
)
```

--------------------------------

### Create Container with No Background

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Container.md

Use the -NoBackground switch with New-PodeWebContainer to render the container with a transparent background. This example also includes a quote.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebQuote -Value 'Pode is awesome!' -Source 'Badgerati'
)
```

--------------------------------

### Create Table with Interactive Buttons

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Table.md

Renders a table with 'Start' and 'Stop' buttons for each service. The button's scriptblock uses $WebEvent.Data.Value to identify the service.

```powershell
New-PodeWebContainer -Content @(
    New-PodeWebTable -Name 'Services' -DataColumn Name -ScriptBlock {
        foreach ($svc in (Get-Service)) {
            [ordered]@{ 
                Name      = $svc.Name
                Status    = "$($svc.Status)"
                StartType = "$($svc.StartType)"
                Actions   = @(
                    New-PodeWebButton -Name 'Stop' -Icon 'Stop-Circle' -IconOnly -ScriptBlock {
                        Stop-Service -Name $WebEvent.Data.Value -Force | Out-Null
                        Show-PodeWebToast -Message "$($WebEvent.Data.Value) stopped"
                        Sync-PodeWebTable -Id $ParentData.ID
                    }
                    New-PodeWebButton -Name 'Start' -Icon 'Play-Circle' -IconOnly -ScriptBlock {
                        Start-Service -Name $WebEvent.Data.Value -Force | Out-Null
                        Show-PodeWebToast -Message "$($WebEvent.Data.Value) started"
                        Sync-PodeWebTable -Id $ParentData.ID
                    }
                )
            }
        }
    }
)
```

--------------------------------

### Outputting a Chart Element with Pode.Web v1.X

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Getting-Started/Migrating/08-to-10.md

Example of creating and outputting a chart element using `New-PodeWebChart` piped into `Out-PodeWebElement` within a form. Requires a `-Name` or `-Id` for the element.

```powershell
$form = New-PodeWebForm -Name 'Top X Processes' -AsCard -ScriptBlock {
    Get-Process |
        Sort-Object -Property CPU -Descending |
        Select-Object -First $WebEvent.Data.Amount |
        ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU |
        New-PodeWebChart -Name 'Output' -Type Line |
        Out-PodeWebElement
} -Content @(
    New-PodeWebTextbox -Name 'Amount'
)
```

--------------------------------

### Create Modal with Form and Table

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Modal.md

Use `-AsForm` to create a modal that displays a form. This example shows a modal to edit service startup types, populated from a table.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebTable -Name 'Services' -DataColumn Name -ScriptBlock {
        $editBtn = New-PodeWebButton -Name 'Edit' -Icon 'Edit' -IconOnly -ScriptBlock {
            $svc = Get-Service -Name $WebEvent.Data.Value
            Show-PodeWebModal -Name 'Edit Service' -DataValue $WebEvent.Data.Value -Actions @(
                Select-PodeWebSelectOption -Name 'StartType' -OptionName $svc.StartType
            )
        }

        foreach ($svc in (Get-Service)) {
            [ordered]@{ 
                Name = $svc.Name
                Status = "$($svc.Status)"
                StartType = "$($svc.StartType)"
                Actions = @($editBtn)
            }
        }
    }
)

New-PodeWebModal -Name 'Edit Service' -AsForm -Content @(
    New-PodeWebSelect -Name 'StartType' -Options @(
        'Manual', 'Automatic', 'Disabled' | ConvertTo-PodeWebOption
    )
) -ScriptBlock {
    Get-Service -Name $WebEvent.Data.Value | Set-Service -StartType $WebEvent.Data.StartType | Out-Null
    Show-PodeWebToast -Message "$($WebEvent.Data.Value) edited"
    Sync-PodeWebTable -Name 'Services'
    Hide-PodeWebModal
}
```

--------------------------------

### Convert Data for Charts with ConvertTo-PodeWebChartData

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Charts.md

Simplify chart data preparation using `ConvertTo-PodeWebChartData`. Specify `-LabelProperty` for the X-axis and `-DatasetProperty` for Y-axis values. This example displays the top 10 processes by CPU and Handles using a Bar chart.

```powershell
New-PodeWebContainer -Content @(
    New-PodeWebChart -Name 'Top Processes' -Type Bar -AutoRefresh -ScriptBlock {
        Get-Process |
            Sort-Object -Property CPU -Descending |
            Select-Object -First 10 |
            ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU, Handles
    }
)
```

--------------------------------

### Customize Login and Logout Paths

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Pages.md

Configures custom paths for the login and logout routes. Ensure the authentication scheme name matches an existing authentication setup.

```powershell
Set-PodeWebLoginPath -Authentication ExampleAuth -LoginPath '/auth/login' -LogoutPath '/auth/logout'
```

--------------------------------

### Outputting a Textbox Element with Pode.Web v1.X

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Getting-Started/Migrating/08-to-10.md

Example of creating and outputting a textbox element using `New-PodeWebTextbox` piped into `Out-PodeWebElement` within a form. Requires a `-Name` or `-Id` for the element.

```powershell
$form = New-PodeWebForm -Name 'Search Processes' -AsCard -ScriptBlock {
    $processes = Get-Process -Name $WebEvent.Data.Name -ErrorAction Ignore |
        Select-Object Name, ID, WorkingSet, CPU

    $processes |
        New-PodeWebTextbox -Name 'Output' -Multiline -Preformat -AsJson -Size ((6 * $processes.Length) + 2) |
        Out-PodeWebElement
} -Content @(
    New-PodeWebTextbox -Name 'Name'
)
```

--------------------------------

### Setup Async Task for Data Retrieval

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/UpdatingAsync.md

Define a Pode Task that accepts an AsyncEvent object and pagination arguments. Set-PodeWebAsyncEvent is called within the task to establish an async scope for Pode.Web events.

```powershell
Add-PodeTask -Name 'GetProcesses' -ScriptBlock {
    param([hashtable]$AsyncEvent, [int]$PageIndex, [int]$PageSize)
    $AsyncEvent | Set-PodeWebAsyncEvent
}
```

--------------------------------

### Initialize Pode.Web with Custom Theme and Add Custom CSS

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Themes.md

Initialize Pode.Web with a custom theme and then add a custom CSS file via a literal or relative URL.

```powershell
Initialize-PodeWebTemplates -Title 'Example' -Theme Custom

# literal url
Add-PodeWebCustomTheme -Name 'Custom1' -Url 'https://example.com/custom-theme.css'

# relative url - assuming the CSS file is stored in the "/public" folder
Add-PodeWebCustomTheme -Name 'Custom1' -Url '/custom-theme.css'
```

--------------------------------

### Start Paused FileStream

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/FileStream.md

Use Start-PodeWebFileStream to resume a paused FileStream. This is useful for re-enabling streaming after it has been intentionally stopped.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebButton -Name 'Start' -ScriptBlock {
        Start-PodeWebFileStream -Name 'Example'
    }

    New-PodeWebFileStream -Name 'Example' -Url '/logs/error.log'
)
```

--------------------------------

### Initialize Pode.Web Templates with Root Redirect

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Basics.md

Enable a default root ('/') route that redirects users to the first created page by using the -RootRedirect switch. This prevents 404 errors for the root URL.

```powershell
Import-Module -Name Pode.Web

Start-PodeServer {
    Add-PodeEndpoint -Address localhost -Port 8080 -Protocol Http
    Initialize-PodeWebTemplates -Title 'Example' -RootRedirect
}
```

--------------------------------

### Restart FileStream

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/FileStream.md

Use Restart-PodeWebFileStream to stop, clear, and then start a FileStream. This action effectively resets the stream to its initial state.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebButton -Name 'Restart' -ScriptBlock {
        Restart-PodeWebFileStream -Name 'Example'
    }

    New-PodeWebFileStream -Name 'Example' -Url '/logs/error.log'
)
```

--------------------------------

### Create a Basic Video Element

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Video.md

Use New-PodeWebVideo to create a video element. Specify a name, thumbnail URL, and at least one video source using New-PodeWebVideoSource. The thumbnail is displayed before the video plays.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebVideo -Name 'example' -Thumbnail 'https://samplelib.com/lib/preview/mp4/sample-5s.jpg' -Source @(
        New-PodeWebVideoSource -Url 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4'
    )
)
```

--------------------------------

### Pull Pode.Web Docker Image

Source: https://github.com/badgerati/pode.web/blob/develop/README.md

Pull the Pode.Web Docker image from Docker Hub. This is an alternative installation method for containerized environments.

```docker
docker pull badgerati/pode.web
```

--------------------------------

### Configure Root Redirect with Initialize-PodeWebTemplates

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Getting-Started/Migrating/08-to-10.md

Use the -RootRedirect switch on Initialize-PodeWebTemplates to set up a root redirection without adding a 'Home' page to the sidebar.

```powershell
Initialize-PodeWebTemplates -RootRedirect
```

--------------------------------

### Initialize Pode.Web Templates with SSE Connection

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Basics.md

Configure Pode.Web to use Server-Sent Events (SSE) connections instead of the default HTTP. SSE allows for asynchronous updates from server actions.

```powershell
Import-Module -Name Pode.Web

Start-PodeServer {
    Add-PodeEndpoint -Address localhost -Port 8080 -Protocol Http
    Initialize-PodeWebTemplates -Title 'Example' -ConnectionType Sse
}
```

--------------------------------

### Create Basic Audio Element

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Audio.md

Use New-PodeWebAudio to create an audio element. Specify audio sources using New-PodeWebAudioSource. At least one source must be provided.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebAudio -Name 'example' -Source @(
        New-PodeWebAudioSource -Url 'https://samplelib.com/lib/preview/mp3/sample-6s.mp3'
    )
)
```

--------------------------------

### Create a Card with a Title and Content

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Card.md

To add a title to the card, use the `-Name` parameter. This example demonstrates a card with a title and a quote.

```powershell
New-PodeWebCard -Name 'Quote' -Content @(
    New-PodeWebQuote -Value 'Pode is awesome!' -Source 'Badgerati'
)
```

--------------------------------

### Sync Pode Web Tile

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Tiles.md

Use `Sync-PodeWebTile` to force a Tile to refresh its data. This example refreshes the 'Randomness' tile when a button is clicked.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebTile -Name 'Randomness' -ScriptBlock {
        return (Get-Random -Minimum 0 -Maximum 1000)
    }

    New-PodeWebButton -Name 'Refresh Tile' -ScriptBlock {
        Sync-PodeWebTile -Name 'Randomness'
    }
)
```

--------------------------------

### Docker Build and Run Commands

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Hosting/Docker.md

These bash commands demonstrate how to build a Docker image from your Dockerfile and then run it as a container, mapping the host port to the container port.

```bash
docker build -t pode.web/example .
docker run -p 8090:8090 -d pode.web/example
```

--------------------------------

### Close Pode.web Bellow

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Bellow.md

Use `Close-PodeWebBellow` to close a specific Bellow within an Accordion. This example shows closing 'Bellow1' when a button is clicked.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebButton -Name 'Close Bellow 1' -ScriptBlock {
        Close-PodeWebBellow -Name "Bellow1"
    }
)

New-PodeWebAccordion -Name Accordion1 -Bellows @(
    New-PodeWebBellow -Name 'Bellow1' -Content @(
        New-PodeWebText -Value 'Text1'
    )
    New-PodeWebBellow -Name 'Bellow2' -Content @(
        New-PodeWebText -Value 'Text2'
    )
    New-PodeWebBellow -Name 'Bellow3' -Content @(
        New-PodeWebText -Value 'Text3'
    )
)
```

--------------------------------

### Make a Tile Clickable

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Tile.md

Add a `-ClickScriptBlock` to a tile to make it interactive. Clicking the tile will execute the provided scriptblock, for example, to show a toast message.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebTile -Name 'Randomness' -ScriptBlock {
        return (Get-Random -Minimum 0 -Maximum 1000)
    } `
    -ClickScriptBlock {
        Show-PodeWebToast -Message 'A toast message!'
    }
)
```

--------------------------------

### Show a Modal with Actions - Pode.web

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Modal.md

Demonstrates how to create a button that shows a modal when clicked. The modal is defined separately and can contain various Pode.web elements.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebButton -Name 'Show Modal' -ScriptBlock {
        Show-PodeWebModal -Name 'Look a Modal'
    }
)

New-PodeWebModal -Name 'Look a Modal' -Content @(
    New-PodeWebText -Value "Looks, it's a modal!"
) -ScriptBlock {
    Hide-PodeWebModal
}
```

--------------------------------

### Render a Line Element - Pode.Web

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Line.md

Use New-PodeWebLine within a content array to insert a horizontal rule. This example shows it separating text elements.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebText -Value 'This is separated by...'
    New-PodeWebLine
    New-PodeWebText -Value '... a line'
)
```

--------------------------------

### Dockerfile for Default Pode.Web Image

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Hosting/Docker.md

Use this Dockerfile to set up a Pode.Web server using the default Ubuntu Focal image. It copies your local files into the container and exposes the default port.

```dockerfile
# pull down the pode image
FROM badgerati/pode.web:latest

# or use the following for GitHub
# FROM docker.pkg.github.com/badgerati/pode.web/pode.web:latest

# copy over the local files to the container
COPY . /usr/src/app/

# expose the port
EXPOSE 8090

# run the server
CMD [ "pwsh", "-c", "cd /usr/src/app; ./full.ps1" ]
```

--------------------------------

### Add Custom Theme with Base and URL

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Themes.md

Create a custom theme by referencing an external CSS file, using an inbuilt theme as a base for styling.

```powershell
Add-PodeWebCustomTheme -Name 'Custom1' -Base Dark -Url 'https://example.com/custom-theme.css'
```

--------------------------------

### Initialize Pode.Web Templates with HSTS

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Security.md

Enable HTTP Strict Transport Security (HSTS) for your Pode.Web site by including the -UseHSTS switch during initialization.

```powershell
Initialize-PodeWebTemplates -Title 'Test' -Theme Dark -Security Simple -UseHSTS
```

--------------------------------

### Open a Tab

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Tab.md

Use `Open-PodeWebTab` to make a specific tab active within a Tabs element. This example demonstrates opening a random tab when a button is clicked.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebButton -Name 'Change Tab' -ScriptBlock {
        Open-PodeWebTab -Name "Tab$(Get-Random -Minimum 1 -Maximum 4)"
    }
)

New-PodeWebTabs -Name Tabs1 -Tabs @(
    New-PodeWebTab -Name Tab1 -Content @(
        New-PodeWebCard -Content @(
            New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
        )
    )
    New-PodeWebTab -Name Tab2 -Content @(
        New-PodeWebCard -Content @(
            New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
        )
    )
    New-PodeWebTab -Name Tab3 -Content @(
        New-PodeWebCard -Content @(
            New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
        )
    )
)
```

--------------------------------

### Update Pode Web Tile

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Tiles.md

Use `Update-PodeWebTile` to change the value, colour, or icon of a Tile. This example updates the colour of the 'Randomness' tile when a button is clicked.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebTile -Name 'Randomness' -ScriptBlock {
        return (Get-Random -Minimum 0 -Maximum 1000)
    }

    New-PodeWebButton -Name 'Update Tile' -ScriptBlock {
        $rand = Get-Random -Minimum 0 -Maximum 3
        $colour = (@('Green', 'Yellow', 'Cyan'))[$rand]
        Update-PodeWebTile -Name 'Randomness' -Colour $colour
    }
)
```

--------------------------------

### Build Custom Theme with Base and Styles

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Themes.md

Build a custom theme programmatically using Pode.Web functions, inheriting styles from an inbuilt theme.

```powershell
Add-PodeWebCustomTheme -Name 'Custom2' -Base Dark `
    -BackgroundColourConfig (New-PodeWebBackgroundColourConfig -Page 'darkred') `
    -FontFamily 'wingdings'
```

--------------------------------

### Update Raw Element Value

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Raw.md

Use Update-PodeWebRaw to change the value of a Raw element. This example updates a Raw element's HTML content on a timer.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebRaw -Name 'ExampleRaw' -Value '<h1>Initial Value</h1>'

    New-PodeWebTimer -Interval 10 -ScriptBlock {
        $size = Get-Random -Minimum 1 -Maximum 7
        Update-PodeWebRaw -Name 'ExampleRaw' -Value "<h$($size)>Random Size</h$($size)>"
    }
)
```

--------------------------------

### Initialize Pode.Web with Dark Theme

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Themes.md

Use the Dark theme for your Pode.Web application. This sets the overall color scheme and styling.

```powershell
Initialize-PodeWebTemplates -Title 'Example' -Theme Dark
```

--------------------------------

### Static Chart Data with ConvertTo-PodeWebChartData

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Charts.md

Demonstrates rendering a chart with static data obtained from processes, formatted using ConvertTo-PodeWebChartData and displayed as a card.

```powershell
New-PodeWebContainer -Content @(
    Get-Process |
        Sort-Object -Property CPU -Descending |
        Select-Object -First 10 |
        ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU |
        New-PodeWebChart -Name 'TopX' -Type Line -AsCard
)
```

--------------------------------

### Add Pronunciation Text

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Text.md

Utilize the -Pronunciation parameter with New-PodeWebText to add pronunciation guides above displayed text. Note: PowerShell 6+ is recommended for proper rendering.

```powershell
New-PodeWebText -Value '漢' -Pronunciation 'ㄏㄢˋ'
```

--------------------------------

### Create Table with Arguments

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Table.md

Demonstrates passing arguments to a table's scriptblock using -ArgumentList.

```powershell
New-PodeWebTable -Name 'Example' -ArgumentList 'Value1', 2, $false -ScriptBlock {
    param($value1, $value2, $value3)

    # $value1 = 'Value1'
    # $value2 = 2
    # $value3 = $false
}
```

--------------------------------

### Initialize Pode.Web Templates with Security

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Security.md

Specify the security type when initializing Pode.Web templates. Valid options are None, Default, Simple, and Strict.

```powershell
Initialize-PodeWebTemplates -Title 'Test' -Theme Dark -Security Simple
```

--------------------------------

### Create a Line Chart for Windows Performance Counters

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Charts.md

Utilize `New-PodeWebCounterChart` for easily displaying Windows Performance Counters as auto-refreshing, timestamped line charts. This helper automatically sets up the chart for the last 30 minutes.

```powershell
New-PodeWebCounterChart -Counter '\Processor(_Total)\% Processor Time' -AsCard
```

--------------------------------

### Create a Static Pode Web Page with Content

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Pages.md

Define a static page using the -Content parameter, which renders fixed elements on every load. This is useful for forms or displaying unchanging information.

```powershell
Add-PodeWebPage -Name Processes -Icon Activity -Content @(
    New-PodeWebCard -Content @(
        New-PodeWebForm -Name 'Search' -ScriptBlock {
            Get-Process -Name $WebEvent.Data.Name -ErrorAction Ignore |
                Select-Object Name, ID, WorkingSet, CPU |
                New-PodeWebTextbox -Name 'Output' -Multiline -Preformat -ReadOnly |
                Out-PodeWebElement
        } -Content @(
            New-PodeWebTextbox -Name 'Name'
        )
    )
)
```

--------------------------------

### Update Pode Web Text

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Text.md

Use `Update-PodeWebText` to change the text value of an element by its ID. This example demonstrates updating a 'pet_type' text element when a button is clicked.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebText -Value 'I have a pet'
    New-PodeWebText -Value 'dog' -Id 'pet_type'

    New-PodeWebButton -Name 'Change Pet!' -ScriptBlock {
        $rand = Get-Random -Minimum 0 -Maximum 5
        $pet = (@('dog', 'cat', 'fish', 'bear'))[$rand]
        Update-PodeWebText -Id 'pet_type' -Value $pet
    }
)
```

--------------------------------

### Update IFrame URL

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/IFrame.md

Use Update-PodeWebIFrame to change the URL of an existing iframe. This example demonstrates setting up buttons to toggle between different pages displayed within an iframe.

```powershell
# set toggle buttons for different pages
$con1 = New-PodeWebContainer -Content @(
    1..3 |  ForEach-Object {
        New-PodeWebButton -Name "Page$($_)" -ScriptBlock {
            Update-PodeWebIFrame -Name 'IFrame' -Url "/pages/$($ElementData.Name)"
        }
    }
)

# create iframe
$con2 = New-PodeWebContainer -Content @(
    New-PodeWebIFrame -Name 'IFrame' -Url '/pages/Page1'
)

# add page with buttons/iframe
Add-PodeWebPage -Name 'Example' -Content $con1, $con2

# add 3 hidden pages for the iframe to toggle between
1..3 |  ForEach-Object {
    Add-PodeWebPage -Name "Page$_" -Hide -Content @(
        New-PodeWebContainer -Content @(
            New-PodeWebText -Value "Page$_!"
        )
    )
}
```

--------------------------------

### Initialize Pode.Web Templates with Title and Theme

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Basics.md

Initialize Pode.Web templates within your Start-PodeServer scriptblock. This function must be called early and allows setting the website's title and default theme.

```powershell
Import-Module -Name Pode.Web

Start-PodeServer {
    Add-PodeEndpoint -Address localhost -Port 8080 -Protocol Http
    Initialize-PodeWebTemplates -Title 'Example' -Theme Dark
}
```

--------------------------------

### Create a Simple Tile with a Value

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Tile.md

Use `New-PodeWebTile` with a `-ScriptBlock` to display a dynamic value. The scriptblock is re-called when the refresh icon is clicked.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebTile -Name 'Randomness' -ScriptBlock {
        return (Get-Random -Minimum 0 -Maximum 1000)
    }
)
```

--------------------------------

### Update Image Element

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Image.md

Use Update-PodeWebImage to modify the source, title, or size of an Image element. The example demonstrates updating an image's title and height dynamically.

```powershell
New-PodeWebContainer -Content @(
    New-PodeWebImage -Id 'my-image' -Source 'https://raw.githubusercontent.com/Badgerati/Pode.Web/develop/src/Templates/Public/images/icon.png' -Height 70

    New-PodeWebButton -Name 'Update Image' -ScriptBlock {
        $value = Get-Random -Minimum 70 -Maximum 141
        Update-PodeWebImage -Id 'my-image' -Title "Example$($value)" -Height $value
    }
)
```

--------------------------------

### Create a Pode Web Timer - Pode

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Timer.md

Use New-PodeWebTimer to create a timer that periodically invokes logic on the server. The -Interval parameter sets the frequency in seconds, with a default of 60s. Be cautious with very low intervals as they may affect performance.

```powershell
New-PodeWebTimer -Interval 10 -ScriptBlock {
    $rand = Get-Random -Minimum 0 -Maximum 3
    $colour = (@('Green', 'Yellow', 'Cyan'))[$rand]
    Update-PodeWebBadge -Id 'bdg_example' -Value ([datetime]::Now.ToString('yyyy-MM-dd HH:mm:ss')) -Colour $colour
}

New-PodeWebCard -Content @(
    New-PodeWebBadge -Id 'bdg_example' -Value ([datetime]::Now.ToString('yyyy-MM-dd HH:mm:ss')) -Colour Cyan
)
```

--------------------------------

### Open Pode.web Bellow

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Bellow.md

Use `Open-PodeWebBellow` to make a specific Bellow the active one within an Accordion. This example demonstrates opening a random Bellow when a button is clicked.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebButton -Name 'Change Bellow' -ScriptBlock {
        Open-PodeWebBellow -Name "Bellow$(Get-Random -Minimum 1 -Maximum 4)"
    }
)

New-PodeWebAccordion -Name Accordion1 -Bellows @(
    New-PodeWebBellow -Name 'Bellow1' -Content @(
        New-PodeWebText -Value 'Text1'
    )
    New-PodeWebBellow -Name 'Bellow2' -Content @(
        New-PodeWebText -Value 'Text2'
    )
    New-PodeWebBellow -Name 'Bellow3' -Content @(
        New-PodeWebText -Value 'Text3'
    )
)
```

--------------------------------

### Display Elements within a Tile

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Tile.md

Embed other Pode Web elements, such as charts, within a tile using the `-Content` parameter. This example shows a CPU usage chart that auto-refreshes.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebTile -Name 'CPU' -Icon 'chart-box' -Content @(
        New-PodeWebCounterChart -Counter '\\Processor(_Total)\\% Processor Time' -MaxItems 10
    )
)
```

--------------------------------

### Create Table with Static Data

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Table.md

Renders a table as a card, populated with the top 10 processes by CPU usage.

```powershell
New-PodeWebContainer -Content @(
    Get-Process |
        Sort-Object -Property CPU -Descending |
        Select-Object -First 10 -Property Name, ID, WorkingSet, CPU |
        New-PodeWebTable -Name 'TopX' -AsCard
)
```

--------------------------------

### Create Table with Raw Data

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Table.md

Renders a table displaying services on a computer, showing Name, Status, and StartType.

```powershell
New-PodeWebContainer -Content @(
    New-PodeWebTable -Name 'Services' -ScriptBlock {
        foreach ($svc in (Get-Service)) {
            [ordered]@{ 
                Name      = $svc.Name
                Status    = "$($svc.Status)"
                StartType = "$($svc.StartType)"
            }
        }
    }
)
```

--------------------------------

### Create Datalist with Predefined Options

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Datalist.md

Use the -Options parameter with New-PodeWebOption to define a static list of choices for the Datalist. The -Selected parameter can mark an option as the default.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebForm -Name 'Example' -ScriptBlock {
        $value = $WebEvent.Data['DatalistExample']
    } -Content @(
        New-PodeWebDatalist -Name 'DatalistExample' -Options @(
            New-PodeWebOption -Name 'Text'
            New-PodeWebOption -Name 'Xml'
            New-PodeWebOption -Name 'Json' -Selected
            New-PodeWebOption -Name 'Csv'
        )
    )
)
```

--------------------------------

### Add JavaScript Event Listener for a Class

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/ClassAndStyles.md

Example JavaScript using jQuery to add an event listener to elements with a specific class. This script would be imported into the Pode.Web application.

```javascript
 $('.my-custom-textbox').off('keyup').on('keyup', (e) => {
    console.log($(e.target).val());
})
```

--------------------------------

### Create a 3x3 Grid using -Width

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Grid.md

Simplify grid creation by using the `-Width` parameter to define the number of columns. All cells are supplied to a single grid.

```powershell
New-PodeWebGrid -Width 3 -Cells @(
    New-PodeWebCell -Content @(
        New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
    )
    New-PodeWebCell -Content @(
        New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
    )
    New-PodeWebCell -Content @(
        New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
    )
    New-PodeWebCell -Content @(
        New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
    )
    New-PodeWebCell -Content @(
        New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
    )
    New-PodeWebCell -Content @(
        New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
    )
    New-PodeWebCell -Content @(
        New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
    )
    New-PodeWebCell -Content @(
        New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
    )
    New-PodeWebCell -Content @(
        New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
    )
)
```

--------------------------------

### Define Custom CSS for a Class

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/ClassAndStyles.md

Example CSS to style elements with a specific class. This CSS would typically be placed in a separate .css file and imported into the Pode.Web application.

```css
.my-custom-textbox {
    color: purple
}
```

--------------------------------

### Build Auto-Refreshing Process Chart with Pode.Web

Source: https://github.com/badgerati/pode.web/blob/develop/README.md

Use this snippet to create a web page that displays a bar chart of the top 10 CPU-intensive processes, with the chart automatically refreshing every minute. Ensure Pode.Web module is imported and endpoints/templates are initialized.

```powershell
Import-Module Pode.Web

Start-PodeServer {
    # add a simple endpoint
    Add-PodeEndpoint -Address localhost -Port 8090 -Protocol Http

    # set the use of the pode.web templates
    Initialize-PodeWebTemplates -Title 'Example' -Theme Midnight

    # add the page
    Add-PodeWebPage -Name Processes -Icon Activity -ScriptBlock {
        New-PodeWebChart -Name 'Top Processes' -Type Bar -AutoRefresh -AsCard -ScriptBlock {
            Get-Process |
                Sort-Object -Property CPU -Descending |
                Select-Object -First 10 |
                ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU
        }
    }
}
```

--------------------------------

### Reset Pode.web Progress Bar

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/ProgressBar.md

Use `Reset-PodeWebProgress` to reset a progress bar's value to 0. This example shows a button that resets a progress bar named 'Download'.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebProgress -Name 'Download' -Value 25 -Colour Green -Striped -Animated

    New-PodeWebButton -Name 'Reset Progress' -ScriptBlock {
        Reset-PodeWebProgress -Name 'Download'
    }
)
```

--------------------------------

### Initialize Nested Pode Web Page Groups

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Pages.md

Create a parent group and then initialize a child group with the parent specified. This allows for hierarchical organization of pages.

```powershell
# initialise a Tools group
New-PodeWebPageGroup -Name Tools

# initialise a Windows group, with Tools as its parent
New-PodeWebPageGroup -Name Windows -Parent Tools
```

--------------------------------

### Clear Chart Data with Clear-PodeWebChart

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Actions/Charts.md

Remove all data points from a chart using `Clear-PodeWebChart`. This action resets the chart to an empty state. This example clears the data from the 'Processes' chart.

```powershell
New-PodeWebContainer -NoBackground -Content @(
    New-PodeWebButton -Name 'Clear Processes' -ScriptBlock {
        Clear-PodeWebChart -Name 'Processes'
    }

    New-PodeWebChart -Name 'Processes' -Type Line -NoRefresh -ScriptBlock {
        Get-Process |
            Sort-Object -Property CPU -Descending |
            Select-Object -First 15 |
            ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU
    }
)
```

--------------------------------

### Use Material Design Icons in Pode.Web Buttons

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Getting-Started/Migrating/04-to-05.md

When using the -Icon parameter on New-PodeWebButton, supply the icon name without the 'mdi-' prefix. For example, use 'github' for the 'mdi-github' icon.

```powershell
New-PodeWebButton -Name 'Repository' -Icon 'github' -Url 'https://github.com/Badgerati/Pode.Web'
```

--------------------------------

### Migrate Set-PodeWebHomePage to Add-PodeWebPage

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Getting-Started/Migrating/08-to-10.md

Replace Set-PodeWebHomePage with Add-PodeWebPage, ensuring to include -Name 'Home', -Path '/', and -HomePage.

```powershell
Set-PodeWebHomePage -Content $section -Title 'Awesome Homepage'
```

```powershell
Add-PodeWebPage -Name 'Home' -Path '/' -Content $section -Title 'Awesome Homepage' -HomePage
```

```powershell
Set-PodeWebHomePage with Add-PodeWebPage -Name 'Home' -Path '/' -HomePage
```

--------------------------------

### Create a MinMax Element

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/MinMax.md

Use New-PodeWebMinMax to add a pair of number input fields for minimum and maximum values. Set initial values with -MinValue and -MaxValue. This example is within a form and card.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebForm -Name 'Example' -ScriptBlock {
        $min = $WebEvent.Data['CpuRange_Min']
        $max = $WebEvent.Data['CpuRange_Max']
    } -Content @(
        New-PodeWebMinMax -Name 'CpuRange' -MinValue 20 -MaxValue 90
    )
)
```

--------------------------------

### Create a Pode.Web Form with Various Input Elements

Source: https://github.com/badgerati/pode.web/blob/develop/docs/Tutorials/Elements/Form.md

Use New-PodeWebForm to create a form that includes a variety of input elements such as textboxes, date/time pickers, credentials, checkboxes, radios, selects, and ranges. The form automatically wraps content in a `<form>` tag and adds a submit button. Ensure unique names/IDs if multiple forms are present.

```powershell
New-PodeWebCard -Content @(
    New-PodeWebForm -Name 'Example' -ScriptBlock {
        $WebEvent.Data | Out-Default
    } -Content @(
        New-PodeWebTextbox -Name 'Name' -AutoComplete {
            return @('billy', 'bobby', 'alice', 'john', 'sarah', 'matt', 'zack', 'henry')
        }
        New-PodeWebTextbox -Name 'Password' -Type Password -PrependIcon Lock
        New-PodeWebTextbox -Name 'Date' -Type Date
        New-PodeWebTextbox -Name 'Time' -Type Time
        New-PodeWebDateTime -Name 'DateTime'
        New-PodeWebCredential -Name 'Credentials'
        New-PodeWebCheckbox -Name 'Checkboxes' -Options @(
            'Terms', 'Privacy' | ConvertTo-PodeWebOption
        ) -AsSwitch
        New-PodeWebRadio -Name 'Radios' -Options @(
            'S', 'M', 'L' | ConvertTo-PodeWebOption
        )
        New-PodeWebSelect -Name 'Role' -Multiple -Options @(
            'User', 'Admin', 'Operations' | ConvertTo-PodeWebOption
        )
        New-PodeWebRange -Name 'Cores' -Value 30 -ShowValue
    )
)
```