{{define "shortcuts-modal"}}
<!-- Keyboard Shortcuts Modal - Native Dialog -->
<dialog id="shortcuts-modal" class="info-modal no-print"
        _="on click
             if event.target is me
               call me.close()
             end">
    <div class="info-modal-content">
        <button class="info-modal-close" onclick="document.getElementById('shortcuts-modal').close()" aria-label="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
            <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
        </button>

        <div class="info-modal-header">
            <h2>{{.UI.ShortcutsModal.Title}}</h2>
            <div class="info-modal-cv-title">
                <span class="keyboard-icon-wrapper">
                    <iconify-icon icon="mdi:keyboard-outline" width="32" height="32"></iconify-icon>
                </span>
                {{if eq .Lang "es"}}Aprende los Atajos{{else}}Learn the Shortcuts{{end}}
            </div>
        </div>

        <div class="info-modal-body">

            <!-- Zoom Shortcuts -->
            <div class="shortcuts-section">
                <h3 class="shortcuts-section-title">
                    <iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
                    {{.UI.ShortcutsModal.Sections.Zoom.Title}}
                </h3>
                <div class="shortcuts-list">
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>+</kbd>
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomIn.Description}}</span>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>−</kbd>
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomOut.Description}}</span>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>0</kbd>
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomReset.Description}}</span>
                    </div>
                </div>
            </div>

            <!-- View Controls -->
            <div class="shortcuts-section">
                <h3 class="shortcuts-section-title">
                    <iconify-icon icon="mdi:tune-variant" width="20" height="20"></iconify-icon>
                    {{.UI.ShortcutsModal.Sections.ViewControls.Title}}
                </h3>
                <div class="shortcuts-list">
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Length
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleLength.Description}}</span>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Icons
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleIcons.Description}}</span>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to View
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleTheme.Description}}</span>
                    </div>
                </div>
            </div>

            <!-- Navigation -->
            <div class="shortcuts-section">
                <h3 class="shortcuts-section-title">
                    <iconify-icon icon="mdi:compass-outline" width="20" height="20"></iconify-icon>
                    {{.UI.ShortcutsModal.Sections.Navigation.Title}}
                </h3>
                <div class="shortcuts-list">
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            Menu → Expand All
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ExpandAll.Description}}</span>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            Menu → Collapse All
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.CollapseAll.Description}}</span>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            Click <kbd>↑</kbd> Button
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ScrollToTop.Description}}</span>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="shortcuts-section">
                <h3 class="shortcuts-section-title">
                    <iconify-icon icon="mdi:lightning-bolt" width="20" height="20"></iconify-icon>
                    {{.UI.ShortcutsModal.Sections.Actions.Title}}
                </h3>
                <div class="shortcuts-list">
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>P</kbd>
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.Print.Description}}</span>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:keyboard-esc" width="14" height="14"></iconify-icon></kbd>
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.CloseModal.Description}}</span>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd>?</kbd>
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.ShowHelp.Description}}</span>
                    </div>
                </div>
            </div>

            <!-- Browser Defaults -->
            <div class="shortcuts-section">
                <h3 class="shortcuts-section-title">
                    <iconify-icon icon="mdi:web" width="20" height="20"></iconify-icon>
                    {{.UI.ShortcutsModal.Sections.Browser.Title}}
                </h3>
                <div class="shortcuts-list">
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd>
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Tab.Description}}</span>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-keys">
                            <kbd><iconify-icon icon="mdi:keyboard-return" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:keyboard-space" width="14" height="14"></iconify-icon></kbd>
                        </div>
                        <span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Enter.Description}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>
{{end}}