cv-site/templates/partials/navigation/view-controls.html

{{define "view-controls"}}
<!-- Center: View controls with labels -->
<div class="view-controls-center">
    <!-- CV Length toggle -->
    <div class="selector-group" id="desktop-length-toggle">
        <label class="selector-label" id="length-toggle-label">{{.UI.ViewControls.Length}}:</label>
        <label class="icon-toggle">
            <input type="checkbox"
                   id="lengthToggle"
                   aria-labelledby="length-toggle-label"
                   {{if eq .CVLengthClass "cv-long"}}checked{{end}}
                   hx-post="/toggle/length?lang={{.Lang}}"
                   hx-swap="none"
                   _="on change call toggleCVLength(my.checked)">
            <span class="icon-toggle-slider">
                <iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
                <iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
            </span>
        </label>
        <iconify-icon icon="mdi:loading"
                      class="htmx-indicator spinning small light"
                      width="14"
                      height="14"
                      aria-label="Saving"></iconify-icon>
    </div>

    <!-- Icon toggle -->
    <div class="selector-group" id="desktop-icon-toggle">
        <label class="selector-label" id="icon-toggle-label">{{.UI.ViewControls.Icons}}:</label>
        <label class="icon-toggle">
            <input type="checkbox"
                   id="iconToggle"
                   aria-labelledby="icon-toggle-label"
                   {{if .ShowIcons}}checked{{end}}
                   hx-post="/toggle/icons?lang={{.Lang}}"
                   hx-swap="none"
                   _="on change call toggleIcons(my.checked)">
            <span class="icon-toggle-slider">
                <iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
                <iconify-icon icon="mdi:image-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
            </span>
        </label>
        <iconify-icon icon="mdi:loading"
                      class="htmx-indicator spinning small light"
                      width="14"
                      height="14"
                      aria-label="Saving"></iconify-icon>
    </div>

    <!-- Theme toggle -->
    <div class="selector-group" id="desktop-theme-toggle">
        <label class="selector-label" id="theme-toggle-label">{{.UI.ViewControls.View}}:</label>
        <label class="icon-toggle">
            <input type="checkbox"
                   id="themeToggle"
                   aria-labelledby="theme-toggle-label"
                   {{if .ThemeClean}}checked{{end}}
                   hx-post="/toggle/theme?lang={{.Lang}}"
                   hx-swap="none"
                   _="on change call toggleTheme(my.checked)">
            <span class="icon-toggle-slider">
                <iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
                <iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>
            </span>
        </label>
        <iconify-icon icon="mdi:loading"
                      class="htmx-indicator spinning small light"
                      width="14"
                      height="14"
                      aria-label="Saving"></iconify-icon>
    </div>
</div>
{{end}}