@inherits AuthComponentBase
@attribute [Authorize]

<div class="outer-grid mt-3 auto-height">
    <EditForm Model="_selectedScript" OnValidSubmit="OnValidSubmit" class="h-100 pb-3">
        <div class="h-100 left-outer-grid">
            <div>
                <div class="row">
                    <DataAnnotationsValidator />

                    <div class="col-12">
                        <ValidationSummary />
                    </div>

                    <div class="col-12">
                        <AlertBanner Message="@_alertMessage" OnClose="() => _alertMessage = string.Empty" />
                    </div>

                    <div class="mt-2 col-md-6 col-lg-4">
                        <label>Shell</label>
                        <InputSelect class="form-control" DisplayName="Shell" @bind-Value="_selectedScript.Shell">
                            @foreach (var shell in Enum.GetValues<ScriptingShell>())
                            {
                                <option @key="@shell" value="@shell">@shell</option>
                            }
                        </InputSelect>
                        <ValidationMessage For="() => _selectedScript.Shell" />
                    </div>

                    <div class="mt-2 col-md-6 col-lg-4">
                        <label>Script Name</label>
                        <InputText class="form-control" DisplayName="Script Name" @bind-Value="_selectedScript.Name" placeholder="Script name" />
                        <ValidationMessage For="() => _selectedScript.Name" />
                    </div>

                    <div class="mt-2 col-md-6 col-lg-4">
                        <label>Folder Path</label>
                        <InputText class="form-control" DisplayName="Folder Path" @bind-Value="_selectedScript.FolderPath" placeholder="Example: or/portland/quick burger #5" />
                        <ValidationMessage For="() => _selectedScript.FolderPath" />
                    </div>


                    <div class="mt-2 col-md-6 col-lg-4">
                        <label>Public?</label>
                        <br />
                        <InputCheckbox DisplayName="Public?" @bind-Value="_selectedScript.IsPublic" />
                        <ValidationMessage For="() => _selectedScript.IsPublic" />
                    </div>
                    <div class="mt-2 col-md-6 col-lg-4">
                        <label>Quick Script?</label>
                        <br />
                        <InputCheckbox DisplayName="Quick Script?" @bind-Value="_selectedScript.IsQuickScript" />
                        <ValidationMessage For="() => _selectedScript.IsQuickScript" />
                    </div>
                    <div class="mt-2 col-md-6 col-lg-4">
                        <label>Creator</label>
                        <br />
                        <input class="form-control" readonly value="@_selectedScript.Creator?.UserName" />
                    </div>
                    <div class="mt-2 col-12">
                        <button class="btn btn-primary"
                                type="submit"
                                disabled="@(!CanModifyScript)">
                            Save
                        </button>

                        <button class="btn btn-success ms-3" type="button" @onclick="CreateNew">
                            New
                        </button>
                        <button class="btn btn-danger ms-3" type="button"
                                disabled="@(!CanDeleteScript)"
                                @onclick="DeleteSelectedScript">
                            Delete
                        </button>
                    </div>
                    <div class="mt-2 col-12">
                        <button type="button" class="btn btn-link me-3" @onclick="ToggleAlertOptionsShown">
                            Alert Options
                        </button>
                        <button type="button" class="btn btn-link" @onclick="ToggleEnvironmentVarsShown">
                            Environment Variables
                        </button>
                    </div>
                    <div class="my-2 col-12 collapse @_alertOptionsShowClass">
                        <h5>
                            <span class="me-2">On Error</span>
                            <button class="btn btn-sm btn-secondary" type="button" @onclick="ShowAlertErrorHelp">
                                <span class="oi oi-question-mark" />
                            </button>
                        </h5>
                        <div class="row">
                            <div class="mt-2 col-md-6">
                                <label>Send Email</label>
                                <br />
                                <InputCheckbox DisplayName="Send Email on Error" @bind-Value="_selectedScript.SendEmailOnError" />
                                <ValidationMessage For="() => _selectedScript.SendEmailOnError" />
                                <br />
                                to
                                <br />
                                <InputText type="email"
                                           class="form-control"
                                           disabled="@(!_selectedScript.SendEmailOnError)"
                                           DisplayName="Send Error Email To"
                                           @bind-Value="_selectedScript.SendErrorEmailTo" />
                                <ValidationMessage For="() => _selectedScript.SendErrorEmailTo" />
                            </div>
                            <div class="mt-2 col-md-6">
                                <label>Generate Alert</label>
                                <br />
                                <InputCheckbox DisplayName="Alert on Error" @bind-Value="_selectedScript.GenerateAlertOnError" />
                                <ValidationMessage For="() => _selectedScript.GenerateAlertOnError" />
                            </div>
                        </div>
                    </div>
                    <div class="my-2 col-12 collapse @_environmentVarsShowClass">
                        <h5>Environment Variables</h5>
                        <div class="row">
                            <div class="mt-2 col-md-6">
                                <div>Device ID</div>
                                <div class="small text-muted mt-1">The device ID (GUID) of the computer currently running the script.</div>
                                <input type="text" readonly class="form-control" value="DeviceId" />
                            </div>
                            <div class="mt-2 col-md-6">
                                <div>Server URL</div>
                                <div class="small text-muted mt-1">The URL of the server that the device connects to (e.g. https://app.example.com).</div>
                                <input type="text" readonly class="form-control" value="ServerUrl" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="h100">
                <InputTextArea @bind-Value="_selectedScript.Content" 
                               DisplayName="Script Input" 
                               class="h-100 w-100"
                               spellcheck="false"
                               autocomplete="off"
                               placeholder="Enter script text here" />
                <ValidationMessage For="() => _selectedScript.Content" />
            </div>
        </div>
    </EditForm>
    <div class="tree-view-wrapper-grid h-100 pb-3">
        <div>
            <h5>Saved Scripts</h5>
            <div>
                <input type="checkbox" @bind="ParentPage.ShowOnlyMyScripts" />
                <span class="align-top">Show only mine</span>
            </div>
        </div>
        <TreeView DataSource="ParentPage.TreeNodes"
                  ItemTypeSelector="x => x.ItemType"
                  ItemHeaderSelector="x => x.Name"
                  ItemSelected="ScriptSelected"
                  ChildItemSelector="x => x.ChildItems"
                  ItemIconCssSelector="ParentPage.GetItemIconCss"
                  KeySelector="x => x.Id"
                  WrapperStyle="border: 1px solid gray; padding: .5em; height: 100%; border-radius: 5px;"
                  T="ScriptTreeNode" />
    </div>
</div>