{% extends 'base.html' %}

{% block content %}
<script src="//unpkg.com/alpinejs" defer></script>

<div class="post-editor-shell">
    <form method="post" action="{{ url_for('blog.save_image') }}" id="postForm" class="post-editor-form"
        enctype="multipart/form-data">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <header class="post-editor-header">
            <div>
                <p class="editor-kicker">AstroSpace library</p>
                <h1>{{ 'Edit' if is_edit else 'Create' }} post</h1>
                <p>Keep the story, acquisition data, and gear for this image in one place.</p>
            </div>
            {% if is_edit %}
            <span class="editor-status">Saved image</span>
            {% endif %}
        </header>

        {% if is_edit %}
        <input type="hidden" name="image_id" value="{{ image.id }}">
        {% endif %}

        <section class="editor-section">
            <div class="editor-section-heading">
                <div>
                    <p class="editor-kicker">Post details</p>
                    <h2>Tell the story</h2>
                </div>
                <p>Use a recognisable target name, then add a concise summary and the details worth sharing.</p>
            </div>
            <div class="editor-field-grid">
                <div class="editor-field editor-field--wide">
                    <label for="postTitle">Title</label>
                    <input id="postTitle" name="title" type="text" value="{{ image.title if is_edit else '' }}" required
                        class="input_container" placeholder="e.g. NGC 7000" />
                </div>
                <div class="editor-field editor-field--wide">
                    <label for="postSummary">Short description</label>
                    <input id="postSummary" name="short_description" type="text" value="{{ image.short_description if is_edit else '' }}"
                        required class="input_container" placeholder="A one-line overview displayed beside the title" />
                </div>
                <div class="editor-field editor-field--full">
                    <label for="postDescription">Description</label>
                    <textarea id="postDescription" name="description" required class="input_container"
                        placeholder="What made this capture special?">{{ image.description if is_edit else '' }}</textarea>
                </div>
            </div>
        </section>

        <section class="editor-section editor-section--assets space-y-4">
            <div class="editor-section-heading">
                <div>
                    <p class="editor-kicker">Files & analysis</p>
                    <h2>Source material</h2>
                </div>
                <p>Add optional source files only when you want to replace or extend the existing record.</p>
            </div>
            <div class="editor-assets-row">
                <section class="flex min-w-[260px] flex-1 flex-col rounded-xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/40">
                    <label class="label block text-sm font-medium text-gray-700 dark:text-gray-300">Upload Image</label>
                    {% if is_edit %}
                    <div class="mt-2 space-y-3">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">Current image</p>
                            <input type="text" name="prev_img"
                                value="{{ image.image_path if image.image_path else '' }}"
                                class="input_container mt-2 w-full truncate"
                                readonly />
                        </div>

                        <div class="flex flex-col gap-2 text-sm text-gray-700 dark:text-gray-300">
                            <label class="inline-flex items-center">
                                <input type="checkbox" id="redo_plate_solve" name="redo_plate_solve"
                                    class="form-checkbox h-4 w-4 text-blue-600 rounded mr-2">
                                Redo Plate Solving
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" id="regenerate_overlays" name="regenerate_overlays"
                                    class="form-checkbox h-4 w-4 text-blue-600 rounded mr-2">
                                Regenerate Overlays
                            </label>
                        </div>
                    </div>
                    {% endif %}

                    <input name="image_path" type="file" accept=".png,.jpg,.jpeg"
                        class="mt-4 block w-full text-sm text-gray-500
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-full file:border-0
                        file:text-sm file:font-semibold
                        file:bg-blue-50 file:text-blue-700
                        hover:file:bg-blue-100"
                        {% if not is_edit %} required {% endif %} />
                    <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">Upload the preview image shown on the post.</p>
                </section>

                <section class="flex min-w-[260px] flex-1 flex-col rounded-xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/40">
                    <label class="label block text-sm font-medium text-gray-700 dark:text-gray-300">Upload FITS/XISF</label>
                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Use a plate-solved FITS/XISF with the same dimensions as the preview image so annotations line up correctly.</p>
                    <input name="fits_file" type="file" accept=".fits,.fit,.xisf"
                        class="mt-4 block w-full text-sm text-gray-500
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-full file:border-0
                        file:text-sm file:font-semibold
                        file:bg-blue-50 file:text-blue-700
                        hover:file:bg-blue-100"
                        {% if not is_edit %} required {% endif %} />
                </section>

                <section class="flex min-w-[260px] flex-1 flex-col rounded-xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/40">
                    <label class="label block text-sm font-medium text-gray-700 dark:text-gray-300">Upload Starless Image</label>
                    <input type="hidden" name="prev_starless_img" value="{{ image.starless_image_path if is_edit and image.starless_image_path else '' }}">
                    {% if is_edit and image.starless_image_path %}
                    <div class="mt-2">
                        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">Current starless image</p>
                        <input type="text"
                            value="{{ image.starless_image_path }}"
                            class="input_container mt-2 w-full truncate"
                            readonly />
                    </div>
                    {% endif %}
                    <input name="starless_image_path" type="file" accept=".png,.jpg,.jpeg"
                        class="mt-4 block w-full text-sm text-gray-500
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-full file:border-0
                        file:text-sm file:font-semibold
                        file:bg-blue-50 file:text-blue-700
                        hover:file:bg-blue-100" />
                    <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">Optional alternate render used for the starless toggle on the image detail page.</p>
                </section>

                <section class="flex min-w-[260px] flex-1 flex-col rounded-xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/40">
                    <label class="label block text-sm font-medium text-gray-700 dark:text-gray-300">Upload Annotated Image</label>
                    <input type="hidden" name="prev_annotated_img" value="{{ image.annotated_image_path if is_edit and image.annotated_image_path else '' }}">
                    {% if is_edit and image.annotated_image_path %}
                    <div class="mt-2">
                        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">Current annotated image</p>
                        <input type="text"
                            value="{{ image.annotated_image_path }}"
                            class="input_container mt-2 w-full truncate"
                            readonly />
                    </div>
                    {% endif %}
                    <input name="annotated_image_path" type="file" accept=".svg,.png,.jpg,.jpeg"
                        class="mt-4 block w-full text-sm text-gray-500
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-full file:border-0
                        file:text-sm file:font-semibold
                        file:bg-blue-50 file:text-blue-700
                        hover:file:bg-blue-100" />
                    <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">Optional JPG, PNG, or transparent SVG annotation. SVG objects are interactive; no automatic object overlay is generated when supplied.</p>
                </section>

                <section class="flex min-w-[320px] flex-[1_1_420px] flex-col rounded-xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/40">
                    <label class="label block text-sm font-medium text-gray-700 dark:text-gray-300">Upload Other Related Media</label>
                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Add supporting images or browser-friendly videos. Captions are shown below the media viewer.</p>
                    <input id="relatedMediaInput" name="related_media_files" type="file" multiple
                        accept=".jpg,.jpeg,.png,.webp,.gif,.mp4,.webm,.ogg"
                        class="mt-4 block w-full text-sm text-gray-500
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-full file:border-0
                        file:text-sm file:font-semibold
                        file:bg-blue-50 file:text-blue-700
                        hover:file:bg-blue-100" />
                    <input type="hidden" name="related_media_store" id="relatedMediaStore" value='{{ related_media_json | safe }}'>

                    <div class="mt-4 overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
                        <table id="relatedMediaTable" class="min-w-full text-sm">
                            <thead class="bg-gray-50 text-left text-gray-700 dark:bg-gray-800 dark:text-gray-200">
                                <tr>
                                    <th class="px-3 py-2 font-semibold">Image Added</th>
                                    <th class="px-3 py-2 font-semibold">Caption</th>
                                    <th class="px-3 py-2 font-semibold"></th>
                                </tr>
                            </thead>
                            <tbody id="relatedMediaTableBody" class="divide-y divide-gray-200 dark:divide-gray-700"></tbody>
                        </table>
                    </div>
                </section>
            </div>

            <div id="lightFramesContainer" class="my-4">
                <label class="label block text-sm font-medium text-gray-700 dark:text-gray-300 mt-4">
                    <p>Upload WBPP log file from Pixinsight [optional]</p>
                </label>
                <div class="flex space-x-2 items-center">
                    <input id="wbppLogInput" name="wbpp_log_file" type="file" accept=".log" class="editor-source-file-input block w-full text-sm
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-full file:border-0
                        file:text-sm file:font-semibold
                        file:bg-blue-50 file:text-blue-700
                        hover:file:bg-blue-100"/>
                    <button id="clearWbppFile" type="button" class="editor-source-clear-button" disabled>
                        Clear selected log
                    </button>
                </div>
                <div id="wbppExtractionStatus" class="editor-source-status mt-2" aria-live="polite" hidden></div>
                <button id="clearWbppData" type="button" class="editor-source-clear-button mt-2" hidden>
                    Clear extracted WBPP data
                </button>

                <label class="label block text-sm font-medium text-gray-700 dark:text-gray-300 mt-4">
                    <p>Extract Metadata from Light Frames [optional]</p>
                </label>

                <div id="lightFramesInputs" class="space-y-2">
                    <div class="light-frame-input-row flex space-x-2 items-center">
                        <input
                            type="file"
                            id="lightFramesInput"
                            multiple
                            accept=".fits,.fit,.xisf"
                            class="light-frame-input editor-source-file-input flex-1 text-sm
                                file:mr-4 file:py-2 file:px-4
                                file:rounded-full file:border-0
                                file:text-sm file:font-semibold
                                file:bg-blue-50 file:text-blue-700
                                hover:file:bg-blue-100"
                        />
                        <button type="button" class="clear-light-frame-selection editor-source-clear-button" disabled>
                            Clear selected files
                        </button>
                    </div>
                </div>
                <div class="mt-2 flex flex-wrap items-center gap-2">
                    <button
                        id="addLightFramesInput"
                        type="button"
                        class="editor-source-add-button"
                        aria-label="Add another light-frame file picker"
                        title="Add another light-frame file picker"
                    >
                        +
                    </button>
                    <button
                        id="analyseLightsBtn"
                        type="button"
                        class="editor-source-extract-button"
                    >
                        Extract FITS metadata
                    </button>
                </div>
                <div id="lightFrameSelectionStatus" class="editor-source-selection-status mt-2" hidden></div>
                <div id="lightFrameExtractionStatus" class="editor-source-status mt-2" aria-live="polite" hidden></div>
                <button id="clearLightMetadata" type="button" class="editor-source-clear-button mt-2" hidden>
                    Clear extracted light-frame metadata
                </button>
                <input type="hidden" name="meta_store" id="meta_store_input" value="" />
            </div>

            <details class="mt-4 border rounded text-gray-700 dark:text-gray-300">
                <summary class="cursor-pointer px-3 py-2 font-semibold text-gray-700 dark:text-white">Constant Keywords</summary>
                <div class="border-t max-h-96 overflow-y-auto text-gray-700 dark:text-gray-300">
                <table id="constantsTable" class="min-w-full text-sm border-collapse">
                    <thead class="sticky top-0 bg-gray-100 text-black dark:bg-slate-800 dark:text-slate-100">
                        <tr>
                            <th class="border px-2 py-1 text-left">Keyword</th>
                            <th class="border px-2 py-1 text-left">Value</th>
                            <th class="border px-2 py-1 text-left">Comment</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                </div>
            </details>

            <details class="mt-4 border rounded text-gray-700 dark:text-gray-300">
                <summary class="cursor-pointer px-3 py-2 font-semibold text-gray-700 dark:text-gray-300">Variable Keywords</summary>
                <div class="border-t max-h-96 overflow-y-auto text-gray-700 dark:text-gray-300">
                <table id="variablesTable" class="min-w-full text-sm border-collapse">
                    <thead class="sticky top-0 bg-gray-100 dark:bg-slate-800 dark:text-slate-100"></thead>
                    <tbody></tbody>
                </table>
                </div>
            </details>
        </section>

        <!-- Location Row -->
        <section class="editor-section">
            <div class="editor-section-heading">
                <div>
                    <p class="editor-kicker">Session context</p>
                    <h2>Where & how</h2>
                </div>
                <p>Location and guide logs keep the technical context with the image.</p>
            </div>
            <div class="editor-location-grid">
                <div class="w-64 flex-auto ...">
                    <label class="label">Location</label>
                    <input name="location" id="locationInput" class="input_container"
                        value="{{ image.location if is_edit else '' }}" required />
                </div>

                <div class="w-36 flex-none ...">
                    <label class="label">Latitude</label>
                    <input name="location_latitude" id="location_lat" class="input_container"
                        value="{{ image.location_latitude if is_edit else '' }}" />
                </div>

                <div class="w-36 flex-none ...">
                    <label class="label">Longitude</label>
                    <input name="location_longitude" id="location_lng" class="input_container"
                        value="{{ image.location_longitude if is_edit else '' }}" />
                </div>

                <div class="w-36 flex-none ...">
                    <label class="label">Elevation</label>
                    <input name="location_elevation" id="location_elev" class="input_container"
                        value="{{ image.location_elevation if is_edit else '' }}" />
                </div>
            </div>

        <!-- Guide Log -->
        <div x-data="{ logs: '{{ image.guide_log if is_edit and image.guide_log else '' }}' }" class="editor-subsection editor-guide-logs">
            <div class="editor-subsection-heading">
                <div>
                    <h3>Guide logs</h3>
                    <p>Keep the optional PHD2 files with this session, or rebuild the existing graphs.</p>
                </div>
            </div>
            {% if is_edit %}
            <label class="label block text-sm font-medium text-gray-700 dark:text-gray-300">Current Guide Logs</label>

            <template x-if="logs">
                <div
                    class="flex items-center justify-between bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded text-sm text-gray-700 dark:text-gray-300">
                    <input type="text" x-model="logs" name="prev_guide_logs" class="w-full truncate" readonly />
                </div>
            </template>

            <!-- Redo Graphs -->
            <label class="inline-flex items-center mt-2 text-sm text-gray-700 dark:text-gray-300">
                <input type="checkbox" name="redo_graphs" class="form-checkbox h-4 w-4 text-blue-600 rounded mr-2">
                Redo Guiding Graphs
            </label>
            {% endif %}

            <label class="label block text-sm font-medium text-gray-700 dark:text-gray-300 mt-4">Upload Guide
                Logs</label>
            <input name="guide_logs" type="file" multiple accept=".txt" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-full file:border-0
        file:text-sm file:font-semibold
        file:bg-blue-50 file:text-blue-700
        hover:file:bg-blue-100" />
        </div>
        </section>

        <section class="editor-section">
            <div class="editor-section-heading">
                <div>
                    <p class="editor-kicker">Acquisition</p>
                    <h2>Capture details</h2>
                </div>
                <p>Record the observing dates and the light-frame settings behind the final image.</p>
            </div>
            <div class="editor-date-grid">
                <div class="editor-field">
                    <label for="createdAt">Created on</label>
                    <input id="createdAt" type="date" class="input_container" name="created_at"
                        value="{% if is_edit %}{{ image.created_at.strftime('%Y-%m-%d') }}{% else %}{{ now().date() }}{% endif %}">
                </div>
                <div class="editor-field">
                    <label for="datePicker">Capture dates</label>
                    <div class="editor-inline-action">
                        <input type="date" id="datePicker" class="input_container">
                        <button type="button" class="editor-add-button" id="addDateBtn">Add date</button>
                    </div>
                    <ul id="dateList" class="editor-date-list"></ul>
                    <input type="hidden" name="capture_dates" id="captureDates">
                </div>
            </div>
            <div class="editor-subsection">
                <div class="editor-subsection-heading">
                    <div>
                        <h3>Image lights</h3>
                        <p>One row per filter and exposure setup.</p>
                    </div>
                    <button type="button" class="editor-add-button" id="addLightBtn">Add light</button>
                </div>
                <div class="editor-table-scroll">
                    <table id="lightsTable" class="editor-lights-table">
                        <thead id="lightsHeader">
                            <tr>
                                <th>Filter</th>
                                <th>Frames</th>
                                <th>Exposure</th>
                                <th>Gain</th>
                                <th>Offset</th>
                                <th>Temp (°C)</th>
                                <th><span class="sr-only">Actions</span></th>
                            </tr>
                        </thead>
                        <tbody id="lightsContainer" {% if not is_edit %} required {% endif %}></tbody>
                    </table>
                </div>
            </div>
        </section>

        <section class="editor-section">
            <div class="editor-section-heading">
                <div>
                    <p class="editor-kicker">Optical train</p>
                    <h2>Equipment</h2>
                </div>
                <p>Select the components used for this image. Optional equipment can stay set to None.</p>
            </div>
            <div class="editor-equipment-layout">
        <div class="gap-4 flex ">
            <div class="w-64 flex-auto ">
                <label class="label">Camera</label>
                <select name="camera_id" class="input_container">
                    {% for c in camera %}
                    <option value="{{ c.id }}" {{'selected' if c.id == equipment.get('camera') else '' }}>{{ c.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="w-64 flex-auto ">
                <label class="label">Guide Camera</label>
                <select name="guide_camera_id" class="input_container">
                    {% for c in camera if c.id > 1 %}
                    <option value="{{ c.id }}" {{'selected' if c.id == equipment.get('guide_camera') else '' }}>
                        {{ c.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="w-64 flex-auto ">
                <label class="label">Rotator</label>
                <select name="rotator_id" class="input_container">
                    <option value="0" {{ 'selected' if not equipment.get('rotator') else '' }}>None</option>
                    {% for r in rotator %}
                    <option value="{{ r.id }}" {{'selected' if r.id == equipment.get('rotator') else '' }}>
                        {{ r.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="gap-4 flex ">
            <div class="w-64 flex-auto ">
                <label class="label">Telescope</label>
                <select name="telescope_id" class="input_container">
                    {% for t in telescope %}
                    <option value="{{ t.id }}" {{'selected' if t.id == equipment.get('telescope') else '' }}>
                        {{ t.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="w-64 flex-auto ...">
                <label class="label">Reducer</label>
                <select name="reducer_id" class="input_container">
                    {% for r in reducer %}
                    <option value="{{ r.id }}" {{'selected' if r.id == equipment.get('reducer') else '' }}>{{ r.name }}
                    </option>
                    {% endfor %}
                    <option value="0" {{ 'selected' if not equipment.get('reducer') else '' }}>None</option>
                </select>
            </div>

            <div class="w-64 flex-auto">
                <label class="label">Guider</label>
                <select name="guider_id" class="input_container">
                    {% for g in guider %}
                    <option value="{{ g.id }}" {{'selected' if g.id == equipment.get('guider') else '' }}>{{ g.name }}
                    </option>
                    {% endfor %}
                    <option value="0" {{ 'selected' if not equipment.get('guider') else '' }}>None</option>
                </select>
            </div>
        </div>

        <div class="gap-4 flex ">
            <div class="w-64 flex-auto ">
                <label class="label">Mount</label>
                <select name="mount_id" class="input_container">
                    {% for m in mount %}
                    <option value="{{ m.id }}" {{'selected' if m.id == equipment.get('mount') else '' }}>{{ m.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="w-64 flex-auto">
                <label class="label">Tripod</label>
                <select name="tripod_id" class="input_container">
                    {% for t in tripod %}
                    <option value="{{ t.id }}" {{'selected' if t.id == equipment.get('tripod') else '' }}>{{ t.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="w-64 flex-auto">
                <label class="label">Flat Panel</label>
                <select name="flat_panel_id" class="input_container">
                    {% for p in flat_panel %}
                    <option value="{{ p.id }}" {{'selected' if p.id == equipment.get('flat_panel') else '' }}>
                        {{ p.name }}
                    </option>
                    {% endfor %}
                    <option value="0" {{ 'selected' if not equipment.get('flat_panel') else '' }}>None</option>
                </select>
            </div>
        </div>

        <div class="gap-4 flex">
            <div class="w-64 flex-auto">
                <label class="label">Filter Wheel</label>
                <select name="filter_wheel_id" class="input_container">
                    {% for f in filter_wheel %}
                    <option value="{{ f.id }}" {{'selected' if f.id == equipment.get('filter_wheel') else '' }}>
                        {{ f.name }}
                    </option>
                    {% endfor %}
                    <option value="0" {{ 'selected' if not equipment.get('filter_wheel') else '' }}>None</option>
                </select>
            </div>

            <div class="w-64 flex-auto ...">
                <label class="label">EAF</label>
                <select name="eaf_id" class="input_container">
                    {% for e in eaf %}
                    <option value="{{ e.id }}" {{'selected' if e.id == equipment.get('eaf') else '' }}>{{ e.name }}
                    </option>
                    {% endfor %}
                    <option value="0" {{ 'selected' if not equipment.get('eaf') else '' }}>None</option>
                </select>
            </div>

            <div class="w-64 flex-auto ...">
                <label class="label">Dew Heater</label>
                <select name="dew_heater_id" class="input_container">
                    {% for d in dew_heater %}
                    <option value="{{ d.id }}" {{'selected' if d.id == equipment.get('dew_heater') else '' }}>
                        {{ d.name }}
                    </option>
                    {% endfor %}
                    <option value="0" {{ 'selected' if not equipment.get('dew_heater') else '' }}>None</option>
                </select>
            </div>
        </div>
            </div>
        </section>

        <section class="editor-section editor-section--software">
            <div class="editor-section-heading">
                <div>
                    <p class="editor-kicker">Workflow</p>
                    <h2>Software used</h2>
                </div>
                <p>Tick every application that played a part in this capture or processing workflow.</p>
            </div>
            <fieldset class="software-checkbox-grid">
                <legend class="sr-only">Software used</legend>
                {% for s in softwares %}
                <label class="software-choice" for="software-{{ s.id }}">
                    <input id="software-{{ s.id }}" name="software_ids" type="checkbox" value="{{ s.id }}"
                        {{'checked' if s.id in software_list else '' }}>
                    <span>{{ s.name }}</span>
                </label>
                {% endfor %}
            </fieldset>
        </section>

        <footer class="post-editor-actions">
            <p>Changes are applied to this post when you save.</p>
            <button class="editor-save-button" type="submit">{{ "Save changes" if is_edit else "Create post" }}</button>
        </footer>
    </form>

    <script type="module">
        import { bindLocationInput, metaStore, restoreMetadata,
         bindLightFramesAnalyse } from "{{ static_asset_url('js/binds.js') }}";
        import * as fitsUtils from "{{ url_for('static', filename='js/fitsUtils.js') }}";

        const input_container_style = `w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500`;

        let dates = {{ capture_dates| safe }};
        const initialRelatedMedia = {{ related_media_json | safe }};
        const savedMetadata = {{ metadata|tojson }};

        // If dates is empty, initialize with today's date
        if (!dates || dates.length === 0) {
            const today = new Date();
            const yyyy = today.getFullYear();
            const mm = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-based
            const dd = String(today.getDate()).padStart(2, '0');
            dates = [`${yyyy}-${mm}-${dd}`]; // format as YYYY-MM-DD
        }

        function renderDateList() {
            const list = document.getElementById('dateList');
            list.innerHTML = '';
            dates.forEach((date, index) => {
                const li = document.createElement('li');
                li.className = input_container_style
                li.innerHTML = `
            <div class="flex justify-between items-center w-full">
                <span>${date}</span>
                <button 
                type="button" 
                class="remove-date ml-2 inline-flex items-center px-2 py-1 text-xs font-medium text-red-600 bg-red-100 hover:bg-red-200 rounded" 
                data-index="${index}">
                Remove
                </button>
            </div>
            `;
                list.appendChild(li);
            });

            // Update hidden input with JSON string
            document.getElementById('captureDates').value = JSON.stringify(dates);
        }

        const relatedMediaInput = document.getElementById("relatedMediaInput");
        const relatedMediaStoreInput = document.getElementById("relatedMediaStore");
        const relatedMediaTableBody = document.getElementById("relatedMediaTableBody");
        const relatedMediaFiles = new Map();
        let relatedMediaSeq = 0;
        let relatedMediaRows = (Array.isArray(initialRelatedMedia) ? initialRelatedMedia : []).map((item) => ({
            id: `existing-${++relatedMediaSeq}`,
            existingPath: item.existing_path || item.media_path || "",
            displayName: item.display_name || (item.existing_path || item.media_path || "").split("/").pop() || "Saved media",
            caption: item.caption || "",
        }));

        function syncRelatedMediaInput() {
            const dataTransfer = new DataTransfer();
            relatedMediaRows.forEach((row) => {
                if (!row.existingPath) {
                    const file = relatedMediaFiles.get(row.id);
                    if (file) {
                        dataTransfer.items.add(file);
                    }
                }
            });
            relatedMediaInput.files = dataTransfer.files;
        }

        function syncRelatedMediaStore() {
            relatedMediaStoreInput.value = JSON.stringify(
                relatedMediaRows.map((row) => ({
                    existing_path: row.existingPath || "",
                    caption: row.caption || "",
                }))
            );
        }

        function renderRelatedMediaRows() {
            relatedMediaTableBody.innerHTML = "";

            if (relatedMediaRows.length === 0) {
                const emptyRow = document.createElement("tr");
                emptyRow.innerHTML = `
                    <td colspan="3" class="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                        No related media added yet.
                    </td>
                `;
                relatedMediaTableBody.appendChild(emptyRow);
                syncRelatedMediaStore();
                syncRelatedMediaInput();
                return;
            }

            relatedMediaRows.forEach((row) => {
                const tr = document.createElement("tr");
                tr.dataset.mediaId = row.id;
                tr.className = "align-top";
                const nameCell = document.createElement("td");
                nameCell.className = "px-3 py-2 text-gray-700 dark:text-gray-200";
                nameCell.textContent = row.displayName;

                const captionCell = document.createElement("td");
                captionCell.className = "px-3 py-2";
                const captionInput = document.createElement("input");
                captionInput.type = "text";
                captionInput.value = row.caption;
                captionInput.className = `${input_container_style} related-media-caption`;
                captionInput.dataset.mediaId = row.id;
                captionInput.placeholder = "Optional caption";
                captionCell.appendChild(captionInput);

                const actionCell = document.createElement("td");
                actionCell.className = "px-3 py-2 text-right";
                const removeButton = document.createElement("button");
                removeButton.type = "button";
                removeButton.className = "related-media-remove inline-flex items-center px-2 py-1 text-xs font-medium text-red-600 bg-red-100 hover:bg-red-200 rounded";
                removeButton.dataset.mediaId = row.id;
                removeButton.textContent = "Remove";
                actionCell.appendChild(removeButton);

                tr.appendChild(nameCell);
                tr.appendChild(captionCell);
                tr.appendChild(actionCell);
                relatedMediaTableBody.appendChild(tr);
            });

            syncRelatedMediaStore();
            syncRelatedMediaInput();
        }

        document.getElementById('addDateBtn').onclick = () => {
            const d = document.getElementById('datePicker').value;
            if (d && !dates.includes(d)) {
                dates.push(d);
                renderDateList();
            }
        };

        // Remove date handler using event delegation
        document.getElementById('dateList').addEventListener('click', (e) => {
            if (e.target.classList.contains('remove-date')) {
                const index = parseInt(e.target.dataset.index);
                if (!isNaN(index)) {
                    dates.splice(index, 1);
                    renderDateList();
                }
            }
        });

        let idx = 0;
        const existingLights = {{ lights_json | safe }};

        function addLight(light = {}) {
            const container = document.getElementById('lightsContainer');
            const row = document.createElement('tr');
            row.dataset.idx = idx;

            // Create a temporary wrapper to insert filter options and preselect the value
            const selectHTML = `{{ filter_options | safe }}`;
            const parser = new DOMParser();
            const doc = parser.parseFromString(`<select>${selectHTML}</select>`, 'text/html');
            const select = doc.querySelector('select');
            select.name = `filter_${idx}`;
            select.className = input_container_style;


            row.innerHTML = `
                <td class="pr-4 align-top">${select.outerHTML}</td>
                <td class="pr-4 align-top"><input name="count_${idx}" type="number" step="1" placeholder="Frames" aria-label="Frames" class="${input_container_style}" value="${light.light_count || '10'}" required></td>
                <td class="pr-4 align-top"><input name="exposure_${idx}" type="number" step="1" placeholder="Exposure (s)" aria-label="Exposure (s)" class="${input_container_style}" value="${light.exposure_time || '300'}" required></td>
                <td class="pr-4 align-top"><input name="gain_${idx}" type="number" step="1" placeholder="Gain" aria-label="Gain" class="${input_container_style}" value="${light.gain || '101'}"></td>
                <td class="pr-4 align-top"><input name="offset_${idx}" type="number" step="1" placeholder="Offset" aria-label="Offset" class="${input_container_style}" value="${light.offset_cam || '200'}"></td>
                <td class="pr-4 align-top"><input name="temperature_${idx}" type="number" step="1" placeholder="Temp (C)" aria-label="Temp (C)" class="${input_container_style}" value="${light.temperature || '-10'}"></td>
                <td class="align-top"><button type="button" class="remove-light mt-1 inline-flex items-center px-2 py-1 text-xs font-medium text-red-600 bg-red-100 hover:bg-red-200 rounded">Remove</button></td>
            `;
            container.appendChild(row);
            if (light.cam_filter) {
                row.querySelector("select").value = light.cam_filter;
            }

            idx++;
        }

        document.getElementById('addLightBtn').onclick = () => addLight();

        // Remove row handler using event delegation
        document.getElementById('lightsContainer').addEventListener('click', (e) => {
            if (e.target.classList.contains('remove-light')) {
                e.target.closest('tr').remove();
            }
        });

        document.addEventListener('DOMContentLoaded', function () {
            renderDateList();
            if (existingLights.length === 0) {
                addLight(); // start with one empty row
            } else {
            existingLights.forEach(addLight); // prefill
            }

            bindLocationInput();
            const prepareMetadataForSave = bindLightFramesAnalyse() || (async () => {});
            restoreMetadata(savedMetadata);
            renderRelatedMediaRows();

            const redo = document.getElementById("redo_plate_solve");
            const regen = document.getElementById("regenerate_overlays");

            if (redo && regen) {
                redo.addEventListener("change", () => {
                    if (redo.checked) {
                        regen.checked = true;
                        regen.disabled = true;
                    } else {
                        regen.disabled = false;
                    }
                });
            }

            relatedMediaInput.addEventListener("change", (event) => {
                Array.from(event.target.files || []).forEach((file) => {
                    const rowId = `new-${++relatedMediaSeq}`;
                    relatedMediaFiles.set(rowId, file);
                    relatedMediaRows.push({
                        id: rowId,
                        existingPath: "",
                        displayName: file.name,
                        caption: "",
                    });
                });
                renderRelatedMediaRows();
            });

            relatedMediaTableBody.addEventListener("input", (event) => {
                if (!event.target.classList.contains("related-media-caption")) {
                    return;
                }

                const row = relatedMediaRows.find((item) => item.id === event.target.dataset.mediaId);
                if (!row) {
                    return;
                }

                row.caption = event.target.value;
                syncRelatedMediaStore();
            });

            relatedMediaTableBody.addEventListener("click", (event) => {
                if (!event.target.classList.contains("related-media-remove")) {
                    return;
                }

                const mediaId = event.target.dataset.mediaId;
                relatedMediaRows = relatedMediaRows.filter((item) => item.id !== mediaId);
                relatedMediaFiles.delete(mediaId);
                renderRelatedMediaRows();
            });

            const labelStyle = document.querySelectorAll('.label');
            labelStyle.forEach(link => {
                link.className = 'block text-sm font-medium mb-1 text-gray-700 dark:text-gray-200';
            });

            const inputStyle = document.querySelectorAll('.input_container');
            inputStyle.forEach(link => {
                link.className = input_container_style;
            });

            const form = document.querySelector("#postForm"); // or give your form an id
            const fitsInput = document.querySelector("input[name='fits_file']");

            const saveButton = form.querySelector(".editor-save-button");
            const savePayloadLimit = 2 * (1024 ** 3);
            const multipartOverheadAllowance = 1024 * 1024;

            function formatFileSize(bytes) {
                if (!Number.isFinite(bytes)) return "unknown size";
                if (bytes < 1024) return `${bytes} B`;
                const units = ["KB", "MB", "GB", "TB"];
                let value = bytes;
                let unitIndex = -1;
                do {
                    value /= 1024;
                    unitIndex += 1;
                } while (value >= 1024 && unitIndex < units.length - 1);
                return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`;
            }

            form.addEventListener("submit", async function (e) {
                e.preventDefault();

                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                if (saveButton) {
                    saveButton.dataset.idleLabel = saveButton.dataset.idleLabel || saveButton.textContent.trim();
                    saveButton.classList.add("is-saving");
                    saveButton.setAttribute("aria-busy", "true");
                    saveButton.disabled = true;
                    saveButton.textContent = "Saving changes…";
                }

                try {
                    await prepareMetadataForSave();

                    const lightFramesInputs = document.querySelectorAll(".light-frame-input");
                    const wbppLogInput = document.getElementById("wbppLogInput");
                    const file = fitsInput?.files?.[0];
                    const ext = file?.name.toLowerCase() || "";
                    const isEditing = Boolean(form.querySelector("input[name='image_id']")?.value);
                    const previewInput = form.querySelector("input[name='image_path']");
                    const hasNewPreview = Boolean(previewInput?.files?.length);
                    const redoPlateSolve = Boolean(form.querySelector("input[name='redo_plate_solve']")?.checked);
                    // On an edit, a FITS selected only for light-frame extraction is not a
                    // save input. The existing WCS is reused unless the preview is replaced
                    // or the user explicitly requests a new plate solve.
                    const needsFitsHeaderForSave = !isEditing || hasNewPreview || redoPlateSolve;
                    let headerBytes;
                    let newName;

                    if (file && !(ext.endsWith(".xisf") || ext.endsWith(".fits") || ext.endsWith(".fit"))) {
                        throw new Error("The selected FITS image must have a .fits, .fit, or .xisf extension.");
                    }

                    if (file && needsFitsHeaderForSave) {
                        if (ext.endsWith(".xisf")) {
                            headerBytes = await fitsUtils.readXISFHeader(file);
                            newName = file.name + ".header.xisf";
                        } else {
                            headerBytes = await fitsUtils.readFITSHeader(file);
                            newName = file.name + ".header.fits";
                        }
                    }

                    // Optional source files have already been extracted into meta_store.
                    lightFramesInputs.forEach((input) => { input.value = ""; });
                    if (wbppLogInput) wbppLogInput.value = "";

                    // Never send the full primary image in the save request. The server only needs
                    // the compact header extracted above, which avoids 413 errors for large FITS files.
                    if (fitsInput) fitsInput.value = "";

                    // Build the save payload from an explicit file allowlist. This keeps any
                    // extraction-only source file out even if a browser retains its FileList.
                    const rawFormData = new FormData(form);
                    const formData = new FormData();
                    const allowedSaveFileFields = new Set([
                        "image_path",
                        "starless_image_path",
                        "annotated_image_path",
                        "related_media_files",
                        "guide_logs",
                    ]);
                    for (const [name, value] of rawFormData.entries()) {
                        if (typeof value === "string") {
                            formData.append(name, value);
                        } else if (allowedSaveFileFields.has(name) && value.name) {
                            formData.append(name, value, value.name);
                        }
                    }
                    formData.delete("fits_file");
                    formData.delete("wbpp_log_file");
                    lightFramesInputs.forEach((input) => {
                        if (input.name) formData.delete(input.name);
                    });
                    if (headerBytes) {
                        formData.set(
                            "fits_file",
                            new Blob([headerBytes], { type: "application/octet-stream" }),
                            newName
                        );
                    }

                    const outgoingFiles = Array.from(formData.entries())
                        .filter(([, value]) => typeof value !== "string" && value.name)
                        .map(([name, value]) => ({ name, filename: value.name, size: value.size }));
                    const outgoingFileBytes = outgoingFiles.reduce((total, item) => total + (item.size || 0), 0);
                    const outgoingFileSummary = outgoingFiles.length
                        ? outgoingFiles
                            .map((item) => `${item.name}=${item.filename} (${formatFileSize(item.size)})`)
                            .join(", ")
                        : "no file uploads";

                    // FormData adds multipart boundaries on top of the file bytes. Stop
                    // before a request that Flask will reject, and identify the real file
                    // responsible instead of blaming the extraction-only FITS picker.
                    if (outgoingFileBytes + multipartOverheadAllowance > savePayloadLimit) {
                        throw new Error(
                            `Save payload is too large (${formatFileSize(outgoingFileBytes)} of files): ${outgoingFileSummary}. ` +
                            "Remove or reduce the oversized save file and try again. Light-frame extraction files are not included."
                        );
                    }
                    console.debug("Save file payload", outgoingFiles);

                    const response = await fetch(form.action, {
                        method: form.method,
                        body: formData
                    });

                    if (response.redirected) {
                        window.location.href = response.url;
                        return;
                    }

                    if (!response.ok) {
                        if (response.status === 413) {
                            let serverMessage = "";
                            try {
                                const errorData = await response.json();
                                serverMessage = errorData.error || "";
                            } catch (_error) {
                                // Keep the client-side explanation when the response is not JSON.
                            }
                            throw new Error(
                                serverMessage ||
                                (`Save request is too large. Outgoing files: ${outgoingFileSummary}. ` +
                                    "The light-frame FITS files are excluded; remove or reduce the listed save file and try again.")
                            );
                        }
                        throw new Error("Failed to save the post.");
                    }

                    window.location.reload();
                } catch (error) {
                    alert(error.message || "Failed to save the post.");
                    if (saveButton) {
                        saveButton.classList.remove("is-saving");
                        saveButton.removeAttribute("aria-busy");
                        saveButton.disabled = false;
                        saveButton.textContent = saveButton.dataset.idleLabel || "Save changes";
                    }
                }
            });
        });

    </script>
</div>
{%endblock%}