@props([
    'board',
    'post',
    'postBlockBoards' => [],
    'authGuard' => 'tenant',
    'storeAction' => '',
    'updateAction' => '',
    'indexAction' => '',
    'showUrlTemplate' => '',
    'uploadUrl' => '',
    'fileUrlBase' => '',
    'canSchedulePublishing' => false,
    'allowBackdatePublishing' => false,
    'canInsertBlocks' => false,
    'aiContext' => null,
])

@php
    $isEdit = $post->exists;
    $authUser = auth($authGuard)->user();
    $previewVariant = $authGuard === 'web' ? 'platform' : 'tenant';
    $boardCategories = $board->activeCategories;
    $canSelectCategory = $board->userCanSelectCategory($authUser);
    $selectedCategoryId = old('board_category_id', $post->board_category_id ?? $board->effectiveDefaultCategoryId());
    $currentTags = old('tags', $post->exists ? $post->tags->pluck('name')->implode(', ') : '');
    $publishedAtOldValue = old('published_at');
    $publishedAtNativeValue = optional($post->published_at)->format('Y-m-d\TH:i');

    if (filled($publishedAtOldValue)) {
        try {
            $publishedAtNativeValue = \Illuminate\Support\Carbon::parse($publishedAtOldValue)->format('Y-m-d\TH:i');
        } catch (\Throwable $e) {
            $publishedAtNativeValue = optional($post->published_at)->format('Y-m-d\TH:i');
        }
    }
    $publishedAtDateValue = old('published_at_date', filled($publishedAtNativeValue) ? \Illuminate\Support\Carbon::parse($publishedAtNativeValue)->format('Y-m-d') : '');
    $publishedAtHourValue = old('published_at_hour', filled($publishedAtNativeValue) ? \Illuminate\Support\Carbon::parse($publishedAtNativeValue)->format('H') : '');
    $publishedAtMinuteValue = old('published_at_minute', filled($publishedAtNativeValue) ? \Illuminate\Support\Carbon::parse($publishedAtNativeValue)->format('i') : '');
    $publishedAtRestricted = $canSchedulePublishing && ! $allowBackdatePublishing;
    $publishedAtDateMinValue = $publishedAtRestricted ? now()->toDateString() : null;
    $publishedAtNativeMinValue = $publishedAtRestricted ? now()->startOfMinute()->format('Y-m-d\TH:i') : null;
    $showPublishedAtField = $canSchedulePublishing && (! $isEdit || ($post->published_at?->isFuture() ?? false));
    $selectedThumbnail = old('thumbnail_image', $post->thumbnail);
    $fileUrlBase = rtrim((string) $fileUrlBase, '/');
    $aiContext = is_array($aiContext ?? null) ? $aiContext : [];
    $isManager = (bool) ($authUser?->isManager() ?? false);
    $showAiButton = (bool) ($aiContext['show_button'] ?? false);
    $canOpenAiPanel = (bool) ($aiContext['can_open_panel'] ?? false);
    $aiPlanLabel = (string) ($aiContext['plan_label'] ?? '');
    $aiPlanKey = (string) ($aiContext['plan_key'] ?? '');
    $aiAllowedModels = (array) ($aiContext['allowed_models'] ?? []);
    $aiSelectedModel = (string) ($aiContext['selected_model'] ?? ($aiAllowedModels[0] ?? ''));
    $aiReasoningEffortOptions = (array) ($aiContext['reasoning_effort_options'] ?? \App\Core\Platform\Ai\AiDefaults::reasoningEffortOptions());
    $aiSelectedReasoningEffort = (string) old('reasoning_effort', $aiContext['reasoning_effort'] ?? config('ai.reasoning_effort', \App\Core\Platform\Ai\AiDefaults::REASONING_EFFORT));
    $aiUpgradeMessage = (string) ($aiContext['upgrade_message'] ?? '');
    $aiWriteAction = (string) ($aiContext['write_action'] ?? '');
    $aiCredit = is_array($aiContext['credit'] ?? null) ? $aiContext['credit'] : [];
    $aiTotalCreditRemaining = $aiCredit['total_credit_remaining'] ?? null;
    $aiImageContext = is_array($aiContext['image'] ?? null) ? $aiContext['image'] : [];
    $showAiImageButton = $isManager && (bool) ($aiImageContext['can_generate_images'] ?? false);
    $aiImageAction = (string) ($aiContext['image_write_action'] ?? ($aiImageContext['write_action'] ?? ''));
@endphp

