@using Website.Components.MarkdownEditor

<div class="mb-3 d-flex align-items-center">
    <h5>All Tabs</h5>
    <div class="ms-auto">
        <button class="btn btn-primary" @onclick="CreateTab">
            Add New Tab
        </button>
    </div>
</div>
<div class="mb-3">    
    <ul class="list-group">
        @foreach (var tab in Product.Tabs)
        {
            <li class="list-group-item list-group-item-action @(Tab == tab ? "active" : "")" 
                @onclick="() => EditTab(tab)" style="cursor: pointer;">
                @tab.Title
            </li>
        }
    </ul>
</div>


@if (Tab != null)
{
    <div class="mb-3 border border-1 border-secondary rounded-3 shadow-sm p-3">
        <EditForm Model="Tab" OnValidSubmit="SubmitAsync">

            <div class="mb-3">
                <label class="form-label">Title</label>
                <InputText class="form-control" @bind-Value="Tab.Title" />
                <div class="form-text">Up to 30 characters</div>
            </div>

            <div class="mb-3">
                <label class="form-label">Content</label>
                <MarkdownEditor @bind-Value="Tab.Content" EnableToolbar="false" DisableHtml="false" />
            </div>

            <div class="mb-3 form-check">
                <InputCheckbox @bind-Value="Tab.IsEnabled" class="form-check-input" id="tabIsEnabledCheck" />
                <label class="form-check-label" for="tabIsEnabledCheck">Is Enabled</label>
            </div>

            <DataAnnotationsValidator />
            <ValidationSummary />            

            <div class="mb-3">
                <div class="float-right">

                    @if (Tab.Id != default)
                    {
                        @if (isLoading2)
                        {
                            <LoadingButton />
                        }
                        else
                        {
                            <button type="button" class="btn btn-danger me-2" @onclick="DeleteAsync">Delete</button>
                        }
                    }

                    @if (isLoading)
                    {
                        <LoadingButton />
                    }
                    else
                    {
                        @if (Tab.Id == default)
                        {
                            <button type="submit" class="btn btn-primary">Add</button>
                        }
                        else
                        {
                            <button type="submit" class="btn btn-primary">Update</button>
                        }
                    }

                </div>
            </div>
        </EditForm>
    </div>    
}




