{# templates/admin_modals/system_actions_modal.html #}
<div id="system-actions-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-50 p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="system-actions-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-2xl h-auto max-h-[85vh] border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">

        <!-- Header -->
        <div class="p-8 pb-4 flex-shrink-0 flex items-center justify-between bg-white/[0.02] border-b border-white/5">
            <div class="flex items-center">
                <div class="p-2.5 bg-yellow-500/10 rounded-xl border border-yellow-500/20 mr-4 shadow-sm">
                    <i data-lucide="zap" class="h-6 w-6 text-yellow-400"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-white">System Actions</h3>
                    <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Emergency Operations</p>
                </div>
            </div>
            <button type="button"
                class="close-modal-btn p-3 bg-white/[0.03] hover:bg-red-500/20 border border-white/5 hover:border-red-500/30 rounded-2xl text-zinc-500 hover:text-red-400 transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>

        <!-- Scrollable Body -->
        <div class="flex-1 overflow-y-auto px-8 py-4 space-y-6 custom-scrollbar">
            <div class="grid grid-cols-1 gap-6">
                {# Maintenance Mode Toggle #}
                <div class="flex items-center justify-between p-6 bg-white/[0.03] rounded-2xl border border-white/5 hover:bg-white/10 transition-colors group">
                    <div>
                        <h3 class="text-sm font-semibold text-white group-hover:text-amber-400 transition-colors">Maintenance Mode</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">When enabled, only admins can access the site. Standard users see the maintenance page.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" data-setting-key="maintenance_mode" class="sr-only peer setting-toggle" {% if settings.get('maintenance_mode')=='1' %}checked{% endif %}>
                        <div class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-amber-500/30 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-zinc-400 after:border-zinc-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-500 peer-checked:after:bg-white"></div>
                    </label>
                </div>

                {# Restart Service Button #}
                <div
                    class="flex items-center justify-between p-6 bg-white/[0.03] rounded-2xl border border-white/5 hover:bg-white/10 transition-colors group">
                    <div>
                        <h3 class="text-sm font-semibold text-white group-hover:text-yellow-400 transition-colors">
                            Restart Service</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Restarts
                            opengit.service.</p>
                    </div>
                    <button id="restart-service-modal-btn"
                        class="glass-button px-6 py-3 rounded-xl text-[10px] font-black uppercase text-yellow-500 hover:bg-yellow-500/10 flex items-center">
                        <i data-lucide="refresh-cw" class="h-4 w-4 mr-2"></i> Restart
                    </button>
                </div>

                {# Update Application: Repo URL & Branch #}
                <div class="p-6 bg-white/[0.03] rounded-2xl border border-white/5 space-y-3">
                    <h3 class="text-sm font-semibold text-white">Update App</h3>
                    <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Pull from git repository and deploy.</p>
                    <div class="flex flex-wrap items-center gap-3 p-4 rounded-xl bg-black/20 border border-white/5">
                        <div class="min-w-0 flex-1 space-y-1">
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Installed version</p>
                            <p id="update-version-local-display" class="text-lg font-mono font-semibold text-white tracking-tight">{{ local_app_version or '—' }}</p>
                        </div>
                        <div class="min-w-0 flex-1 space-y-1">
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Upstream (last check)</p>
                            <p id="update-version-remote-display" class="text-lg font-mono font-semibold text-zinc-300 tracking-tight">—</p>
                        </div>
                        <div class="w-full sm:w-auto flex flex-col sm:items-end gap-2">
                            <span id="update-version-status-badge" class="hidden text-[10px] font-black uppercase tracking-widest px-3 py-1 rounded-lg"></span>
                            <p id="update-version-last-check" class="text-[10px] text-zinc-500 max-w-xs sm:text-right"></p>
                            <p id="update-version-check-error" class="hidden text-xs text-red-400/90 max-w-md sm:text-right"></p>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <button type="button" id="check-update-version-btn"
                            class="glass-button px-5 py-2.5 rounded-xl text-[10px] font-black uppercase text-emerald-400 hover:bg-emerald-500/10 flex items-center">
                            <i data-lucide="refresh-cw" class="h-4 w-4 mr-2"></i> Check for updates
                        </button>
                    </div>
                    <p class="text-[10px] text-zinc-500">A background check also runs every day at <strong class="text-zinc-400">8:00 PM</strong> (server local time). Private VERSION URLs use the Git username and token below.</p>
                    {# autocomplete=off + non-login token field hints: discourage browser autofill and “save password” prompts #}
                    <form class="contents" autocomplete="off" data-form-type="other" onsubmit="return false">
                    <div>
                        <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">VERSION check URL (HTTPS raw)</label>
                        <input type="text" id="modal_update_remote_version_url" name="opengit_sa_version_url"
                            data-setting-key="update_remote_version_url"
                            class="setting-text-input mt-1 w-full bg-white/[0.05] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white font-mono"
                            placeholder="https://…/raw/…/VERSION" value="{{ settings.get('update_remote_version_url', '') }}"
                            autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" data-lpignore="true" data-1p-ignore="true">
                    </div>
                    <div>
                        <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Repository URL</label>
                        <input type="text" id="modal_update_repo_url" name="opengit_sa_clone_url"
                            data-setting-key="update_repo_url"
                            class="setting-text-input mt-1 w-full bg-white/[0.05] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white font-mono"
                            placeholder="https://github.com/user/OpenGit.git" value="{{ settings.get('update_repo_url', '') }}"
                            autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" data-lpignore="true" data-1p-ignore="true">
                    </div>
                    <div>
                        <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Branch</label>
                        <input type="text" id="modal_update_repo_branch" name="opengit_sa_branch"
                            data-setting-key="update_repo_branch"
                            class="setting-text-input mt-1 w-full bg-white/[0.05] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white"
                            placeholder="main" value="{{ settings.get('update_repo_branch', 'main') }}"
                            autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" data-lpignore="true" data-1p-ignore="true">
                    </div>
                    <div class="pt-2 border-t border-white/5 space-y-3">
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Private repository (HTTPS)</p>
                        <p class="text-xs text-zinc-400">Required for private HTTPS repos. Save with <strong class="text-zinc-300">View</strong> → <strong class="text-zinc-300">Apply</strong> <em>before</em> <strong class="text-zinc-300">Deploy Update</strong> — the updater runs without a TTY, so git cannot ask for a username/password interactively. Use a personal access token as the password when your host expects one.</p>
                        <div>
                            <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Git username</label>
                            <input type="text" id="modal_update_repo_git_username" name="opengit_sa_git_user"
                                data-setting-key="update_repo_git_username"
                                class="setting-text-input mt-1 w-full bg-white/[0.05] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white"
                                placeholder="e.g. your GitHub username" value="{{ settings.get('update_repo_git_username', '') }}"
                                autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" data-lpignore="true" data-1p-ignore="true">
                        </div>
                        <div>
                            <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Git password or token</label>
                            <input type="password" id="modal_update_repo_git_password" name="opengit_sa_git_token"
                                data-setting-key="update_repo_git_password"
                                class="setting-text-input mt-1 w-full bg-white/[0.05] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white font-mono"
                                placeholder="••••••••" value="{{ settings.get('update_repo_git_password', '') }}"
                                autocomplete="new-password" data-lpignore="true" data-1p-ignore="true" data-bwignore>
                        </div>
                    </div>
                    </form>
                    <button id="update-app-modal-btn"
                        class="glass-button px-6 py-3 rounded-xl text-[10px] font-black uppercase text-blue-400 hover:bg-blue-500/10 flex items-center">
                        <i data-lucide="download-cloud" class="h-4 w-4 mr-2"></i> Deploy Update
                    </button>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="p-8 pt-4 flex-shrink-0 flex justify-end border-t border-white/5">
            <button type="button"
                class="close-modal-btn glass-button px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-white">Close</button>
        </div>
    </div>
</div>