PlotDirector/PlotLine/Views/Books/Edit.cshtml

@model BookEditViewModel
@{
    ViewData["Title"] = Model.BookID == 0 ? "New Book" : "Edit Book";
}

<div class="page-heading compact">
    <div>
        <p class="eyebrow">@Model.Project?.ProjectName</p>
        <h1>@ViewData["Title"] <help-icon key="books.edit" /></h1>
    </div>
    <a class="btn btn-outline-secondary" asp-controller="Projects" asp-action="Details" asp-route-id="@Model.ProjectID">Back to project</a>
</div>

<form asp-action="Save" method="post" enctype="multipart/form-data" class="edit-panel">
    <input asp-for="BookID" type="hidden" />
    <input asp-for="ProjectID" type="hidden" />
    @if (Model.BookID != 0)
    {
        <input asp-for="BeginMode" type="hidden" value="@BookBeginModes.Manual" />
    }
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    @if (Model.BookID == 0)
    {
        <section class="mb-4" aria-label="Choose how to begin this book">
            <p class="eyebrow">New book</p>
            <h2 class="h5">How would you like to begin?</h2>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="onboarding-option-card h-100">
                        <input type="radio" name="BeginMode" value="@BookBeginModes.Manual" checked="@(Model.BeginMode != BookBeginModes.Import)" />
                        <span>
                            <strong>Start with an empty book</strong>
                            <span>Create chapters and scenes manually.</span>
                        </span>
                    </label>
                </div>
                <div class="col-md-6">
                    <label class="onboarding-option-card h-100">
                        <input type="radio" name="BeginMode" value="@BookBeginModes.Import" checked="@(Model.BeginMode == BookBeginModes.Import)" />
                        <span>
                            <strong>Import an existing manuscript</strong>
                            <span>Use the Word Companion and Story Intelligence.</span>
                        </span>
                    </label>
                </div>
            </div>
        </section>
    }
    <div class="row g-3">
        <div class="col-md-3">
            <label asp-for="BookNumber" class="form-label">Book number <help-icon key="books.fields.bookNumber" mode="inline" /></label>
            <input asp-for="BookNumber" class="form-control" />
        </div>
        <div class="col-md-9">
            <label asp-for="BookTitle" class="form-label"></label>
            <input asp-for="BookTitle" class="form-control" />
            <span asp-validation-for="BookTitle" class="text-danger"></span>
        </div>
        <div class="col-md-4">
            <label asp-for="CoverUpload" class="form-label"></label>
            <div class="mb-2">
                <img src="@Model.CoverThumbnailPath" alt="Current book cover" class="img-fluid border" style="max-width:160px;" />
            </div>
            <input asp-for="CoverUpload" class="form-control" type="file" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp" />
            <div class="form-text">JPG, PNG or WebP. Maximum 10 MB.</div>
            <span asp-validation-for="CoverUpload" class="text-danger"></span>
        </div>
        <div class="col-md-8">
            <label asp-for="ShortDescription" class="form-label"></label>
            <textarea asp-for="ShortDescription" class="form-control" rows="6"></textarea>
        </div>
        <div class="col-md-6">
            <label asp-for="Subtitle" class="form-label"></label>
            <input asp-for="Subtitle" class="form-control" />
            <span asp-validation-for="Subtitle" class="text-danger"></span>
        </div>
        <div class="col-md-6">
            <label asp-for="Tagline" class="form-label"></label>
            <input asp-for="Tagline" class="form-control" />
            <span asp-validation-for="Tagline" class="text-danger"></span>
        </div>
        <div class="col-md-4">
            <label asp-for="Status" class="form-label"></label>
            <select asp-for="Status" asp-items="Model.StatusOptions" class="form-select"></select>
            <span asp-validation-for="Status" class="text-danger"></span>
        </div>
        <div class="col-md-4">
            <div class="form-check mt-4">
                <input asp-for="UsesExplicitScenes" class="form-check-input" />
                <label asp-for="UsesExplicitScenes" class="form-check-label"></label>
            </div>
        </div>
        <div class="col-md-4">
            <label asp-for="TargetWordCount" class="form-label"></label>
            <input asp-for="TargetWordCount" class="form-control" min="1" />
            <span asp-validation-for="TargetWordCount" class="text-danger"></span>
        </div>
        <div class="col-md-4">
            <label asp-for="WritingStartDate" class="form-label"></label>
            <input asp-for="WritingStartDate" class="form-control" />
            <span asp-validation-for="WritingStartDate" class="text-danger"></span>
        </div>
        <div class="col-md-6">
            <label asp-for="TargetCompletionDate" class="form-label"></label>
            <input asp-for="TargetCompletionDate" class="form-control" />
            <span asp-validation-for="TargetCompletionDate" class="text-danger"></span>
        </div>
        <div class="col-md-6">
            <label asp-for="PublicationDate" class="form-label"></label>
            <input asp-for="PublicationDate" class="form-control" />
            <span asp-validation-for="PublicationDate" class="text-danger"></span>
        </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>
    <button class="btn btn-primary mt-3" type="submit">Save book</button>
</form>

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