{# Keyboard Shortcuts Help Modal - Phase 5 Navigation #}
<div class="modal shortcuts-modal" id="shortcuts-modal" role="dialog" aria-labelledby="shortcuts-title" aria-hidden="true">
    <div class="modal-backdrop" onclick="document.getElementById('shortcuts-modal').classList.remove('open')"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="shortcuts-title">Keyboard Shortcuts</h3>
            <button class="modal-close" onclick="document.getElementById('shortcuts-modal').classList.remove('open')" aria-label="Close">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                </svg>
            </button>
        </div>

        <div class="shortcuts-grid">
            <div class="shortcut-group">
                <h4>Navigation</h4>
                <dl class="shortcuts-list">
                    <div class="shortcut-item">
                        <dt><kbd>g</kbd> <kbd>h</kbd></dt>
                        <dd>Go to Dashboard</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd>g</kbd> <kbd>c</kbd></dt>
                        <dd>Go to Configs</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd>g</kbd> <kbd>s</kbd></dt>
                        <dd>Go to Schedules</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd>g</kbd> <kbd>j</kbd></dt>
                        <dd>Go to Jobs</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd>g</kbd> <kbd>f</kbd></dt>
                        <dd>Go to Freshness</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd>g</kbd> <kbd>d</kbd></dt>
                        <dd>Go to Diagnostics</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd>g</kbd> <kbd>t</kbd></dt>
                        <dd>Go to Tier & Usage</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd>/</kbd></dt>
                        <dd>Focus search</dd>
                    </div>
                </dl>
            </div>

            <div class="shortcut-group">
                <h4>Actions</h4>
                <dl class="shortcuts-list">
                    <div class="shortcut-item">
                        <dt><kbd class="mod-key">⌘</kbd><kbd>K</kbd></dt>
                        <dd>Quick search</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd class="mod-key">⌘</kbd><kbd>S</kbd></dt>
                        <dd>Save form</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd class="mod-key">⌘</kbd><kbd>↵</kbd></dt>
                        <dd>Run sync</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd>Esc</kbd></dt>
                        <dd>Close modal/dropdown</dd>
                    </div>
                    <div class="shortcut-item">
                        <dt><kbd>?</kbd></dt>
                        <dd>Show this help</dd>
                    </div>
                </dl>
            </div>
        </div>

        <div class="modal-footer">
            <p class="shortcuts-tip">
                <strong>Tip:</strong> Type <kbd>g</kbd> followed by a letter to navigate quickly.
            </p>
            <button class="btn btn-secondary" onclick="document.getElementById('shortcuts-modal').classList.remove('open')">
                Close
            </button>
        </div>
    </div>
</div>

<script>
// Update modifier key display based on platform
document.addEventListener('DOMContentLoaded', function() {
    const isMac = navigator.platform.includes('Mac');
    const modKeys = document.querySelectorAll('.mod-key');
    modKeys.forEach(function(key) {
        key.textContent = isMac ? '⌘' : 'Ctrl';
    });
});
</script>