@inherits AuthComponentBase
@attribute [Authorize]


<h4 class="mt-3">Add or Edit Schedule</h4>

<EditForm Model="_selectedSchedule" OnValidSubmit="OnValidSubmit">
    <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-12">
            <div>
                <button type="submit" class="btn btn-primary align-middle me-3" disabled="@(!CanModifySchedule)">
                    Save
                </button>

                <button type="button" class="btn btn-success me-3" @onclick="CreateNew">
                    New
                </button>
                <button class="btn btn-danger me-4" type="button"
                        disabled="@(!CanDeleteSchedule)"
                        @onclick="DeleteSelectedSchedule">
                    Delete
                </button>

                <InputCheckbox class="me-2 align-middle" @bind-Value="_selectedSchedule.RunOnNextConnect" />
                <span class="align-middle">If devices are offline, run immediately when next connected</span>
            </div>
        </div>

        <div class="mt-2 col-md-6 col-lg-4">
            <div>
                <label>Schedule Name</label>
                <InputText class="form-control" @bind-Value="_selectedSchedule.Name" />
            </div>
        </div>

        <div class="mt-2 col-md-6 col-lg-4">
            <div>
                <label>Start At</label>
                <input type="datetime-local" step="1" class="form-control" @bind="_selectedSchedule.StartAt" />
            </div>
        </div>


        <div class="mt-2 col-md-6 col-lg-4">
            <div>
                <label>Repeat Interval</label>
                <InputSelect @bind-Value="_selectedSchedule.Interval" class="form-control">
                    @foreach (var interval in Enum.GetValues<RepeatInterval>())
                    {
                        <option @key="@interval" value="@interval">@interval</option>
                    }
                </InputSelect>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="mt-2 col-md-6 col-lg-4">
            <label>Saved Scripts</label>
            <div class="small">
                <input type="checkbox" @bind="ParentPage.ShowOnlyMyScripts" />
                <span class="align-top">Show only mine</span>
            </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: 300px; border-radius: 5px;"
                      T="ScriptTreeNode" />
        </div>

        <div class="mt-2 col-md-6 col-lg-4">
            <label>Device Groups</label>
            <div class="item-list-border">
                @foreach (var deviceGroup in _deviceGroups)
                {
                    <div @key="@deviceGroup.ID">
                        <input class="me-1" type="checkbox"
                               checked="@(_selectedDeviceGroups.Contains(deviceGroup.ID))"
                               @onchange="ev => DeviceGroupSelectedChanged(ev, deviceGroup)" />

                        <span class="align-top">@deviceGroup.Name</span>
                    </div>
                }
            </div>
        </div>

        <div class="mt-2 col-md-6 col-lg-4">
            <label>Devices</label>
            <div class="item-list-border">
                @foreach (var device in _devices)
                {
                    <div @key="@device.ID">
                        <input class="me-1" type="checkbox"
                               checked="@(_selectedDevices.Contains(device.ID))"
                               @onchange="ev => DeviceSelectedChanged(ev, device)" />

                        <span class="align-top">@device.DeviceName</span>
                    </div>
                }
            </div>
        </div>
    </div>

</EditForm>
   

<h4 class="mt-5">Saved Schedules</h4>
<table class="table table-dark table-striped table-hover">
    <thead>
        <tr>
            <th>Script Name</th>
            <th>Repeat Interval</th>
            <th>Next Run</th>
            <th>Last Run</th>
            <th>Created At</th>
            <th>Created By</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var schedule in _schedules)
        {
            <tr @key="schedule.Id" style="cursor: pointer" @onclick="async () => await SelectTableRow(schedule)" class="@GetTableRowClass(schedule)">
                <td>@schedule.Name</td>
                <td>@schedule.Interval</td>
                <td>@schedule.NextRun</td>
                <td>@schedule.LastRun</td>
                <td>@schedule.CreatedAt</td>
                <td>@schedule.Creator?.UserName</td>
            </tr>
        }
    </tbody>
</table>