{# templates/admin_modals/system_settings_modal.html #}
{% from "_custom_select.html" import custom_select %}
<style>
    #system-settings-modal .admin-default-bg-opt,
    #system-settings-modal .admin-default-cursor-opt,
    #system-settings-modal .admin-default-font-opt {
        box-shadow: none !important;
        transition: border-color 0.2s, background-color 0.2s;
    }
    #system-settings-modal .admin-default-bg-opt:hover,
    #system-settings-modal .admin-default-cursor-opt:hover,
    #system-settings-modal .admin-default-font-opt:hover {
        box-shadow: none !important;
        transform: none !important;
    }
    #system-settings-modal input[type="range"].admin-default-appearance-range {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 12px;
        background: linear-gradient(to right, rgb(var(--theme-r, 59), var(--theme-g, 130), var(--theme-b, 246)) 0%, rgb(var(--theme-r, 59), var(--theme-g, 130), var(--theme-b, 246)) var(--slider-pct, 50%), rgb(39 39 42 / 0.4) var(--slider-pct, 50%), rgb(39 39 42 / 0.4) 100%);
        border-radius: 9999px;
        cursor: pointer;
    }
    #system-settings-modal input[type="range"].admin-default-appearance-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 9999px;
        background: white;
        cursor: pointer;
        border: 2px solid rgba(255,255,255,0.5);
    }
    #system-settings-modal input[type="range"].admin-default-appearance-range::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 9999px;
        background: white;
        cursor: pointer;
        border: 2px solid rgba(255,255,255,0.5);
    }