<form
    method="POST"
    action="{{ $isEdit ? $updateAction : $storeAction }}"
    enctype="multipart/form-data"
    id="post-form"
    class="space-y-6"
    data-upload-url="{{ $uploadUrl }}"
    data-csrf-token="{{ csrf_token() }}"
    data-show-url-template="{{ $showUrlTemplate }}"
    data-slug-preview-url="{{ request()->url() }}"
    data-post-block-default-board-id="{{ $board->id }}"
    data-post-block-boards='@json($postBlockBoards ?? [])'
    data-initial-thumbnail="{{ (string) $selectedThumbnail }}"
    data-ai-shell="{{ $showAiButton ? '1' : '0' }}"
    data-ai-open="{{ $showAiButton ? '0' : '0' }}"
    data-ai-can-open="{{ $canOpenAiPanel ? '1' : '0' }}"
    data-ai-upgrade-message="{{ $aiUpgradeMessage }}"
    data-ai-plan-label="{{ $aiPlanLabel }}"
    data-ai-plan-key="{{ $aiPlanKey }}"
    data-ai-selected-model="{{ $aiSelectedModel }}"
    data-ai-selected-reasoning-effort="{{ $aiSelectedReasoningEffort }}"
    data-ai-write-action="{{ $aiWriteAction }}"
    data-ai-image-shell="{{ $showAiImageButton ? '1' : '0' }}"
    data-ai-image-action="{{ $aiImageAction }}"
    data-ai-image-context='@json($aiImageContext)'
