@layout TelerikLayout
@inherits LayoutComponentBase
@using Telerik.FontIcons;

<PageTitle>HR Taxonomy Change Management</PageTitle>

<div class="container">
    <div class="border">
        <div class="title">
            Taxonomy Change Management
        </div>
        <div class="login">
            <LoginDisplay />
        </div>
        <div style="height: 80px;">
            <TelerikMenu IconField="@(nameof(MenuItem.Icon))" Data="MenuItems" Orientation=@MenuOrientation.Horizontal></TelerikMenu>
        </div>
    </div>
    <div>
        <article class="content px-4">
            @Body
        </article>
    </div>
</div>

@code{
    public List<MenuItem> MenuItems { get; set; } = new List<MenuItem>();

    public class MenuItem
    {
        public string Text { get; set; }
        public bool Disabled { get; set; }
        public object Icon { get; set; }
        public IEnumerable<MenuItem> Items { get; set; }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
        {
            new MenuItem()
            {
                Text="None",
                Icon="@FontIcon.Menu",
                Items = new List<MenuItem>()
                {
                    new MenuItem {Text = "Home" },
                    new MenuItem {Text = "New Request"},
                    new MenuItem {Text = "Admin"}
                }
            }
        };

        base.OnInitialized();
    }
}

<style>
    #demo-runner {
    height: 400px;
    }
</style>

                       <TelerikDropDownList Data="@infosEtapeMaitriseCategories"                        
                                         @bind-Value="@CurrentlyEditingEtapeMaitrise.tlkpEtapeMaitriseCategorieId"
                                     TextField="TextField" ValueField="ValueField"
                                     Enabled="@tlkpEtapeMaitriseCategorieIdEnabled"                                             
                                     Width="100%">

<TelerikListView Data="@SubnetList" Width="700px" Pageable="true"

                 OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler"
                 OnEdit="@EditHandler" OnCancel="@CancelHandler">
    <HeaderTemplate>
        <h2>Subnet List</h2>
        <ListViewCommandButton Command="Add" Icon="@FontIcon.Plus">Add Subnet</ListViewCommandButton>
    </HeaderTemplate>
    <Template>
        <div class="listview-item">
            <h4>@context.Cidr</h4>
            <ListViewCommandButton Command="Edit" Icon="@FontIcon.Pencil">Edit</ListViewCommandButton>
            <ListViewCommandButton Command="Delete" Icon="@FontIcon.Trash">Delete</ListViewCommandButton>
        </div>
    </Template>
    <EditTemplate>
        <div style="border: 1px solid green; margin: 10px; padding: 10px; display: inline-block;">
            <TelerikFloatingLabel Text="CIDR">
                <TelerikTextBox Id="Cidr" ValueChanged="@CidrValueChangedHandler" />
            </TelerikFloatingLabel><br />
            <ListViewCommandButton Command="Save" Icon="@FontIcon.Save">Save</ListViewCommandButton>
            <ListViewCommandButton Command="Cancel" Icon="@FontIcon.Cancel">Cancel</ListViewCommandButton>
        </div>
    </EditTemplate>
</TelerikListView>
@code {
    private List<Models.Subnet> SubnetList = new List<Models.Subnet>();

    protected override async Task OnInitializedAsync() 
        => SubnetList = await SubnetService.GetAllAsync();

    private void CidrValueChangedHandler(string theUserInput)
    {
        // manually update the model here 

        // calculate subnet properties here to help the user select size the subnet
        // correctly by selecting the number of bits in the network side of the mask
        //    # number of hosts, etc.
    }

    async Task GetListViewData()
        => SubnetList = await SubnetService.GetAllAsync();
}