/* File: public_html/vto/css/style.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6; 
}

.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 15px; 
    box-sizing: border-box;
}

.container { /* Used for login form */
    background-color: #fff;
    padding: 20px; 
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

h2 {
    text-align: center;
    color: #333;
    margin-top: 0; 
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

input[type="text"],
input[type="password"],
textarea,
select,
input[type="number"] {
    width: 100%; 
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; 
    font-size: 16px; /* Slightly larger for mobile readability */
}
input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}
textarea {
    min-height: 80px; 
    resize: vertical; 
}

button[type="submit"], .button {
    width: 100%;
    padding: 12px 15px; 
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

button[type="submit"]:hover, .button:hover {
    background-color: #0056b3;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-bottom: 15px;
    text-align: center;
}

/* --- Main App Layout --- */
.app-container {
    display: flex;
    min-height: 100vh;
    width:100%;
}

.sidebar {
    width: 250px; 
    background-color: #343a40; 
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    flex-shrink: 0; 
    transition: width 0.3s ease, height 0.3s ease; 
}

.sidebar h3 {
    color: #fff;
    text-align: left;
    margin-top: 0;
    margin-bottom: 20px;
}

.sidebar nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar nav ul li a {
    color: #adb5bd; 
    text-decoration: none;
    display: block;
    padding: 10px 15px; 
    border-radius: 4px; 
    margin-bottom: 5px; 
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.sidebar nav ul li a:hover,
.sidebar nav ul li a.active { 
    color: #fff;
    background-color: #495057; 
}
.sidebar nav ul li hr {
    border-color: #495057;
    margin: 15px 0; 
}

.content {
    flex-grow: 1;
    padding: 20px;
    background-color: #f8f9fa; 
    overflow-y: auto; 
    box-sizing: border-box;
}

/* --- Image Preview & Upload (Consistent Styling) --- */
.image-preview-container { 
    cursor: pointer; 
    position: relative; 
    width: 256px; 
    height: 256px; 
    border: 2px dashed #ccc; 
    transition: border-color 0.3s ease, background-color 0.3s ease;
    display: flex; 
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    margin-top: 10px; 
    margin-bottom: 10px; 
    overflow: hidden; 
}
#fillMaskPreviewContainer.image-preview-container { /* Specific size for mask preview */
    width: 128px;
    height: 128px;
}

.image-preview-container.dragover {
    border-color: #007bff; 
    background-color: #e9f5ff; 
}

.image-preview-container img { 
    display: none; 
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
}

.image-preview-container span { 
    color: #777;
    text-align: center;
    padding: 10px;
}

.clear-preview-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(200, 0, 0, 0.6); 
    color: white;
    border: 1px solid rgba(150,0,0,0.7);
    border-radius: 50%;
    width: 24px; 
    height: 24px;
    font-weight: bold;
    cursor: pointer;
    display: none; 
    line-height: 22px; 
    text-align: center;
    font-size: 14px; 
    padding:0;
    z-index: 10; 
}
.image-preview-container img[src]:not([src="#"]):not([src=""]) ~ .clear-preview-btn { 
    display: inline-block;
}


/* --- Image Results Grid --- */
.image-grid {
    display: grid; /* Changed to grid for better responsive control */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Default for larger screens */
    gap: 15px; 
    margin-top: 20px;
}

.image-card, .history-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    /* width is now controlled by grid-template-columns */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    word-wrap: break-word; 
}

.image-card img, .history-card img {
    max-width: 100%;
    width: 100%; /* Make image take full width of card */
    height: auto;
    aspect-ratio: 1 / 1; /* Make images square-ish in cards by default */
    border-radius: 4px;
    margin-bottom: 10px;
    object-fit: cover; /* Cover the area, might crop a bit */
}
.history-card img {
    max-height: 150px; 
}

.card-actions button, .history-card button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 5px;
    font-size: 14px;
    width: auto; 
    margin-right: 5px; 
    margin-bottom: 5px; 
}
.card-actions button:hover, .history-card button:hover {
    background-color: #0056b3;
}

