@model PlotLineEditViewModel
@{
    ViewData["Title"] = Model.PlotLineID == 0 ? "New Plot Line" : "Edit Plot Line";
}

<div class="page-heading compact">
    <div>
        <p class="eyebrow">@Model.Project?.ProjectName</p>
        <h1>@ViewData["Title"]</h1>
    </div>
    <a class="btn btn-outline-secondary" asp-action="Index" asp-route-projectId="@Model.ProjectID">Back to plot lines</a>
</div>

<form asp-action="Save" method="post" class="edit-panel">
    <input asp-for="PlotLineID" type="hidden" />
    <input asp-for="ProjectID" type="hidden" />
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="row g-3">
        <div class="col-md-8">
            <label asp-for="PlotLineName" class="form-label"></label>
            <input asp-for="PlotLineName" class="form-control" />
            <span asp-validation-for="PlotLineName" class="text-danger"></span>
        </div>
        <div class="col-md-4">
            <label asp-for="PlotLineTypeID" class="form-label"></label>
            <select asp-for="PlotLineTypeID" asp-items="Model.PlotLineTypes" class="form-select"></select>
        </div>
        <div class="col-md-4">
            <label asp-for="BookID" class="form-label"></label>
            <select asp-for="BookID" asp-items="Model.BookOptions" class="form-select">
                <option value="">Project-wide</option>
            </select>
        </div>
        <div class="col-md-4">
            <label asp-for="ParentPlotLineID" class="form-label"></label>
            <select asp-for="ParentPlotLineID" asp-items="Model.ParentPlotLineOptions" class="form-select">
                <option value="">None</option>
            </select>
        </div>
        <div class="col-md-2">
            <label asp-for="SortOrder" class="form-label"></label>
            <input asp-for="SortOrder" class="form-control" />
        </div>
        <div class="col-md-2">
            <label asp-for="Colour" class="form-label"></label>
            <input asp-for="Colour" type="color" class="form-control form-control-color" />
        </div>
        <div class="col-12">
            <label asp-for="Description" class="form-label"></label>
            <textarea asp-for="Description" class="form-control" rows="4"></textarea>
        </div>
        <div class="col-md-4">
            <label class="purpose-check">
                <input asp-for="IsMainPlot" />
                <span>Main plot</span>
            </label>
        </div>
        <div class="col-md-4">
            <label class="purpose-check">
                <input asp-for="IsVisibleOnTimeline" />
                <span>Visible on timeline</span>
            </label>
        </div>
    </div>
    <button class="btn btn-primary mt-3" type="submit">Save plot line</button>
</form>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}