    <%- include('header') %>

        <div class="form-container">
            <form method="POST" enctype="multipart/form-data" class="post-form">

                <h2>Create Post</h2>

                <input name="title" placeholder="Post title..." required />

                <textarea name="description" placeholder="What’s on your mind?"></textarea>

                <!-- Image Type -->
                <label>Image Type</label>
                <select name="image_type" id="imageType">
                    <option value="url">Image URL</option>
                    <option value="local">Upload Image</option>
                </select>

                <!-- URL Input -->
                <div id="urlInput">
                    <input type="text" name="image_url" id="imageUrl" placeholder="Paste image URL..." />
                </div>

                <!-- File Upload -->
                <div id="fileInput" style="display:none;">
                    <input type="file" name="image" id="imageFile" accept="image/*" />
                </div>

                <!-- Preview -->
                <div class="preview-box" style="display: none;">
                    <img id="preview" />
                </div>
                
                <div class="form-actions">
                    <a href="/posts" class="btn cancel">Cancel</a>
                    <button type="submit" class="btn submit">Post</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>
            /* Container */
            .form-container {
                display: flex;
                margin-top: 30px;
                justify-content: center;
            }

            /* Card Form */
            .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 0 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 spacing */
            @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') %>