/* --- Modal Dialog --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); 
    padding: 20px; 
    box-sizing: border-box;
}

.modal-content { 
    margin: auto;
    display: block;
    width: auto; 
    max-width: 90%;
    max-height: 80vh; 
    object-fit: contain;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 25px; 
    color: #f1f1f1;
    font-size: 35px; 
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001;
}

.close-modal:hover,
.close-modal:focus {
    color: #bbb;
    text-decoration: none;
}

#modalCaption {
    margin: 15px auto 0 auto; 
    display: block;
    width: 90%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
}
#modalCaption p {
    margin-bottom: 15px; 
}
#modalCaption button {
     width: auto; 
     margin: 5px;
     padding: 10px 15px; 
}

/* --- Responsive Design --- */

/* Small tablets and large phones (e.g., > 600px) */
@media (min-width: 600px) {
     .container { /* For login page */
        padding: 30px;
    }
    /* .image-grid for 2 columns can be implicitly handled by auto-fill if screen is wide enough, 
       or you can set specific column counts here if needed. 
       minmax(200px, 1fr) means columns will be at least 200px wide. */
}

/* Tablets and small desktops (e.g., > 768px) - Sidebar appears */
@media (min-width: 768px) {
    .app-container {
        flex-direction: row; 
    }
    .sidebar {
        width: 220px; 
        height: 100vh; 
        position: sticky; 
        top: 0;
    }
    .content {
        padding: 30px; 
    }
    /* image-grid will adjust based on minmax and available space */
}

/* Larger desktops (e.g., > 992px) */
@media (min-width: 992px) {
    .sidebar {
        width: 250px; 
    }
    /* image-grid will create more columns if space allows */
}

/* For mobile phones (default, or max-width: 767px to override desktop styles) */
/* Styles outside media queries are mobile-first, these are overrides for smaller screens if needed,
   or specifics for the stacked layout */
@media (max-width: 767px) {
    .app-container {
        flex-direction: column; 
    }
    .sidebar {
        width: 100%; 
        height: auto; 
        position: static; 
        border-bottom: 2px solid #495057; 
    }
    .sidebar nav ul { /* Horizontal scrollable menu for mobile */
        display: flex; 
        overflow-x: auto; /* Allows horizontal scrolling */
        white-space: nowrap; /* Prevents wrapping of menu items */
        padding-bottom: 10px; /* Space for scrollbar if it appears */
        justify-content: flex-start; /* Align items to the start */
    }
    .sidebar nav ul li {
        margin: 0 5px; 
        flex-shrink: 0; /* Prevent items from shrinking */
    }
    .sidebar nav ul li a {
        padding: 8px 10px; 
    }
     .sidebar h3 {
        text-align: center; 
    }

    .content {
        padding: 15px; 
    }
    
    .image-preview-container, 
    #fillMaskPreviewContainer.image-preview-container { /* Ensure these also scale */
        width: 100%; /* Full width on mobile */
        max-width: 256px; /* But not too large */
        height: auto;
        aspect-ratio: 1 / 1; /* Keep them square-ish */
        margin-left: auto;
        margin-right: auto;
    }
     #fillMaskPreviewContainer.image-preview-container {
        max-width: 150px; /* Smaller mask preview */
    }


    .image-grid { /* Ensure 1 column on mobile */
        grid-template-columns: 1fr;
    }
    .image-card, .history-card { /* Ensure cards take full width in single column */
        width: 100%; 
    }


    .modal-content {
        max-width: 95%;
        max-height: 75vh;
    }
    #modalCaption button {
        display: block; 
        width: 80%;
        margin: 10px auto;
    }
    .history-filters {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .history-filters input[type="date"], 
    .history-filters select, 
    .history-filters button {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px; /* Add bottom margin for stacked items */
    }
    .history-filters button:last-child {
        margin-bottom: 0;
    }
}

