From 1a942c5975339773bd635b0a7d2a19506b70ab12 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 23:14:34 -0500
Subject: [PATCH] feat: add help modal for mounting ISO images to enhance user
 guidance

---
 .../Proxmox/views/boot-order.blade.php        | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/extensions/Servers/Proxmox/views/boot-order.blade.php b/extensions/Servers/Proxmox/views/boot-order.blade.php
index 390b14c26..8118c8448 100644
--- a/extensions/Servers/Proxmox/views/boot-order.blade.php
+++ b/extensions/Servers/Proxmox/views/boot-order.blade.php
@@ -229,6 +229,64 @@
                     <div class="flex-1 min-w-0">
                         <div class="flex items-center gap-2 min-w-0">
                             <h3 class="text-base sm:text-lg font-semibold break-words">Mount ISO Image - {{ strtoupper($drive) }}</h3>
+                            <div class="relative" x-data="{ open: false }" x-cloak>
+                                <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
+                                    <x-ri-question-line class="size-4" />
+                                </button>
+                                <!-- Modal Backdrop -->
+                                <div x-show="open" 
+                                     x-transition:enter="transition ease-out duration-300"
+                                     x-transition:enter-start="opacity-0"
+                                     x-transition:enter-end="opacity-100"
+                                     x-transition:leave="transition ease-in duration-200"
+                                     x-transition:leave-start="opacity-100"
+                                     x-transition:leave-end="opacity-0"
+                                     @click="open = false"
+                                     @keydown.escape.window="open = false"
+                                     class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                                     style="display: none;">
+                                </div>
+                                <!-- Modal -->
+                                <div x-show="open"
+                                     x-transition:enter="transition ease-out duration-300"
+                                     x-transition:enter-start="opacity-0 scale-95"
+                                     x-transition:enter-end="opacity-100 scale-100"
+                                     x-transition:leave="transition ease-in duration-200"
+                                     x-transition:leave-start="opacity-100 scale-100"
+                                     x-transition:leave-end="opacity-0 scale-95"
+                                     @click.away="open = false"
+                                     @keydown.escape.window="open = false"
+                                     class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                                     style="display: none;">
+                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                                        <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
+                                            <x-ri-close-line class="size-5" />
+                                        </button>
+                                        <div class="flex items-center gap-3 mb-4 pr-8">
+                                            <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                                                <x-ri-file-upload-line class="size-5 text-primary" />
+                                            </div>
+                                            <h6 class="font-sans text-lg font-semibold leading-tight text-base">
+                                                Mount ISO Image - {{ strtoupper($drive) }}
+                                            </h6>
+                                        </div>
+                                        <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
+                                            Attach or detach ISO files from cephfs storage to the virtual CD/DVD-ROM drive. Select an ISO from the dropdown to mount it, or choose "None" to leave the drive empty.
+                                        </p>
+                                        <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
+                                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                                <span class="font-semibold text-base/90">Apply:</span> Commits your selection and immediately mounts the ISO to the drive.
+                                            </p>
+                                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                                <span class="font-semibold text-base/90">Eject:</span> Quickly removes the currently mounted ISO, setting the drive to empty.
+                                            </p>
+                                            <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                                ISO images are stored in cephfs storage and can be used for operating system installation, recovery, or running live environments. The storage prefix is hidden in the dropdown for clarity.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <p class="text-xs text-base/60">
                             Attach or detach an ISO from cephfs storage for the drive on {{ strtoupper($drive) }}.