@page
@using BantFlags.Data
@model BantFlags.UploadModel
@{
    ViewData["Title"] = "Upload";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>Upload</h1>
<img src="~/montage.png" />
<h2 id="message">@Model.Message</h2>
<h2>Add a Flag</h2>
<form method="post" asp-page-handler="Add" enctype="multipart/form-data">
    <input type="file" name="upload" />
    <input type="checkbox" name="gloss" value="true" /><span>Apply Gloss?</span>
    <br />
    <br />
    <input type="submit" value="Upload Flag" />
</form>

<h2>Manage Existing Flags</h2>
<form method="post">
    <select name="flag">
        @foreach (string s in Model.StagedFlags.Names)
        {
            <option>@s</option>
        }
    </select>
    <input type="text" name="newName" />
    <br />
    <br />
    <button asp-page-handler="Delete" type="submit">Delete Flag</button>
    <button asp-page-handler="Rename" type="submit">Rename Flag</button>
</form>

<h2>Commit Changes</h2>
<form method="post" asp-page-handler="Commit" enctype="multipart/form-data">
    <label>Password:</label>
    <input type="text" name="password" />
    <br />
    <br />
    <input type="submit" value="Commit Changes" />
</form>

@if (Model.StagedFlags.Flags.Any())
{
    <h2>Pending Changes</h2>
    <form method="post" asp-page-handler="Unstage">
        <input type="text" name="password" />
        <br />
        <br />
        <button type="submit">Remove from staging</button>
        <h3>Deleted Flags</h3>
        @* TODO: There has to be a better way to handle this*@
        @for (int i = 0; i < Model.StagedFlags.Flags.Count(); i++)
        {
            if (Model.StagedFlags.Flags[i].FlagMethod == Method.Delete)
            {
                <div class="flag">

                    <label>@(Model.StagedFlags.Flags[i].Name)</label>
                    <img src="~/flags/@(Model.StagedFlags.Flags[i].Name).png" />
                    <input type="hidden" name="flags[@i].Name" value="@Model.StagedFlags.Flags[i].Name" />
                    <input type="hidden" name="flags[@i].FormMethod" value="@Model.StagedFlags.Flags[i].FlagMethod" />
                    <input type="checkbox" name="flags[@i].IsChecked" value="true" />
                </div>
            }

        }

        <h3>Renamed Flags</h3>
        @for (int i = 0; i < Model.StagedFlags.Flags.Count(); i++)
        {
            if (Model.StagedFlags.Flags[i].FlagMethod == Method.Rename)
            {
                <div class="flag">
                    <label>@(Model.StagedFlags.Flags[i].Name)</label>
                    <img src="~/flags/@(Model.StagedFlags.Flags[i].OldName).png" />
                    <input type="hidden" name="flags[@i].Name" value="@Model.StagedFlags.Flags[i].Name" />
                    <input type="hidden" name="flags[@i].FormMethod" value="@Model.StagedFlags.Flags[i].FlagMethod" />
                    <input type="checkbox" name="flags[@i].IsChecked" value="true" />
                </div>
            }

        }

        <h3>Added Flags</h3>
        @for (int i = 0; i < Model.StagedFlags.Flags.Count(); i++)
        {
            if (Model.StagedFlags.Flags[i].FlagMethod == Method.Add)
            {
                <div class="flag">
                    <label>@(Model.StagedFlags.Flags[i].Name)</label>
                    <img src="~/flags/staging/@(Model.StagedFlags.Flags[i].Name).png" />
                    <input type="hidden" name="flags[@i].Name" value="@Model.StagedFlags.Flags[i].Name" />
                    <input type="hidden" name="flags[@i].FormMethod" value="@Model.StagedFlags.Flags[i].FlagMethod" />
                    <input type="checkbox" name="flags[@i].IsChecked" value="true" />
                </div>
            }

        }
    </form>
}

@section Head {
    <link rel="stylesheet" href="~/upload.css" />
}

@section Scripts {
    @* Place flag image inside the <select> because ASP removes "invalid HTML" *@
    <script>
        window.addEventListener('load', function (e) {
            let x = document.getElementsByTagName('select')[0].children
            Array.prototype.slice.call(x).forEach(function (y) {
                var name = y.innerHTML;
                y.innerHTML = "<img src=\"flags/" + name + ".png\">" + name
            });
        }, { once: true });
    </script>
}