>
    @csrf
    @if ($isEdit)
        @method('PUT')
    @endif

    <div
        class="fixed inset-0 z-[90] hidden items-center justify-center bg-black/65 px-4 py-6"
        data-post-submit-overlay
        aria-hidden="true"
    >
        <div class="flex w-full max-w-sm flex-col items-center gap-4 rounded-[var(--radius-2xl)] border border-white/10 bg-slate-950/90 px-6 py-5 text-center text-white shadow-2xl backdrop-blur-md">
            <svg viewBox="0 0 24 24" class="h-12 w-12 animate-spin text-white" fill="none" aria-hidden="true">
                <circle cx="12" cy="12" r="8.5" stroke="currentColor" stroke-width="2.25" opacity="0.22"></circle>
                <path d="M20.5 12a8.5 8.5 0 0 0-8.5-8.5" stroke="currentColor" stroke-width="2.25" stroke-linecap="round"></path>
            </svg>
            <div class="space-y-1">
                <div class="text-base font-bold tracking-[-0.02em]" data-post-submit-overlay-title>저장중입니다</div>
                <p class="text-sm text-white/70" data-post-submit-overlay-description>작성한 내용을 안전하게 저장하고 있어요.</p>
            </div>
        </div>
    </div>

    <x-ui.card padded>
        <div class="flex flex-col gap-3">
            <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
                <div class="flex flex-col gap-2">
                    <div class="text-xs font-bold uppercase tracking-[0.08em] c-subtle">
                        {{ $board->title }}
                    </div>
                    <h2 class="text-2xl font-extrabold tracking-[-0.04em] c-main">
                        {{ $isEdit ? '글 수정' : '새 글 쓰기' }}
                    </h2>
                    <p class="max-w-3xl text-sm c-muted">
                        Tiptap 기반 본문 편집과 이미지 추가/삭제를 참조 프로젝트와 같은 흐름으로 맞췄습니다.
                    </p>
                </div>

                @if ($showAiButton)
                    <div class="flex flex-wrap items-center gap-2">
                        <x-ui.badge size="sm" variant="{{ $canOpenAiPanel ? 'success' : 'warning' }}">
                            AI {{ $canOpenAiPanel ? '사용 가능' : '상위 플랜 필요' }}
                        </x-ui.badge>
                        <x-ui.button
                            type="button"
                            variant="{{ $canOpenAiPanel ? 'primary' : 'warning' }}"
                            size="sm"
                            data-ai-toggle
                            aria-expanded="false"
                        >
                            AI 글쓰기
                        </x-ui.button>
                    </div>
                @endif
            </div>

            @if ($showAiButton && ! $canOpenAiPanel)
                <div
                    class="hidden rounded-[var(--radius-xl)] border border-warning/30 bg-warning/10 px-4 py-3 text-sm c-main"
                    data-ai-upgrade-note
                >
                    {{ $aiUpgradeMessage }}
                </div>
            @endif

            @if ($errors->any())
                <x-ui.alert variant="danger" title="입력 오류">
                    <ul class="m-0 list-disc space-y-1 pl-5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </x-ui.alert>
            @endif
        </div>
    </x-ui.card>

    @if ($showAiButton)
        <div
            class="fixed inset-0 z-40 hidden h-[100dvh] bg-overlay-soft lg:hidden"
            data-ai-overlay
            aria-hidden="true"
        ></div>

        <aside
            class="fixed inset-y-0 right-0 z-50 flex h-[100dvh] w-[min(92vw,24rem)] translate-x-full flex-col border-l border-muted bg-card shadow-[0_24px_72px_rgba(15,23,42,0.14)] transition-transform duration-200 ease-out lg:fixed lg:top-6 lg:z-50 lg:h-[calc(100dvh-3rem)] lg:w-96 lg:rounded-[var(--radius-2xl)] lg:border lg:shadow-sm"
            data-ai-panel
            aria-hidden="true"
            aria-label="AI 글쓰기 패널"
        >
            <div class="flex items-center justify-between gap-3 border-b border-muted px-4 py-4">
                <div class="min-w-0">
                    <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">AI writing</div>
                    <div class="truncate text-lg font-extrabold tracking-[-0.04em] c-main">AI 글쓰기</div>
                </div>

                <button
                    type="button"
                    class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-transparent c-main transition-colors hover:bg-surface1 lg:hidden"
                    aria-label="패널 닫기"
                    data-ai-close
                >
                    <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        <path d="M6 6l12 12"></path>
                        <path d="M18 6 6 18"></path>
                    </svg>
                </button>
            </div>

            <div class="flex-1 space-y-4 overflow-y-auto px-4 py-4">
                @if (! $canOpenAiPanel)
                    <x-ui.alert variant="warning" title="상위 플랜 필요">
                        AI 글쓰기를 사용하려면 상위 플랜이 필요합니다.
                    </x-ui.alert>
                @endif

                <div class="space-y-3 rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                    <div class="text-sm font-extrabold tracking-[-0.03em] c-main">잔여 크레딧</div>
                    <div class="text-2xl font-extrabold tracking-[-0.04em] c-main">
                        {{ $aiTotalCreditRemaining === null ? '무제한' : number_format((int) $aiTotalCreditRemaining) }}
                    </div>
                </div>

                @if ($aiAllowedModels !== [])
                    <div class="space-y-3 rounded-[var(--radius-xl)] border border-muted bg-base p-4">
                        <div class="grid grid-cols-2 gap-3">
                            <x-ui.select
                                id="ai_model"
                                name="model"
                                label="모델"
                            >
                                @foreach ($aiAllowedModels as $model)
                                    <option value="{{ $model }}" @selected($aiSelectedModel === $model)>{{ ai_model_display_label($model) }}</option>
                                @endforeach
                            </x-ui.select>

                            <x-ui.select
                                id="ai_reasoning_effort"
                                name="reasoning_effort"
                                label="추론 강도"
                            >
                                @foreach ($aiReasoningEffortOptions as $effort)
                                    <option value="{{ $effort }}" @selected($aiSelectedReasoningEffort === $effort)>{{ $effort }}</option>
                                @endforeach
                            </x-ui.select>
                        </div>
                    </div>
                @endif

                <x-ui.input
                    floating
                    id="ai_topic"
                    label="주제"
                    placeholder=" "
                    :disabled="! $canOpenAiPanel"
                />

                <x-ui.textarea
                    floating
                    id="ai_references"
                    label="참고자료(선택)"
                    rows="5"
                    :disabled="! $canOpenAiPanel"
                />

                <x-ui.button
                    type="button"
                    variant="primary"
                    size="md"
                    full
                    :disabled="! $canOpenAiPanel"
                    data-ai-generate
                >
                    AI로 글 작성
                </x-ui.button>

                <div class="rounded-[var(--radius-xl)] border border-muted bg-surface px-4 py-3 text-xs leading-5 c-muted">
                    글 1회 작성 시 약 4크레딧이 사용됩니다.
                    모델과 추론 강도에 따라 실제 사용량은 달라질 수 있습니다.
                </div>
            </div>
        </aside>
    @endif

    @if (! auth($authGuard)->check())
        <x-ui.card padded>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <x-ui.input
                    type="text"
                    name="guest_name"
                    id="guest_name"
                    label="작성자 명"
                    placeholder="이름을 입력하세요"
                    :value="old('guest_name', $post->guest_name)"
                    :error="$errors->first('guest_name')"
                    required
                />

                <x-ui.input
                    type="password"
                    name="guest_password"
                    id="guest_password"
                    label="비밀번호 (수정/삭제용)"
                    placeholder="비밀번호를 설정하세요"
                    :error="$errors->first('guest_password')"
                    required
                />
            </div>
        </x-ui.card>
    @endif

    @if ($boardCategories->isNotEmpty() && $canSelectCategory)
        <div class="grid grid-cols-1 gap-4 md:grid-cols-[minmax(16rem,18rem)_minmax(0,1fr)]">
            <x-ui.select
                floating
                name="board_category_id"
                id="board_category_id"
                label="분류"
                :error="$errors->first('board_category_id')"
                required
            >
                <option value="">분류 선택</option>
                @foreach ($boardCategories as $category)
                    <option value="{{ $category->id }}" @selected((string) $selectedCategoryId === (string) $category->id)>
                        {{ $category->name }}
                    </option>
                @endforeach
            </x-ui.select>
            <x-ui.input
                type="text"
                name="title"
                id="title"
                label="제목"
                placeholder=" "
                :value="old('title', $post->title)"
                :error="$errors->first('title')"
                floating
                required
            />
        </div>
    @else
        <x-ui.input
            type="text"
            name="title"
            id="title"
            label="제목"
            placeholder=" "
            :value="old('title', $post->title)"
            :error="$errors->first('title')"
            floating
            required
        />
    @endif

    @if (! ($boardCategories->isNotEmpty() && $canSelectCategory) && $board->effectiveDefaultCategoryId())
        <input type="hidden" name="board_category_id" value="{{ $board->effectiveDefaultCategoryId() }}">
    @endif

    @if ($isEdit)
        <div class="space-y-2">
            <div class="flex flex-row flex-nowrap items-start gap-2">
                <x-ui.input
                    type="text"
                    id="slug"
                    name="slug_display"
                    label="슬러그"
                    placeholder=" "
                    :value="old('slug', $post->slug)"
                    :help="'버튼을 누르면 슬러그 값만 갱신되고, 저장은 하단의 저장 버튼으로 진행됩니다.'"
                    class="min-w-0 flex-1"
                    floating
                    disabled
                    readonly
                />
                <input
                    type="hidden"
                    name="slug"
                    id="slug-hidden"
                    value="{{ old('slug', $post->slug) }}"
                >
                <x-ui.button
                    type="button"
                    variant="soft"
                    size="md"
                    class="shrink-0 whitespace-nowrap border border-muted bg-surface c-main bg-hover-main text-hover-base"
                    data-slug-regenerate
                >
                    슬러그 수정
                </x-ui.button>
            </div>
        </div>
    @endif

    <input type="hidden" name="content" id="hidden-input" value="{{ old('content', $post->content ?? '') }}">

    <div class="flex min-h-[70vh] flex-col overflow-hidden rounded-[var(--radius-xl)] border border-muted bg-surface1 shadow-sm">
        <div class="flex items-center justify-end gap-4 border-b border-muted bg-surface px-3 py-2 text-xs c-muted">
            <span class="inline-flex items-center gap-1 whitespace-nowrap">
                <span class="font-semibold c-main">공백 포함</span>
                <span id="editor-char-count-with-spaces">0</span>
                <span>자</span>
            </span>
            <span class="inline-flex items-center gap-1 whitespace-nowrap">
                <span class="font-semibold c-main">공백 제외</span>
                <span id="editor-char-count-without-spaces">0</span>
                <span>자</span>
            </span>
        </div>
        <div id="tiptap-toolbar" class="flex items-center flex-nowrap gap-1 overflow-x-auto whitespace-nowrap border-b border-muted bg-surface p-2">
            <select id="heading-select" class="select select-sm w-28 min-w-0 shrink-0">
                <option value="paragraph">본문</option>
                <option value="h1">제목 1</option>
                <option value="h2">제목 2</option>
                <option value="h3">제목 3</option>
            </select>

            <input type="color" id="tiptap-color-picker" value="#111827" class="h-9 w-9 shrink-0 cursor-pointer rounded-md border border-muted bg-base p-1">

            <button type="button" data-command="bold" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="굵게" aria-label="굵게">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 5h6a4 4 0 0 1 0 8H7z"/><path d="M7 13h7a4 4 0 0 1 0 8H7z"/></svg>
            </button>
            <button type="button" data-command="italic" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="기울임" aria-label="기울임">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 5h8"/><path d="M6 19h8"/><path d="M14 5l-4 14"/></svg>
            </button>
            <div class="mx-1 h-6 w-px self-center bg-muted"></div>

            <button type="button" data-command="align-left" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="왼쪽 정렬" aria-label="왼쪽 정렬">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16"/><path d="M4 10h10"/><path d="M4 14h16"/><path d="M4 18h10"/></svg>
            </button>
            <button type="button" data-command="align-center" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="가운데 정렬" aria-label="가운데 정렬">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16"/><path d="M7 10h10"/><path d="M4 14h16"/><path d="M7 18h10"/></svg>
            </button>
            <button type="button" data-command="align-right" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="오른쪽 정렬" aria-label="오른쪽 정렬">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16"/><path d="M10 10h10"/><path d="M4 14h16"/><path d="M10 18h10"/></svg>
            </button>
            <button type="button" data-command="highlight-yellow" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="형광펜" aria-label="형광펜">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20h8"/><path d="M14 4l6 6-8 8-6-6z"/></svg>
            </button>
            <button type="button" data-command="bullet-list" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="글머리 목록" aria-label="글머리 목록">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><circle cx="5" cy="7" r="1.5"/><circle cx="5" cy="12" r="1.5"/><circle cx="5" cy="17" r="1.5"/><path d="M9 7h10M9 12h10M9 17h10"/></svg>
            </button>
            <button type="button" data-command="ordered-list" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="번호 목록" aria-label="번호 목록">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h2v4"/><path d="M4 11h3"/><path d="M4 17h2v-4h-2"/><path d="M10 7h10M10 12h10M10 17h10"/></svg>
            </button>
            <div class="mx-1 h-6 w-px self-center bg-muted"></div>

            <button type="button" data-command="insert-table" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="표 삽입" aria-label="표 삽입">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 10h16M4 14h16M10 4v16M14 4v16"/></svg>
            </button>
            <button type="button" data-command="add-column-after" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="열 추가" aria-label="열 추가">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="4" width="8" height="16" rx="1.5"/><path d="M17 8v8M13 12h8"/></svg>
            </button>
            <button type="button" data-command="add-row-after" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="행 추가" aria-label="행 추가">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="5" width="16" height="8" rx="1.5"/><path d="M8 17h8M12 13v8"/></svg>
            </button>
            <button type="button" data-command="delete-column" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="열 삭제" aria-label="열 삭제">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="4" width="8" height="16" rx="1.5"/><path d="M17 12h4"/></svg>
            </button>
            <button type="button" data-command="delete-row" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="행 삭제" aria-label="행 삭제">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="5" width="16" height="8" rx="1.5"/><path d="M12 17h4"/></svg>
            </button>
            <button type="button" data-command="delete-table" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="표 삭제" aria-label="표 삭제">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 8l8 8M16 8l-8 8"/></svg>
            </button>
            <div class="mx-1 h-6 w-px self-center bg-muted"></div>

            <button type="button" data-command="toggle-link" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="링크 삽입" aria-label="링크 삽입">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 14l4-4"/><path d="M7.5 12.5l-1 1a4 4 0 1 1-5.7-5.7l1-1"/><path d="M16.5 11.5l1-1a4 4 0 1 1 5.7 5.7l-1 1"/></svg>
            </button>
            <button type="button" data-command="insert-image" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition hover:bg-muted" title="이미지 삽입" aria-label="이미지 삽입">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="m4 17 5-5 4 4 3-3 4 4"/></svg>
            </button>
            @if ($canInsertBlocks)
                <button
                    type="button"
                    data-command="insert-post-block"
                    class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-primary bg-primary text-[rgb(var(--color-on-primary-rgb))] shadow-md transition-colors hover:opacity-90"
                    title="게시글 블록 삽입"
                    aria-label="게시글 블록 삽입"
                >
                    <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M4 5h16M4 12h16M4 19h16"/>
                        <path d="M8 5v14"/>
                    </svg>
                </button>
            @endif
            <button type="button" data-command="html-toggle" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-muted bg-surface c-main transition hover:bg-surface1" aria-label="HTML 보기 전환" title="HTML 보기 전환">
                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 9l-4 3 4 3"/><path d="M16 9l4 3-4 3"/><path d="M14 5 10 19"/></svg>
            </button>
        </div>

        <div
            id="editor"
            data-initial-content="{{ old('content', $post->content ?? '') }}"
            class="min-h-0 max-w-none flex-1 overflow-x-auto overflow-y-auto bg-base p-6 focus:outline-none"
        ></div>

        <textarea
            id="html-editor"
            class="hidden min-h-0 w-full flex-1 border-none bg-surface1 p-6 font-mono text-sm c-main focus:ring-0"
        ></textarea>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)]">
        <x-ui.card padded class="space-y-4">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <div class="text-sm font-extrabold tracking-[-0.03em] c-main">이미지</div>
                    <div class="text-xs c-muted">이미지는 먼저 임시 저장한 뒤, 저장 시 게시글 폴더로 이동합니다.</div>
                </div>
            </div>

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-semibold c-main">본문 이미지 업로드</label>
                        <input type="file" id="editor-image-upload" accept="image/png,image/jpeg,image/webp,image/gif" multiple class="block w-full rounded-[var(--radius-lg)] border border-muted bg-base px-3 py-2 text-sm">
                    </div>
                    <div class="mt-[1.9rem] space-y-2">
                    @if ($isManager)
                        <button
                            type="button"
                            id="editor-image-url-open"
                            class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-muted bg-surface px-4 py-2 text-sm font-semibold c-main transition hover:border-primary hover:bg-surface1"
                            aria-haspopup="dialog"
                        >
                            URL로 이미지 추가
                        </button>
                    @endif
                    @if ($showAiImageButton)
                        <button
                            type="button"
                            id="editor-image-generate-open"
                            class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-muted bg-surface px-4 py-2 text-sm font-semibold c-main transition hover:border-primary hover:bg-surface1"
                            aria-haspopup="dialog"
                        >
                            AI 이미지 생성
                        </button>
                    @endif
                        <button
                            type="button"
                            id="editor-pixabay-open"
                            class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-muted bg-surface px-4 py-2 text-sm font-semibold c-main transition hover:border-primary hover:bg-surface1"
                            aria-haspopup="dialog"
                            data-pixabay-search-url="{{ tenant_url(null, 'pixabay/search') }}"
                        >
                            무료 이미지
                        </button>
                    @if ($showAiImageButton)
                        <button
                            type="button"
                            id="editor-text-image-generate-open"
                            class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-muted bg-surface px-4 py-2 text-sm font-semibold c-main transition hover:border-primary hover:bg-surface1"
                            aria-haspopup="dialog"
                        >
                            텍스트 이미지생성
                        </button>
                    @endif
                </div>
            </div>

            <div id="editor-image-preview" class="flex flex-wrap gap-3">
                @if ($isEdit && $post->images->isNotEmpty())
                    @foreach ($post->images as $image)
                        @php $imageUrl = $fileUrlBase . '/' . ltrim($image->path, '/'); @endphp
                        <div class="group relative flex flex-col gap-2" data-image-wrapper data-image-url="{{ $imageUrl }}" data-image-path="{{ $image->path }}">
                            <button type="button" data-image-preview-button class="overflow-hidden rounded-lg border border-muted bg-surface transition duration-150 ease-out hover:-translate-y-0.5 hover:border-primary hover:shadow-md hover:ring-2 hover:ring-primary/20 @if ($selectedThumbnail === $image->path) border-primary ring-2 ring-primary/20 @endif" onclick="window.insertImageToEditor('{{ $imageUrl }}')">
                                <img src="{{ $imageUrl }}" alt="" class="h-20 w-20 object-cover transition duration-150 ease-out">
                            </button>
                            <button
                                type="button"
                                class="absolute right-1 top-1 inline-flex h-6 w-6 items-center justify-center rounded-full border border-[rgb(var(--color-primary-rgb))] bg-[rgb(var(--color-primary-rgb))] text-[rgb(var(--color-on-primary-rgb))] shadow-md transition hover:bg-[rgb(var(--color-primary-rgb))] hover:text-[rgb(var(--color-on-primary-rgb))]"
                                data-delete-toggle
                                aria-label="이미지 삭제 토글"
                                title="삭제"
                            >
                                <span aria-hidden="true" class="text-sm leading-none">×</span>
                            </button>
                            <input type="checkbox" class="sr-only" data-delete-checkbox>
                            <label class="inline-flex items-center gap-2 px-0.5 text-xs c-main">
                                <input
                                    type="radio"
                                    name="thumbnail_image"
                                    value="{{ $image->path }}"
                                    class="h-4 w-4 shrink-0 accent-[rgb(var(--color-primary-rgb))]"
                                    data-thumbnail-radio
                                    @checked($selectedThumbnail === $image->path)
                                >
                                <span data-thumbnail-label class="font-medium">대표</span>
                            </label>
                            <input type="hidden" name="original_images[]" value="{{ $image->path }}">
                        </div>
                    @endforeach
                @endif
            </div>
        </x-ui.card>

        <div class="space-y-6">
            <x-ui.card padded class="space-y-4">
                <x-ui.input
                    type="text"
                    name="tags"
                    id="tags"
                    label="태그 (# 제외, 쉼표 구분)"
                    :value="$currentTags"
                    :error="$errors->first('tags')"
                    floating
                />

                <x-ui.input
                    type="text"
                    name="meta_description"
                    id="meta_description"
                    label="검색용 짧은 설명 (Meta)"
                    :value="old('meta_description', $post->meta_description)"
                    :error="$errors->first('meta_description')"
                    floating
                />

                <x-ui.input
                    type="text"
                    name="meta_keywords"
                    id="meta_keywords"
                    label="SEO 키워드"
                    :value="old('meta_keywords', $post->meta_keywords)"
                    :error="$errors->first('meta_keywords')"
                    floating
                />

                @if ($showPublishedAtField)
                    <div class="space-y-3" data-published-at-native-wrapper>
                        <x-ui.input
                            type="datetime-local"
                            name="published_at"
                            id="published_at"
                            label="발행일시"
                            :value="$publishedAtNativeValue"
                            :min="$publishedAtNativeMinValue"
                            :error="$errors->first('published_at')"
                        />
                    </div>

                    <div class="hidden space-y-3" data-published-at-firefox-wrapper>
                        <div class="text-sm font-semibold c-main">발행일시</div>
                        <div class="grid gap-3 sm:grid-cols-3">
                            <x-ui.input
                                type="date"
                                name="published_at_date"
                                id="published_at_date"
                                label="날짜"
                                :value="$publishedAtDateValue"
                                :min="$publishedAtDateMinValue"
                                :error="null"
                            />
                            <x-ui.select
                                id="published_at_hour"
                                name="published_at_hour"
                                label="시"
                            >
                                <option value="">시 선택</option>
                                @foreach (range(0, 23) as $hour)
                                    <option value="{{ sprintf('%02d', $hour) }}" @selected($publishedAtHourValue === sprintf('%02d', $hour))>
                                        {{ sprintf('%02d', $hour) }}시
                                    </option>
                                @endforeach
                            </x-ui.select>
                            <x-ui.select
                                id="published_at_minute"
                                name="published_at_minute"
                                label="분"
                            >
                                <option value="">분 선택</option>
                                @foreach (range(0, 59) as $minute)
                                    <option value="{{ sprintf('%02d', $minute) }}" @selected($publishedAtMinuteValue === sprintf('%02d', $minute))>
                                        {{ sprintf('%02d', $minute) }}분
                                    </option>
                                @endforeach
                            </x-ui.select>
                        </div>
                        <input type="hidden" name="published_at" id="published_at_fallback" value="{{ $publishedAtNativeValue }}">
                        @if ($errors->has('published_at'))
                            <span class="error-text ui-field-note">{{ $errors->first('published_at') }}</span>
                        @endif
                    </div>
                @endif
            </x-ui.card>

        </div>
    </div>

    @if ($canInsertBlocks)
        <div id="post-block-preview-bank" class="hidden" aria-hidden="true">
            @foreach (['grid', 'carousel', 'list'] as $previewSkin)
                @foreach (['card', 'list', 'media', 'listcard'] as $previewItem)
                    <template
                        data-post-block-preview-template
                        data-skin="{{ $previewSkin }}"
                        data-item="{{ $previewItem }}"
                    >
                        <x-posts.preview
                            :board="$board"
                            :variant="$previewVariant"
                            :skin="$previewSkin"
                            :item="$previewItem"
                            :show-image="true"
                            :board-label="$board->title"
                        />
                    </template>
                @endforeach
            @endforeach
        </div>
    @endif

    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-muted pt-6">
        <a href="{{ $indexAction }}" class="text-sm font-semibold c-subtle underline underline-offset-4 transition-colors hover:c-main">목록으로 돌아가기</a>
        <div class="flex items-center gap-2">
            <x-ui.button href="{{ $indexAction }}" variant="outline" size="md">취소</x-ui.button>
            <x-ui.button
                type="submit"
                variant="primary"
                size="md"
                data-form-submit-button
                data-loading-text="저장 중"
            >
                {{ $isEdit ? '수정하기' : '등록하기' }}
            </x-ui.button>
        </div>
    </div>
