@model TaxBaik.Web.Pages.Shared.BlogEditorModel

<section class="admin-page-shell admin-editor-root blog-editor-shell" data-blog-editor-root>
    <div class="page-header d-print-none admin-page-header blog-editor-header">
        <div class="row align-items-center">
            <div class="col">
                <div class="page-pretitle admin-page-header-eyebrow">콘텐츠</div>
                <h2 class="page-title admin-page-header-title">@(Model.IsEdit ? "블로그 수정" : "블로그 등록")</h2>
                <p class="text-muted mb-0 admin-page-header-subtitle">@(Model.IsEdit ? "기존 글을 불러와 즉시 편집하고 미리볼 수 있습니다." : "에디터와 미리보기를 함께 제공하는 작성 화면입니다.")</p>
            </div>
            <div class="col-auto ms-auto">
                <span class="badge bg-blue-lt text-blue badge-sm">실시간 미리보기</span>
            </div>
        </div>
    </div>
    <div class="row g-3">
        <div class="col-lg-8">
            <form method="post" class="card">
                <div class="card-body">
                    @await Html.PartialAsync("_ValidationSummary")
                    @if (Model.IsEdit)
                    {
                        <input type="hidden" name="Id" value="@ViewData["BlogEditorId"]" />
                    }
                    <input type="hidden" name="Input.Content" value="@Model.Content" data-blog-editor-value />
                    <div class="mb-3">
                        <label class="form-label" for="Input_Title">제목</label>
                        <input class="form-control" id="Input_Title" name="Input.Title" value="@Model.Title" />
                        <span class="text-danger small" data-valmsg-for="Input.Title" data-valmsg-replace="true"></span>
                    </div>
                    <div class="mb-3 editor-block">
                        <label class="form-label">본문</label>
                        <div class="editor-toolbar" role="toolbar" aria-label="블로그 편집 도구">
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="bold">굵게</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="italic">기울임</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="insertUnorderedList">목록</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="formatBlock" data-blog-value="h2">제목 2</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="formatBlock" data-blog-value="blockquote">인용</button>
                        </div>
                        <div class="editor-surface" data-blog-editor contenteditable="true" aria-label="블로그 본문 편집기">@Html.Raw(Model.Content)</div>
                        <div class="form-hint text-muted small mt-2">편집 결과는 HTML로 저장되고, 홈페이지에서도 같은 스타일 규칙으로 렌더링됩니다.</div>
                    </div>
                    <div class="row g-3 blog-meta-grid">
                        <div class="col-md-4">
                            <label class="form-label" for="Input_CategoryId">카테고리</label>
                            <select class="form-select" id="Input_CategoryId" name="Input.CategoryId" required>
                                <option value="">카테고리 선택</option>
                                @foreach (var category in (ViewData["BlogCategories"] as IEnumerable<TaxBaik.Domain.Entities.Category>) ?? [])
                                {
                                    if (category.Id == Model.CategoryId)
                                    {
                                        <option value="@category.Id" selected>@category.Name</option>
                                    }
                                    else
                                    {
                                        <option value="@category.Id">@category.Name</option>
                                    }
                                }
                            </select>
                            <span class="text-danger small" data-valmsg-for="Input.CategoryId" data-valmsg-replace="true"></span>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label d-block" for="Input_IsPublished">발행 여부</label>
                            <input type="hidden" name="Input.IsPublished" value="false" />
                            <input class="form-check-input" id="Input_IsPublished" name="Input.IsPublished" type="checkbox" value="true" @(Model.IsPublished ? "checked" : null) />
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="Input_ThumbnailUrl">썸네일 URL</label>
                            <input class="form-control" id="Input_ThumbnailUrl" name="Input.ThumbnailUrl" value="@Model.ThumbnailUrl" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="Input_SeoTitle">SEO 제목</label>
                            <input class="form-control" id="Input_SeoTitle" name="Input.SeoTitle" value="@Model.SeoTitle" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="Input_SeoDescription">SEO 설명</label>
                            <input class="form-control" id="Input_SeoDescription" name="Input.SeoDescription" value="@Model.SeoDescription" />
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex flex-wrap justify-content-between gap-2">
                    <div class="d-flex flex-wrap gap-2">
                        @if (Model.IsEdit)
                        {
                            <button class="btn btn-outline-danger" type="submit" formaction="@Model.DeleteAction" formmethod="post" onclick="return confirm('삭제하시겠습니까?');">삭제</button>
                        }
                        <a class="btn btn-outline-secondary" href="/admin/blog">취소</a>
                    </div>
                    <button class="btn btn-primary" type="submit">저장</button>
                </div>
            </form>
        </div>
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between gap-2">
                    <h3 class="card-title mb-0">실시간 미리보기</h3>
                    <span class="badge bg-secondary-lt text-secondary">공통 스타일</span>
                </div>
                <div class="card-body d-grid gap-3">
                    <div class="admin-editor-source">
                        <div class="text-muted small text-uppercase mb-1">불러온 원본</div>
                        <div class="fw-semibold mb-2">@Model.Title</div>
                        <dl class="row g-2 mb-0 small">
                            <dt class="col-4 text-muted fw-normal">카테고리</dt>
                            <dd class="col-8 mb-0">@Model.CategoryId</dd>
                            <dt class="col-4 text-muted fw-normal">발행</dt>
                            <dd class="col-8 mb-0">@(Model.IsPublished ? "예" : "아니오")</dd>
                            <dt class="col-4 text-muted fw-normal">썸네일</dt>
                            <dd class="col-8 mb-0">@(string.IsNullOrWhiteSpace(Model.ThumbnailUrl) ? "-" : Model.ThumbnailUrl)</dd>
                        </dl>
                    </div>
                    <article class="content-prose blog-preview-pane" data-blog-preview>@Html.Raw(Model.Content)</article>
                </div>
            </div>
        </div>
    </div>
</section>