    <%- include('header') %>

        <div class="form-container">
            <form method="POST" enctype="multipart/form-data" class="post-form">

                <h2>Edit Post</h2>

                <!-- Title -->
                <input name="title" value="<%= post.title %>" required />

                <!-- Description -->
                <textarea name="description"><%= post.description %></textarea>

                <!-- Image Type -->
                <label>Image Type</label>
                <select name="image_type" id="imageType">
                    <option value="url" <%=post.image_type==='url' ? 'selected' : '' %>>Image URL</option>
                    <option value="local" <%=post.image_type==='local' ? 'selected' : '' %>>Upload Image</option>
                </select>

                <!-- URL Input -->
                <div id="urlInput" style="<%= post.image_type === 'url' ? '' : 'display:none;' %>">
                    <input type="text" name="image_url" id="imageUrl" value="<%= post.image_url %>" />
                </div>

                <!-- File Upload -->
                <div id="fileInput" style="<%= post.image_type === 'local' ? '' : 'display:none;' %>">
                    <input type="file" name="image" id="imageFile" />
                </div>

                <!-- Preview -->
                <div class="preview-box" style="<%= post.image_url ? '' : 'display:none;' %>">
                    <img 
                        id="preview" 
                        src="<%= (post.image_type == 'local') 
                            ? '/uploads/posts/' + post.image_url 
                            : post.image_url %>" 
                    />
                </div>
                <!-- Actions -->
                <div class="form-actions">
                    <a href="/posts" class="btn cancel">Cancel</a>
                    <button type="submit" class="btn submit">Update</button>
                </div>

            </form>
        </div>

        <script>
            const imageType = document.getElementById("imageType");
            const urlInput = document.getElementById("urlInput");
            const fileInput = document.getElementById("fileInput");

            const imageUrl = document.getElementById("imageUrl");
            const imageFile = document.getElementById("imageFile");
            const preview = document.getElementById("preview");

            // Toggle Logic
            imageType.addEventListener("change", () => {
                if (imageType.value === "url") {
                    urlInput.style.display = "flex";
                    fileInput.style.display = "none";

                    imageFile.value = "";
                    preview.style.display = "none";
                } else {
                    urlInput.style.display = "none";
                    fileInput.style.display = "flex";

                    imageUrl.value = "";
                    preview.style.display = "none";
                }
            });

            // Preview for URL
            imageUrl.addEventListener("input", () => {
                if (imageUrl.value) {
                    preview.src = imageUrl.value;
                    preview.style.display = "flex";
                } else {
                    preview.style.display = "none";
                }
            });

            // Preview for File Upload
            imageFile.addEventListener("change", () => {
                const file = imageFile.files[0];
                if (file) {
                    preview.src = URL.createObjectURL(file);
                    preview.style.display = "flex";
                }
            });
        </script>

        <style>

            /* Center form */
            .form-container {
                display: flex;margin-top: 30px;
                justify-content: center;
            }

            /* Card */
            .post-form {
                background: #fff;
                width: 100%;
                max-width: 500px;
                padding: 20px;
                border-radius: 12px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .post-form h2 {
                margin: 0;
                margin-bottom: 10px;
            }
            
.post-form label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

/* Inputs */
.post-form input,
.post-form textarea,
.post-form select {
    width: 100%;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    transition: all 0.25s ease;
    background: #fff;
}

/* Focus effect */
.post-form input:focus,
.post-form textarea:focus,
.post-form select:focus {
    border-color: #0a66c2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
    outline: none;
}

/* Textarea */
.post-form textarea {
    min-height: 110px;
    resize: none;
}

/* Image Type Select spacing */
#urlInput,
#fileInput {
    transition: all 0.3s ease;
}

/* Preview */
.preview-box {
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px dashed #d1d5db;
    text-align: center;
    background: #f9fafb;
    justify-content: center;
}

.preview-box img {
    max-width: 100%;
    max-height: 220px;
    border-radius: 10px;
    object-fit: cover;
    transition: 0.3s;
}

    /* Buttons */
    .form-actions {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-top: 10px;
    }

    /* Common button */
    .btn {
        flex: 1;
        padding: 10px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        cursor: pointer;
        border: none;
        transition: all 0.3s ease;
    }

    /* Submit button */
    .submit {
        background: #0a66c2;
        color: #fff;
    }

    .submit:hover {
        background: #085bad;
    }

    /* Cancel button */
    .cancel {
        background: #f3f4f6;
        color: #374151;
    }

    .cancel:hover {
        background: #e5e7eb;
    }
            /* Mobile */
            @media (max-width: 480px) {
                .post-form {
                    padding: 15px;
                }
            }
        </style>
        <script>
            const previewBox = document.querySelector(".preview-box");

            // Toggle Logic
            imageType.addEventListener("change", () => {
                previewBox.style.display = "none";
                preview.style.display = "none";

                if (imageType.value === "url") {
                    urlInput.style.display = "flex";
                    fileInput.style.display = "none";
                    imageFile.value = "";
                } else {
                    urlInput.style.display = "none";
                    fileInput.style.display = "flex";
                    imageUrl.value = "";
                }
            });

            // Preview for URL
            imageUrl.addEventListener("input", () => {
                if (imageUrl.value) {
                    preview.src = imageUrl.value;
                    previewBox.style.display = "flex";
                } else {
                    previewBox.style.display = "none";
                }
            });

            // Preview for File Upload
            imageFile.addEventListener("change", () => {
                const file = imageFile.files[0];

                if (file) {
                    preview.src = URL.createObjectURL(file);
                    previewBox.style.display = "flex";
                } else {
                    previewBox.style.display = "none";
                }
            });
        </script>
<%- include('footer') %>