</form>

@if ($showPublishedAtField)
    @push('scripts')
        <script>
            (() => {
                const form = document.getElementById('post-form');

                if (!form || form.dataset.publishedAtBound === '1') {
                    return;
                }

                const nativeWrapper = form.querySelector('[data-published-at-native-wrapper]');
                const fallbackWrapper = form.querySelector('[data-published-at-firefox-wrapper]');
                const nativeInput = form.querySelector('#published_at');
                const fallbackInput = form.querySelector('#published_at_fallback');
                const dateInput = form.querySelector('#published_at_date');
                const hourSelect = form.querySelector('#published_at_hour');
                const minuteSelect = form.querySelector('#published_at_minute');

                if (!nativeWrapper || !fallbackWrapper || !nativeInput || !fallbackInput || !dateInput || !hourSelect || !minuteSelect) {
                    return;
                }

                form.dataset.publishedAtBound = '1';

                const backdateAllowed = @json($allowBackdatePublishing);
                const currentDate = @json(now()->toDateString());
                const currentHour = Number(@json(now()->format('H')));
                const currentMinute = Number(@json(now()->format('i')));
                const initialValue = @json($publishedAtNativeValue);
                const useFirefoxFallback = typeof InstallTrigger !== 'undefined' || /Firefox\/\d+/i.test(navigator.userAgent || '');

                const parseInitialValue = () => {
                    if (!initialValue) {
                        return null;
                    }

                    const normalized = initialValue.replace('T', ' ');
                    const [datePart = '', timePart = ''] = normalized.split(' ');
                    if (!datePart || !timePart) {
                        return null;
                    }

                    const [hourPart = '', minutePart = ''] = timePart.split(':');

                    if (!hourPart || !minutePart) {
                        return null;
                    }

                    return {
                        date: datePart,
                        hour: hourPart.slice(0, 2),
                        minute: minutePart.slice(0, 2),
                    };
                };

                const syncOptionAvailability = () => {
                    Array.from(hourSelect.options).forEach((option) => {
                        option.disabled = false;
                    });

                    Array.from(minuteSelect.options).forEach((option) => {
                        option.disabled = false;
                    });

                    if (backdateAllowed || dateInput.value !== currentDate) {
                        return;
                    }

                    const currentHourValue = String(currentHour).padStart(2, '0');
                    const currentMinuteValue = String(currentMinute).padStart(2, '0');

                    Array.from(hourSelect.options).forEach((option) => {
                        const value = Number(option.value);

                        if (Number.isNaN(value)) {
                            return;
                        }

                        if (value < currentHour) {
                            option.disabled = true;
                        }
                    });

                    if (! hourSelect.value || Number(hourSelect.value) < currentHour) {
                        hourSelect.value = currentHourValue;
                    }

                    if (hourSelect.value !== currentHourValue) {
                        return;
                    }

                    Array.from(minuteSelect.options).forEach((option) => {
                        const value = Number(option.value);

                        if (Number.isNaN(value)) {
                            return;
                        }

                        if (value < currentMinute) {
                            option.disabled = true;
                        }
                    });

                    if (! minuteSelect.value || Number(minuteSelect.value) < currentMinute) {
                        minuteSelect.value = currentMinuteValue;
                    }
                };

                const syncPublishedAt = () => {
                    if (!useFirefoxFallback) {
                        return;
                    }

                    syncOptionAvailability();

                    if (dateInput.value && hourSelect.value && minuteSelect.value) {
                        fallbackInput.value = `${dateInput.value} ${hourSelect.value}:${minuteSelect.value}:00`;
                        return;
                    }

                    fallbackInput.value = '';
                };

                const seedFallbackFromInitial = () => {
                    const seed = parseInitialValue();

                    if (!seed) {
                        return;
                    }

                    if (!dateInput.value) {
                        dateInput.value = seed.date;
                    }

                    if (!hourSelect.value) {
                        hourSelect.value = seed.hour;
                    }

                    if (!minuteSelect.value) {
                        minuteSelect.value = seed.minute;
                    }
                };

                if (useFirefoxFallback) {
                    nativeWrapper.classList.add('hidden');
                    fallbackWrapper.classList.remove('hidden');
                    nativeInput.disabled = true;
                    fallbackInput.disabled = false;
                    seedFallbackFromInitial();
                    syncPublishedAt();
                } else {
                    fallbackWrapper.classList.add('hidden');
                    nativeWrapper.classList.remove('hidden');
                    fallbackInput.disabled = true;
                    nativeInput.disabled = false;
                }

                dateInput.addEventListener('input', syncPublishedAt);
                dateInput.addEventListener('change', syncPublishedAt);
                hourSelect.addEventListener('change', syncPublishedAt);
                minuteSelect.addEventListener('change', syncPublishedAt);
                form.addEventListener('submit', syncPublishedAt);
            })();
        </script>
    @endpush
@endif