</style>
<div id="system-settings-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-settings-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-blue-500/10 rounded-xl border border-blue-500/20 mr-4 shadow-sm">
                    <i data-lucide="settings" class="h-6 w-6 text-blue-400"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-white">System Settings</h3>
                    <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Core Configuration</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="space-y-6">
                {# Brand Name #}
                <div class="flex flex-col gap-2 p-5 bg-white/[0.03] rounded-2xl border border-white/5">
                    <h3 class="text-sm font-semibold text-white">Brand Name</h3>
                    <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Custom name shown across the app (e.g. Gitssy). Footer "OpenGit by Nakildias" stays unchanged.</p>
                    <input type="text" data-setting-key="brand_name" class="setting-text-input mt-1 px-4 py-3 bg-white/[0.02] border border-white/5 rounded-xl text-white placeholder-zinc-500 focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/30"
                        value="{{ settings.get('brand_name', 'OpenGit') }}"
                        placeholder="OpenGit">
                </div>

                {# Default appearance for new users (match User Settings layout) #}
                {% set dbg = settings.get('default_user_background_style', 'balls') %}
                {% set dpreset = settings.get('default_user_neutral_preset', 'zinc') %}
                {% set dblur = settings.get('default_user_glass_blur', '12') %}
                {% set dopacity = settings.get('default_user_glass_opacity', '0.7') %}
                {% set dradius = settings.get('default_user_radius_scale', '1.0') %}
                {% set dmm = settings.get('default_user_muted_text_mode', '') or '' %}
                {% set dhm = settings.get('default_user_header_color_mode', '') or '' %}
                {% set dcs = settings.get('default_user_custom_cursor_style', 'default') %}
                {% set dmmhex_raw = settings.get('default_user_muted_text_custom_hex', '') or '' %}
                {% set dhmhex_raw = settings.get('default_user_header_custom_hex', '') or '' %}
                {% set dmmhex = dmmhex_raw if dmmhex_raw|length == 7 and dmmhex_raw.startswith('#') else '#a1a1aa' %}
                {% set dhmhex = dhmhex_raw if dhmhex_raw|length == 7 and dhmhex_raw.startswith('#') else '#ffffff' %}
                {% set duf = normalize_ui_font_id(settings.get('default_user_ui_font', 'ubuntu')) %}
                <div class="flex flex-col gap-5 p-5 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Default appearance (new users)</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Same controls as User Settings → General. Applied when an account is created.</p>
                    </div>
                    <input type="hidden" data-setting-key="default_user_background_style" id="admin-default-user-background-style" value="{{ dbg }}">
                    <input type="hidden" data-setting-key="default_user_neutral_preset" id="admin-default-user-neutral-preset" value="{{ dpreset }}">
                    <input type="hidden" data-setting-key="default_user_custom_cursor_style" id="admin-default-user-cursor-style" value="{{ dcs }}">
                    <div>
                        <h4 class="text-[10px] font-bold text-white mb-3 uppercase tracking-widest text-zinc-500">Background</h4>
                        <p class="text-[10px] text-zinc-500 mb-3 uppercase tracking-widest font-black">Ambient background for new users.</p>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                            {% for opt, label in [('none','None'), ('balls','Balls'), ('wave','Bottom Wave'), ('stars','Parallax Stars'), ('drip','Color Drip')] %}
                            <button type="button" data-bg="{{ opt }}" class="admin-default-bg-opt px-3 py-2.5 rounded-xl border text-left text-xs font-medium transition-all hover:border-white/20 {% if dbg == opt %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400{% endif %}">{{ label }}</button>
                            {% endfor %}
                        </div>
                    </div>
                    <div>
                        <h4 class="text-[10px] font-bold text-white mb-3 uppercase tracking-widest text-zinc-500">Glass &amp; corners</h4>
                        <div class="space-y-3">
                            <div>
                                <label class="flex justify-between text-xs text-zinc-400 mb-1">
                                    <span>Opacity</span>
                                    <span id="admin-default-opacity-value">{{ dopacity }}</span>
                                </label>
                                <input type="range" data-setting-key="default_user_glass_opacity" min="0.3" max="1" value="{{ dopacity }}" step="0.05"
                                    class="admin-default-appearance-range w-full cursor-pointer">
                            </div>
                            <div>
                                <label class="flex justify-between text-xs text-zinc-400 mb-1">
                                    <span>Blur (px)</span>
                                    <span id="admin-default-blur-value">{{ dblur }}</span>
                                </label>
                                <input type="range" data-setting-key="default_user_glass_blur" min="4" max="24" value="{{ dblur }}" step="1"
                                    class="admin-default-appearance-range w-full cursor-pointer">
                            </div>
                            <div>
                                <label class="flex justify-between text-xs text-zinc-400 mb-1">
                                    <span>Corner scale</span>
                                    <span id="admin-default-radius-value">{{ dradius }}</span>
                                </label>
                                <input type="range" data-setting-key="default_user_radius_scale" min="0.5" max="2" value="{{ dradius }}" step="0.1"
                                    class="admin-default-appearance-range w-full cursor-pointer">
                            </div>
                        </div>
                    </div>
                    <div>
                        <h4 class="text-[10px] font-bold text-white mb-2 uppercase tracking-widest text-zinc-500">Muted text</h4>
                        {% set dmm_labels = {'': 'Default (gray)', 'preset': 'Use color preset', 'light': 'Light (white)', 'dark': 'Dark (black)', 'custom': 'Custom (pick color)'} %}
                        {{ custom_select(id="admin-default-muted-text-mode", options=[
                            {"value": "", "label": "Default (gray)"},
                            {"value": "preset", "label": "Use color preset"},
                            {"value": "light", "label": "Light (white)"},
                            {"value": "dark", "label": "Dark (black)"},
                            {"value": "custom", "label": "Custom (pick color)"}
                        ], selected_value=dmm, selected_label=dmm_labels[dmm] if dmm in dmm_labels else 'Default (gray)', mode="form", class="w-full", data_setting_key="default_user_muted_text_mode", picker_title="Default muted text") }}
                        <div id="admin-default-muted-color-wrap" class="mt-2 {% if dmm != 'custom' %}hidden{% endif %}">
                            <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-black">Custom color</label>
                            <input type="color" data-setting-key="default_user_muted_text_custom_hex" value="{{ dmmhex | e }}"
                                class="mt-1 h-10 w-full rounded-xl border border-white/10 bg-white/5 cursor-pointer">
                        </div>
                    </div>
                    <div>
                        <h4 class="text-[10px] font-bold text-white mb-2 uppercase tracking-widest text-zinc-500">Header color</h4>
                        {% set dhm_labels = {'': 'Default (white)', 'preset': 'Use color preset', 'light': 'Light (white)', 'dark': 'Dark (black)', 'custom': 'Custom (pick color)'} %}
                        {{ custom_select(id="admin-default-header-color-mode", options=[
                            {"value": "", "label": "Default (white)"},
                            {"value": "preset", "label": "Use color preset"},
                            {"value": "light", "label": "Light (white)"},
                            {"value": "dark", "label": "Dark (black)"},
                            {"value": "custom", "label": "Custom (pick color)"}
                        ], selected_value=dhm, selected_label=dhm_labels[dhm] if dhm in dhm_labels else 'Default (white)', mode="form", class="w-full", data_setting_key="default_user_header_color_mode", picker_title="Default header color") }}
                        <div id="admin-default-header-color-wrap" class="mt-2 {% if dhm != 'custom' %}hidden{% endif %}">
                            <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-black">Custom header color</label>
                            <input type="color" data-setting-key="default_user_header_custom_hex" value="{{ dhmhex | e }}"
                                class="mt-1 h-10 w-full rounded-xl border border-white/10 bg-white/5 cursor-pointer">
                        </div>
                    </div>
                    <div>
                        <h4 class="text-[10px] font-bold text-white mb-2 uppercase tracking-widest text-zinc-500">Color preset</h4>
                        <div class="flex flex-wrap gap-2 max-h-40 overflow-y-auto pr-1 custom-scrollbar">
                            {% for preset in ['red','orange','amber','yellow','lime','green','emerald','teal','cyan','sky','blue','indigo','violet','purple','fuchsia','pink','rose','slate','gray','zinc','neutral','stone','taupe','mauve','mist','olive'] %}
                            {% set rgb = {'red':[239,68,68],'orange':[249,115,22],'amber':[245,158,11],'yellow':[234,179,8],'lime':[132,204,22],'green':[34,197,94],'emerald':[16,185,129],'teal':[20,184,166],'cyan':[6,182,212],'sky':[14,165,233],'blue':[59,130,246],'indigo':[99,102,241],'violet':[139,92,246],'purple':[168,85,247],'fuchsia':[217,70,239],'pink':[236,72,153],'rose':[244,63,94],'slate':[100,116,139],'gray':[107,114,128],'zinc':[161,161,170],'neutral':[115,115,115],'stone':[120,113,108],'taupe':[120,113,108],'mauve':[121,105,123],'mist':[100,123,147],'olive':[120,123,106]}.get(preset, [161,161,170]) %}
                            {% set colorHex = 'rgb(' ~ rgb[0] ~ ',' ~ rgb[1] ~ ',' ~ rgb[2] ~ ')' %}
                            <button type="button" data-neutral="{{ preset }}" title="{{ preset }}"
                                class="admin-default-neutral-opt w-9 h-9 rounded-xl border-2 transition-all hover:border-white/30 shrink-0 flex items-center justify-center {% if dpreset == preset %}border-white ring-2 ring-blue-500/50 ring-offset-2 ring-offset-zinc-900{% else %}border-white/10{% endif %}"
                                style="background-color: {{ colorHex }}"></button>
                            {% endfor %}
                        </div>
                    </div>
                    <div>
                        <h4 class="text-[10px] font-bold text-white mb-2 uppercase tracking-widest text-zinc-500">Interface font</h4>
                        <p class="text-[10px] text-zinc-500 mb-3 uppercase tracking-widest font-black">Default UI typeface for new users and anyone using System theme in General Settings.</p>
                        <input type="hidden" data-setting-key="default_user_ui_font" id="admin-default-user-ui-font" value="{{ duf }}">
                        <p id="admin-default-font-preview" class="text-sm text-zinc-300 mb-3 px-3 py-3 rounded-xl border border-white/10 bg-black/20 leading-relaxed" style="font-family: var(--ui-font-stack);">The quick brown fox — 0123456789</p>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                            {% for fid, spec in UI_FONTS.items() %}
                            <button type="button" data-ui-font="{{ fid }}" title="{{ spec.label }}"
                                class="admin-default-font-opt flex w-full min-h-[2.875rem] items-center justify-center text-center px-3 py-2 rounded-xl border text-xs font-medium leading-tight transition-all {% if duf == fid %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400 hover:border-white/20{% endif %}">{{ spec.label }}</button>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="pt-2 border-t border-white/5">
                        <h4 class="text-[10px] font-bold text-white mb-2 uppercase tracking-widest text-zinc-500">Custom cursor</h4>
                        <div class="flex items-center justify-between gap-4 mb-3">
                            <span class="text-xs text-zinc-400">Enable for new users</span>
                            <label class="relative inline-flex items-center cursor-pointer shrink-0">
                                <input type="checkbox" data-setting-key="default_user_custom_cursor_enabled" class="sr-only peer setting-toggle"
                                    {% if settings.get('default_user_custom_cursor_enabled', '0') == '1' %}checked{% endif %}>
                                <div class="w-11 h-6 bg-zinc-800 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-zinc-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500 peer-checked:after:bg-white"></div>
                            </label>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            {% for style_id, style_label in [('default','Default'),('glow','Glow'),('ring','Ring'),('minimal','Minimal')] %}
                            <button type="button" data-cursor-style="{{ style_id }}" title="{{ style_label }}"
                                class="admin-default-cursor-opt px-3 py-2 rounded-xl border text-xs font-medium transition-all {% if dcs == style_id %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400 hover:border-white/20{% endif %}">{{ style_label }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                {# Registration Enabled Toggle #}
                <div class="flex items-center justify-between p-5 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Enable User Registration</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Allow new users to
                            register for an account.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" data-setting-key="registration_enabled"
                            class="sr-only peer setting-toggle" {% if settings.registration_enabled=='1' %}checked{%
                            endif %}>
                        <div
                            class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-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-blue-500 peer-checked:after:bg-white">
                        </div>
                    </label>
                </div>

                {# Verification Required Toggle #}
                <div class="flex items-center justify-between p-5 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Require Admin Verification</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">New accounts must
                            be manually verified before login.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" data-setting-key="verification_required"
                            class="sr-only peer setting-toggle" {% if settings.verification_required=='1' %}checked{%
                            endif %}>
                        <div
                            class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-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-blue-500 peer-checked:after:bg-white">
                        </div>
                    </label>
                </div>

                {# 2FA Toggle #}
                <div class="flex items-center justify-between p-5 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Enable 2FA Authentication</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Require email code
                            for signup & new IPs.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" data-setting-key="2fa_enabled" class="sr-only peer setting-toggle" {% if
                            settings['2fa_enabled']=='1' %}checked{% endif %}>
                        <div
                            class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-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-blue-500 peer-checked:after:bg-white">
                        </div>
                    </label>
                </div>

                {# 2FA Remember IP Toggle #}
                <div class="flex items-center justify-between p-5 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Remember IP for 2FA</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">If enabled,
                            bypasses 2FA for previously trusted IPs.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" data-setting-key="2fa_remember_ip" class="sr-only peer setting-toggle" {%
                            if settings.get('2fa_remember_ip', '1' )=='1' %}checked{% endif %}>
                        <div
                            class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-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-blue-500 peer-checked:after:bg-white">
                        </div>
                    </label>
                </div>

                {# Profiler Toggle #}
                <div class="flex items-center justify-between p-5 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Enable Route Profiler</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Profile HTTP
                            route execution times. View in Admin Profiler.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" data-setting-key="profiler_enabled" class="sr-only peer setting-toggle"
                            {% if settings.get('profiler_enabled', '0') == '1' %}checked{% endif %}>
                        <div
                            class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-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-blue-500 peer-checked:after:bg-white">
                        </div>
                    </label>
                </div>

                {# Clone Repos Admin Only Toggle #}
                <div class="flex items-center justify-between p-5 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Clone Repos: Admins Only</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">When enabled, only admins can clone repositories from external URLs.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" data-setting-key="clone_repos_admin_only" class="sr-only peer setting-toggle"
                            {% if settings.get('clone_repos_admin_only', '0') == '1' %}checked{% endif %}>
                        <div
                            class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-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-blue-500 peer-checked:after:bg-white">
                        </div>
                    </label>
                </div>

                {# Git transport: HTTP vs SSH #}
                <div class="flex flex-col p-5 bg-white/[0.03] rounded-2xl border border-white/5 gap-4">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Git transport</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Control smart HTTP and SSH git access. Users add SSH keys in User Settings. Run <code class="text-zinc-400">opengit-git-ssh.service</code> when SSH is enabled — see <code class="text-zinc-400">wiki/git-ssh-transport.md</code>.</p>
                    </div>
                    <div class="flex items-center justify-between gap-4">
                        <span class="text-sm text-zinc-300">Enable Git over HTTP(S)</span>
                        <label class="relative inline-flex items-center cursor-pointer shrink-0">
                            <input type="checkbox" data-setting-key="git_transport_http_enabled" class="sr-only peer setting-toggle"
                                {% if settings.get('git_transport_http_enabled', '1') == '1' %}checked{% endif %}>
                            <div class="w-11 h-6 bg-zinc-800 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-zinc-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500 peer-checked:after:bg-white"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between gap-4">
                        <span class="text-sm text-zinc-300">Enable Git over SSH</span>
                        <label class="relative inline-flex items-center cursor-pointer shrink-0">
                            <input type="checkbox" data-setting-key="git_transport_ssh_enabled" class="sr-only peer setting-toggle"
                                {% if settings.get('git_transport_ssh_enabled', '1') == '1' %}checked{% endif %}>
                            <div class="w-11 h-6 bg-zinc-800 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-zinc-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500 peer-checked:after:bg-white"></div>
                        </label>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2 border-t border-white/5">
                        <div>
                            <label class="text-[10px] text-zinc-500 uppercase font-bold">SSH listen port</label>
                            <input type="number" data-setting-key="git_ssh_listen_port" min="1" max="65535" step="1"
                                class="setting-text-input mt-1 w-full bg-white/[0.02] border border-white/5 rounded-xl px-3 py-2 text-sm text-white"
                                value="{{ settings.get('git_ssh_listen_port', '2222') }}">
                        </div>
                        <div>
                            <label class="text-[10px] text-zinc-500 uppercase font-bold">SSH hostname (clone URL)</label>
                            <p class="text-[10px] text-zinc-500 mt-1">Leave empty for automatic: the same host visitors use (e.g. LAN IP or <span class="text-zinc-400">gitssy.example.com</span>). Override only if SSH must advertise a different name.</p>
                            <input type="text" data-setting-key="git_ssh_public_host"
                                class="setting-text-input mt-1 w-full bg-white/[0.02] border border-white/5 rounded-xl px-3 py-2 text-sm text-white font-mono"
                                placeholder="(automatic from browser)" value="{{ settings.get('git_ssh_public_host', '') }}">
                        </div>
                    </div>
                    <div>
                        <label class="text-[10px] text-zinc-500 uppercase font-bold">Clone URL shown in UI</label>
                        {% set pref = settings.get('git_clone_url_preference', 'both') %}
                        {% set pref_labels = {'https': 'HTTPS only', 'ssh': 'SSH only', 'both': 'Both (tabs)'} %}
                        {{ custom_select(id="git-clone-url-preference", options=[
                            {"value": "https", "label": "HTTPS only"},
                            {"value": "ssh", "label": "SSH only"},
                            {"value": "both", "label": "Both (tabs)"}
                        ], selected_value=pref, selected_label=pref_labels[pref] if pref in pref_labels else 'Both (tabs)', mode="form", class="w-full mt-1", data_setting_key="git_clone_url_preference", picker_title="Clone URL in UI") }}
                    </div>
                </div>

                {# Ollama Section #}
                <div class="flex flex-col p-5 bg-white/[0.03] rounded-2xl border border-white/5 gap-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-sm font-semibold text-white">Ollama Commit Generation</h3>
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Generate commit title and description from diffs using a local LLM.</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" data-setting-key="ollama_enabled" class="sr-only peer setting-toggle"
                                {% if settings.get('ollama_enabled', '0') == '1' %}checked{% endif %}>
                            <div
                                class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-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-blue-500 peer-checked:after:bg-white">
                            </div>
                        </label>
                    </div>
                    <div class="grid grid-cols-1 gap-4 pt-2 border-t border-white/5">
                        <div>
                            <label class="block text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-1">Server URL</label>
                            <input type="text" data-setting-key="ollama_url" class="setting-text-input w-full bg-white/[0.02] border border-white/5 rounded-xl px-3 py-2 text-sm text-zinc-300 focus:ring-1 focus:ring-blue-500/50 outline-none"
                                value="{{ settings.get('ollama_url', 'http://192.168.1.222:11434') }}"
                                placeholder="http://192.168.1.222:11434">
                        </div>
                        <div>
                            <label class="block text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-1">Model</label>
                            <input type="text" data-setting-key="ollama_model" class="setting-text-input w-full bg-white/[0.02] border border-white/5 rounded-xl px-3 py-2 text-sm text-zinc-300 focus:ring-1 focus:ring-blue-500/50 outline-none"
                                value="{{ settings.get('ollama_model', 'qwen2.5:7b-instruct') }}"
                                placeholder="qwen2.5:7b-instruct">
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="flex-1">
                                <h4 class="text-xs font-semibold text-white">Keep model in VRAM</h4>
                                <p class="text-[10px] text-zinc-500 mt-0.5">Configure your Ollama server to keep models loaded for faster responses. Uses more VRAM.</p>
                            </div>
                            <button type="button" id="ollama-keepalive-info-btn"
                                class="flex-shrink-0 p-2.5 bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/20 rounded-xl text-blue-400 transition-colors"
                                title="How to enable keep-alive">
                                <i data-lucide="info" class="h-5 w-5"></i>
                            </button>
                        </div>
                    </div>
                </div>

                {# Welcome Modal Message #}
                <div class="flex flex-col p-5 bg-white/[0.03] rounded-2xl border border-white/5 gap-4">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Welcome Modal Message</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Customizable intro text shown to new users in the welcome modal. Leave empty for the default.</p>
                    </div>
                    <textarea data-setting-key="welcome_message" class="setting-text-input w-full bg-white/[0.02] border border-white/5 rounded-xl px-3 py-2 text-sm text-zinc-300 focus:ring-1 focus:ring-blue-500/50 outline-none min-h-[80px] resize-y"
                        placeholder="{{ brand_name }} is a self-hosted Git hosting platform with integrated dev tools...">{{ settings.get('welcome_message', '') }}</textarea>
                </div>

                {# Max Clone Size #}
                <div class="flex items-center justify-between p-5 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Max Clone Size (MB)</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Maximum repository size when cloning from URL. Prevents abuse. 0 = no limit.</p>
                    </div>
                    <div class="flex items-center bg-white/[0.02] p-1.5 rounded-xl border border-white/5 w-24">
                        <input type="number" data-setting-key="clone_repos_max_size_mb" min="0" step="1"
                            value="{{ settings.get('clone_repos_max_size_mb', '500') }}"
                            class="setting-number-input bg-transparent border-none text-sm text-zinc-300 w-full focus:ring-0 px-3 outline-none text-right">
                        <span class="text-[10px] font-black text-zinc-700 pr-1">MB</span>
                    </div>
                </div>

                {# Secret Key Display #}
                <div class="flex flex-col p-5 bg-white/[0.03] rounded-2xl border border-white/5 gap-4">
                    <div>
                        <h3 class="text-sm font-semibold text-white">Secret Key</h3>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Used for session
                            security. <span class="text-red-400/80">Restart required if changed.</span></p>
                    </div>
                    <div class="flex items-center justify-between bg-white/[0.02] p-1.5 rounded-xl border border-white/5">
                        <span id="secret-key-display" class="font-mono text-[10px] text-zinc-400 px-3">{{
                            settings.secret_key_display }}</span>
                        <button id="generate-secret-key-modal-btn"
                            class="glass-button px-4 py-2 rounded-xl text-[10px] font-black uppercase text-yellow-500 hover:text-yellow-400">Generate
                            New</button>
                    </div>
                </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">Done</button>
        </div>
    </div>
</div>

{# Ollama keep-alive info modal #}
<div id="ollama-keepalive-info-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[60] p-4">
    <div class="modal-backdrop ollama-keepalive-backdrop fixed inset-0 bg-black/60 modal-transition"></div>
    <div class="modal-content glass-modal rounded-2xl shadow-3xl w-full max-w-xl border border-white/10 modal-content-transition relative overflow-hidden max-h-[90vh] flex flex-col">
        <div class="p-6 flex-shrink-0 flex items-center justify-between border-b border-white/5">
            <div class="flex items-center gap-3">
                <div class="p-2.5 bg-blue-500/10 rounded-xl border border-blue-500/20">
                    <i data-lucide="info" class="h-5 w-5 text-blue-400"></i>
                </div>
                <h3 class="text-lg font-bold text-white">Keep model in VRAM</h3>
            </div>
            <button type="button"
                class="ollama-keepalive-close p-3 bg-white/[0.03] hover:bg-red-500/20 border border-white/5 hover:border-red-500/30 rounded-xl text-zinc-500 hover:text-red-400 transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>
        <div class="flex-1 overflow-y-auto p-6 space-y-4 text-sm text-zinc-400 custom-scrollbar">
            <p>Ollama has a keep-alive feature to hold a model in VRAM for a custom duration. By default, it unloads models after 5 minutes of inactivity.</p>
            <p class="font-semibold text-zinc-300">You can define the duration using:</p>
            <ul class="list-disc list-inside space-y-1 ml-2">
                <li>A duration string (e.g. <code class="text-blue-400 bg-white/5 px-1 rounded">10m</code>, <code class="text-blue-400 bg-white/5 px-1 rounded">24h</code>)</li>
                <li>An integer representing seconds (e.g. <code class="text-blue-400 bg-white/5 px-1 rounded">3600</code>)</li>
                <li><code class="text-blue-400 bg-white/5 px-1 rounded">-1</code> to keep the model loaded indefinitely</li>
                <li><code class="text-blue-400 bg-white/5 px-1 rounded">0</code> to unload the model immediately after a response</li>
            </ul>
            <p>While appending a <code class="text-blue-400 bg-white/5 px-1 rounded">--keepalive</code> flag to an <code class="text-blue-400 bg-white/5 px-1 rounded">ollama run</code> command works for a temporary session, configuring the <code class="text-blue-400 bg-white/5 px-1 rounded">OLLAMA_KEEP_ALIVE</code> environment variable at the system level is the most reliable approach for persistent server stability. Configuring this through systemd ensures that third-party clients cannot inadvertently override your memory management.</p>
            <p class="font-semibold text-zinc-300">Configuration steps for Linux</p>
            <ol class="list-decimal list-inside space-y-3 ml-2">
                <li>Edit the Ollama systemd service:
                    <pre class="mt-2 p-4 bg-black/30 rounded-xl border border-white/5 text-zinc-300 text-xs overflow-x-auto"><code>sudo systemctl edit ollama.service</code></pre>
                </li>
                <li>Add the environment variable under the service section:
                    <pre class="mt-2 p-4 bg-black/30 rounded-xl border border-white/5 text-zinc-300 text-xs overflow-x-auto"><code>[Service]
Environment="OLLAMA_KEEP_ALIVE=-1"</code></pre>
                </li>
                <li>Reload the daemon and restart the service:
                    <pre class="mt-2 p-4 bg-black/30 rounded-xl border border-white/5 text-zinc-300 text-xs overflow-x-auto"><code>sudo systemctl daemon-reload
sudo systemctl restart ollama</code></pre>
                </li>
            </ol>
        </div>
    </div>
</div>