</style>
</head>
<body>
    <div class="app-container">
        <aside class="sidebar">
            <h3>Menu</h3>
            <nav>
                <ul>
                    <li><a href="app.php?page=generate" class="<?php if($page === 'generate') echo 'active'; ?>">Generate Image</a></li>
                    <li><a href="app.php?page=edit" class="<?php if($page === 'edit') echo 'active'; ?>">Edit Image</a></li>
                    <li><a href="app.php?page=fill" class="<?php if($page === 'fill') echo 'active'; ?>">Fill Image</a></li>
                    <li><a href="app.php?page=expand" class="<?php if($page === 'expand') echo 'active'; ?>">Expand Image</a></li>
                    <li><hr></li>
                    <li><a href="app.php?page=history" class="<?php if($page === 'history') echo 'active'; ?>">History</a></li>
                    <li><a href="logout.php">Logout (<?php echo htmlspecialchars($currentUsername); ?>)</a></li>
                </ul>
            </nav>
        </aside>
        <main class="content">
            <?php
            // The PHP for including page content based on $page variable
            // (Generate, Edit, Fill, Expand, History forms/sections)
            // remains the same as your last app.php version.
            // I'm including it fully here for completeness.

            if ($page === 'generate') {
            ?>
                <h2>Generate Image</h2>
                <form id="generateForm">
                    <div>
                        <label for="promptTemplatesGenerate">Prompt Templates (Optional):</label>
                        <select id="promptTemplatesGenerate" name="prompt_templates_generate" style="margin-bottom: 10px; width:100%;">
                            <option value="">-- Select a Template --</option>
                        </select>
                    </div>
                    <div><label for="prompt">Text Prompt:</label><textarea id="prompt" name="prompt" rows="5" required></textarea></div>
                    <div>
                        <label for="inputImageUpload">Upload Image (Optional):</label>
                        <input type="file" id="inputImageUpload" name="input_image_upload" accept="image/*" style="display:none;">
                        <div id="generateImagePreviewContainerOuter">
                            <div id="generateImagePreviewContainer" class="image-preview-container"> {/* Removed inline styles, relying on CSS */}
                                <img id="generateImageDisplay" src="#" alt="Generate Image Preview">
                                <span id="generateImagePlaceholder" style="color: #777;">Click to upload image preview</span>
                                <button type="button" class="clear-preview-btn" data-previewimgid="generateImageDisplay" data-placeholderid="generateImagePlaceholder" data-fileinputid="inputImageUpload" title="Clear Image">&#x2715;</button>
                            </div>
                        </div>
                    </div>
                    <hr style="margin: 20px 0;"><h3>Settings</h3>
                    <div><label for="numOutputs">Number of Images:</label><input type="number" id="numOutputs" name="num_outputs" value="1" min="1" max="4" style="width: 80px;"></div>
                    <div><label for="aspectRatio">Aspect Ratio:</label><select id="aspectRatio" name="aspect_ratio"><option value="1:1" selected>1:1</option><option value="16:9">16:9</option><option value="9:16">9:16</option><option value="4:3">4:3</option><option value="3:4">3:4</option><option value="21:9">21:9</option><option value="9:21">9:21</option></select></div>
                    <div><label for="genWidth">Width:</label><input type="number" id="genWidth" name="width" value="1024" step="32" style="width: 100px;"></div>
                    <div><label for="genHeight">Height:</label><input type="number" id="genHeight" name="height" value="1024" step="32" style="width: 100px;"></div>
                    <details style="margin-top: 15px;"><summary>Advanced Settings</summary><div style="padding-top: 10px;">
                        <div><label for="seed">Seed:</label><input type="number" id="seed" name="seed" placeholder="Random"></div>
                        <div><label for="outputFormat">Output:</label><select id="outputFormat" name="output_format"><option value="jpeg" selected>JPEG</option><option value="png">PNG</option></select></div>
                        <div><input type="checkbox" id="promptUpsampling" name="prompt_upsampling" value="true"><label for="promptUpsampling" style="display: inline; font-weight: normal;">Prompt Upsampling</label></div>
                        <div><label for="safetyTolerance">Safety (0-6):</label><input type="number" id="safetyTolerance" name="safety_tolerance" value="2" min="0" max="6" style="width: 80px;"></div>
                        <div><label for="genSteps">Steps:</label><input type="number" id="genSteps" name="steps" value="40" style="width: 80px;"></div>
                        <div><label for="genGuidance">Guidance:</label><input type="number" id="genGuidance" name="guidance" value="7.5" step="0.1" style="width: 80px;"></div>
                        <div><label for="genImgPromptStrength">Img Strength (Ultra):</label><input type="number" id="genImgPromptStrength" name="image_prompt_strength" value="0.1" step="0.05" style="width: 80px;"></div>
                        <div><input type="checkbox" id="genRawMode" name="raw_mode" value="true"><label for="genRawMode" style="display: inline; font-weight: normal;">Raw Mode (Ultra)</label></div>
                        <?php if ($currentUserRole === 'Admin'): ?>
                        <hr style="margin: 15px 0;"><label for="modelSelection">Engine (Admin):</label>
                        <select id="modelSelection" name="model_endpoint">
                            <option value="/v1/flux-kontext-pro" selected>Kontext Pro (Default)</option><option value="/v1/flux-pro-1.1">FLUX Pro 1.1</option><option value="/v1/flux-dev">FLUX Dev</option><option value="/v1/flux-pro-1.1-ultra">FLUX Pro 1.1 Ultra</option><option value="/v1/flux-pro-1.0-fill">FLUX Fill</option><option value="/v1/flux-pro-1.0-expand">FLUX Expand</option>
                        </select><?php endif; ?>
                    </div></details>
                    <button type="submit" style="margin-top: 20px;">Generate Image(s)</button>
                </form>
                <div id="generationStatus" style="margin-top: 20px;"></div><div id="imageResults" class="image-grid" style="margin-top: 20px;"></div>
            <?php
            } elseif ($page === 'edit') {
            ?>
                <h2>Edit Image</h2>
                <form id="editForm">
                    <div>
                        <label for="promptTemplatesEdit">Prompt Templates (Optional):</label>
                        <select id="promptTemplatesEdit" name="prompt_templates_edit" style="margin-bottom: 10px; width:100%;">
                            <option value="">-- Select a Template --</option>
                        </select>
                    </div>
                    <div>
                        <label for="editImageUpload">Upload New Image to Edit (Optional):</label>
                        <input type="file" id="editImageUpload" name="edit_image_upload" accept="image/*" style="display:none;">
                         <div id="editImagePreviewContainerOuter">
                            <div id="editImagePreviewContainer" class="image-preview-container"> {/* Removed inline styles */}
                                <img id="editImageDisplay" src="#" alt="Image Preview">
                                <span id="editImagePlaceholder" style="color: #777;">Click to upload or load via "Edit" from Generate.</span>
                                <button type="button" class="clear-preview-btn" data-previewimgid="editImageDisplay" data-placeholderid="editImagePlaceholder" data-fileinputid="editImageUpload" data-hiddenbase64id="editImageBase64" title="Clear Image">&#x2715;</button>
                            </div>
                        </div>
                        <input type="hidden" id="editImageBase64" name="edit_image_base64">
                    </div>
                    <div><label for="editPrompt">Text Prompt:</label><textarea id="editPrompt" name="edit_prompt" rows="5" required></textarea></div>
                    <hr style="margin: 20px 0;"><h3>Settings</h3>
                    <div><label for="editAspectRatio">Aspect Ratio:</label><input type="text" id="editAspectRatio" name="edit_aspect_ratio" readonly placeholder="From image"></div>
                    <details style="margin-top: 15px;"><summary>Advanced Settings</summary><div style="padding-top: 10px;">
                        <div><label for="editSeed">Seed:</label><input type="number" id="editSeed" name="edit_seed" placeholder="Random"></div>
                        <div><label for="editOutputFormat">Output:</label><select id="editOutputFormat" name="edit_output_format"><option value="jpeg" selected>JPEG</option><option value="png">PNG</option></select></div>
                        <div><input type="checkbox" id="editPromptUpsampling" name="edit_prompt_upsampling" value="true"><label for="editPromptUpsampling" style="display: inline; font-weight: normal;">Prompt Upsampling</label></div>
                        <div><label for="editSafetyTolerance">Safety (0-6):</label><input type="number" id="editSafetyTolerance" name="edit_safety_tolerance" value="2" min="0" max="6" style="width: 80px;"></div>
                        <div><label for="editSteps">Steps:</label><input type="number" id="editSteps" name="steps" value="40" style="width: 80px;"></div>
                        <div><label for="editGuidance">Guidance:</label><input type="number" id="editGuidance" name="guidance" value="7.5" step="0.1" style="width: 80px;"></div>
                        <?php if ($currentUserRole === 'Admin'): ?>
                        <hr><label for="editModelSelection">Engine (Admin):</label>
                        <select id="editModelSelection" name="edit_model_endpoint">
                            <option value="/v1/flux-kontext-pro" selected>Kontext Pro (Default)</option><option value="/v1/flux-pro-1.1">FLUX Pro 1.1</option>
                        </select><?php endif; ?>
                    </div></details>
                    <button type="submit" style="margin-top: 20px;">Apply Edits & Regenerate</button>
                </form>
                <div id="editGenerationStatus" style="margin-top: 20px;"></div><div id="editImageResults" class="image-grid" style="margin-top: 20px;"></div>
            <?php
            } elseif ($page === 'fill') {
            ?>
                <h2>Fill Image (Inpainting)</h2>
                <form id="fillForm">
                    <div>
                        <label for="fillImageUpload">Upload Image to Fill:</label>
                        <input type="file" id="fillImageUpload" name="fill_image_upload" accept="image/*" required style="display:none;">
                        <div id="fillImagePreviewContainerOuter">
                            <div id="fillImagePreviewContainer" class="image-preview-container"> {/* Removed inline styles */}
                                <img id="fillImageDisplay" src="#" alt="Fill Image Preview">
                                <span id="fillImagePlaceholder" style="color: #777;">Click to upload image</span>
                                <button type="button" class="clear-preview-btn" data-previewimgid="fillImageDisplay" data-placeholderid="fillImagePlaceholder" data-fileinputid="fillImageUpload" title="Clear Image">&#x2715;</button>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label for="fillMaskUpload">Upload Mask Image (Optional):</label>
                        <input type="file" id="fillMaskUpload" name="fill_mask_upload" accept="image/*" style="display:none;">
                         <div id="fillMaskPreviewContainerOuter">
                            <div id="fillMaskPreviewContainer" class="image-preview-container"> {/* Removed inline styles */}
                                <img id="fillMaskDisplay" src="#" alt="Mask Preview">
                                <span id="fillMaskPlaceholder" style="color: #777;">Click to upload mask</span>
                                <button type="button" class="clear-preview-btn" data-previewimgid="fillMaskDisplay" data-placeholderid="fillMaskPlaceholder" data-fileinputid="fillMaskUpload" title="Clear Mask">&#x2715;</button>
                            </div>
                        </div><small>If no mask, image alpha channel might be used.</small>
                    </div>
                    <div><label for="fillPrompt">Text Prompt:</label><textarea id="fillPrompt" name="fill_prompt" rows="3"></textarea></div>
                    <hr style="margin: 20px 0;"><h3>Settings</h3>
                    <details style="margin-top: 15px;"><summary>Advanced Settings</summary><div style="padding-top: 10px;">
                        <div><label for="fillSeed">Seed:</label><input type="number" id="fillSeed" name="seed" placeholder="Random"></div>
                        <div><label for="fillSteps">Steps:</label><input type="number" id="fillSteps" name="steps" value="50" style="width:80px;"></div>
                        <div><label for="fillGuidance">Guidance:</label><input type="number" id="fillGuidance" name="guidance" value="60" step="0.5" style="width:80px;"></div>
                        <div><label for="fillOutputFormat">Output:</label><select id="fillOutputFormat" name="output_format"><option value="jpeg" selected>JPEG</option><option value="png">PNG</option></select></div>
                        <div><input type="checkbox" id="fillPromptUpsampling" name="prompt_upsampling" value="true"><label for="fillPromptUpsampling" style="display: inline; font-weight: normal;">Prompt Upsampling</label></div>
                        <div><label for="fillSafetyTolerance">Safety (0-6):</label><input type="number" id="fillSafetyTolerance" name="safety_tolerance" value="2" min="0" max="6" style="width: 80px;"></div>
                    </div></details>
                     <input type="hidden" name="model_endpoint" value="/v1/flux-pro-1.0-fill">
                    <button type="submit" style="margin-top: 20px;">Fill Image</button>
                </form>
                <div id="fillGenerationStatus" style="margin-top: 20px;"></div><div id="fillImageResults" class="image-grid" style="margin-top: 20px;"></div>
            <?php
            } elseif ($page === 'expand') {
            ?>
                <h2>Expand Image (Outpainting)</h2>
                <form id="expandForm">
                     <div>
                        <label for="expandImageUpload">Upload Image to Expand:</label>
                        <input type="file" id="expandImageUpload" name="expand_image_upload" accept="image/*" required style="display:none;">
                        <div id="expandImagePreviewContainerOuter">
                            <div id="expandImagePreviewContainer" class="image-preview-container"> {/* Removed inline styles */}
                                <img id="expandImageDisplay" src="#" alt="Expand Image Preview">
                                <span id="expandImagePlaceholder" style="color: #777;">Click to upload image</span>
                                <button type="button" class="clear-preview-btn" data-previewimgid="expandImageDisplay" data-placeholderid="expandImagePlaceholder" data-fileinputid="expandImageUpload" title="Clear Image">&#x2715;</button>
                            </div>
                        </div>
                    </div>
                    <div><label for="expandPrompt">Text Prompt (Optional):</label><textarea id="expandPrompt" name="expand_prompt" rows="3"></textarea></div>
                    <hr style="margin: 20px 0;"><h3>Expansion Pixels</h3>
                    <div><label for="expandTop">Top:</label><input type="number" id="expandTop" name="top" value="0" min="0" style="width:100px;"> px</div>
                    <div><label for="expandBottom">Bottom:</label><input type="number" id="expandBottom" name="bottom" value="0" min="0" style="width:100px;"> px</div>
                    <div><label for="expandLeft">Left:</label><input type="number" id="expandLeft" name="left" value="0" min="0" style="width:100px;"> px</div>
                    <div><label for="expandRight">Right:</label><input type="number" id="expandRight" name="right" value="0" min="0" style="width:100px;"> px</div>
                    <small>At least one direction must be > 0.</small>
                    <hr style="margin: 20px 0;"><h3>Settings</h3>
                    <details style="margin-top: 15px;"><summary>Advanced Settings</summary><div style="padding-top: 10px;">
                        <div><label for="expandSeed">Seed:</label><input type="number" id="expandSeed" name="seed" placeholder="Random"></div>
                        <div><label for="expandSteps">Steps:</label><input type="number" id="expandSteps" name="steps" value="50" style="width:80px;"></div>
                        <div><label for="expandGuidance">Guidance:</label><input type="number" id="expandGuidance" name="guidance" value="60" step="0.5" style="width:80px;"></div>
                        <div><label for="expandOutputFormat">Output:</label><select id="expandOutputFormat" name="output_format"><option value="jpeg" selected>JPEG</option><option value="png">PNG</option></select></div>
                        <div><input type="checkbox" id="expandPromptUpsampling" name="prompt_upsampling" value="true"><label for="expandPromptUpsampling" style="display: inline; font-weight: normal;">Prompt Upsampling</label></div>
                        <div><label for="expandSafetyTolerance">Safety (0-6):</label><input type="number" id="expandSafetyTolerance" name="safety_tolerance" value="2" min="0" max="6" style="width: 80px;"></div>
                    </div></details>
                    <input type="hidden" name="model_endpoint" value="/v1/flux-pro-1.0-expand">
                    <button type="submit" style="margin-top: 20px;">Expand Image</button>
                </form>
                <div id="expandGenerationStatus" style="margin-top: 20px;"></div><div id="expandImageResults" class="image-grid" style="margin-top: 20px;"></div>
            <?php
            } elseif ($page === 'history') {
            ?>
                <h2>Generation History</h2>
                <div class="history-filters">
                    <label for="filterUser">User:</label>
                    <select id="filterUser">
                        <?php foreach ($historyUsers as $value => $display): ?>
                            <option value="<?php echo htmlspecialchars($value); ?>"><?php echo htmlspecialchars($display); ?></option>
                        <?php endforeach; ?>
                    </select>
                    <label for="filterStartDate">From:</label>
                    <input type="date" id="filterStartDate">
                    <label for="filterEndDate">To:</label>
                    <input type="date" id="filterEndDate">
                    <button id="applyHistoryFilter" class="button" style="width:auto; padding: 8px 12px;">Apply Filters</button>
                    <button id="resetHistoryFilter" class="button" style="width:auto; padding: 8px 12px; background-color: #6c757d;">Reset</button>
                </div>
                <div id="historyStatus" style="margin-top:10px;">Loading history...</div>
                <div id="historyList" class="image-grid" style="margin-top: 20px;"></div>
            <?php
            } else {
            ?>
                <h2>Welcome!</h2><p>Please select an option from the menu.</p>
            <?php
            }
            ?>
            <div id="imageModal" class="modal" style="display:none;">
                <span class="close-modal" onclick="document.getElementById('imageModal').style.display='none'">&times;</span>
                <img class="modal-content" id="modalImageSrc">
                <div id="modalCaption" style="text-align: center; padding: 10px;">
                    <p id="modalPromptDisplay" style="color: #fff; margin-bottom:10px; word-wrap:break-word;"></p>
                    <button id="downloadModalImage" class="button">Download</button>
                    <button id="editModalImage" class="button">Edit This Image</button>
                </div>
            </div>
        </main>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="js/main.js"></script></body>
</html>