@using Microsoft.AspNetCore.Blazor
<h2>Textbox</h2>
<p>
    Initially blank:
    <input id="textbox-initially-blank" bind="textboxInitiallyBlankValue" />
    <span id="textbox-initially-blank-value">@textboxInitiallyBlankValue</span>
</p>
<p>
    Initially populated:
    <input id="textbox-initially-populated" bind="textboxInitiallyPopulatedValue" />
    <span id="textbox-initially-populated-value">@textboxInitiallyPopulatedValue</span>
</p>

<h2>Text Area</h2>
<p>
    Initially blank:
    <textarea id="textarea-initially-blank" bind="textAreaIntiallyBlankValue"></textarea>
    <span id="textarea-initially-blank-value">@textAreaIntiallyBlankValue</span>
</p>
<p>
    Initially populated:
    <textarea id="textarea-initially-populated" bind="textAreaIntiallyPopulatedValue"></textarea>
    <span id="textarea-initially-populated-value">@textAreaIntiallyPopulatedValue</span>
</p>

<h2>Checkbox</h2>
<p>
    Initially unchecked:
    <input id="checkbox-initially-unchecked" bind="checkboxInitiallyUncheckedValue" type="checkbox" />
    <span id="checkbox-initially-unchecked-value">@checkboxInitiallyUncheckedValue</span>
</p>
<p>
    Initially checked:
    <input id="checkbox-initially-checked" bind="checkboxInitiallyCheckedValue" type="checkbox" />
    <span id="checkbox-initially-checked-value">@checkboxInitiallyCheckedValue</span>
</p>

<h2>Select</h2>
<p>
    <select id="select-box" bind="@selectValue">
        <option value=@SelectableValue.First>First choice</option>
        <option value=@SelectableValue.Second>Second choice</option>
        <option value=@SelectableValue.Third>Third choice</option>
        @if (includeFourthOption)
        {
            <option value=@SelectableValue.Fourth>Fourth choice</option>    
        }
    </select>
    <span id="select-box-value">@selectValue</span>
    <button id="select-box-add-option" onclick="@AddAndSelectNewSelectOption">Add and select new item</button>
</p>

@functions {
    string textboxInitiallyBlankValue = null;
    string textboxInitiallyPopulatedValue = "Hello";

    string textAreaIntiallyBlankValue = null;
    string textAreaIntiallyPopulatedValue = "Hello";

    bool checkboxInitiallyUncheckedValue = false;
    bool checkboxInitiallyCheckedValue = true;

    bool includeFourthOption = false;
    enum SelectableValue { First, Second, Third, Fourth }
    SelectableValue selectValue = SelectableValue.Second;

    void AddAndSelectNewSelectOption(UIMouseEventArgs e)
    {
        includeFourthOption = true;
        selectValue = SelectableValue.Fourth;
    }
}