TimeTracker/app/templates/main/help.html

{% extends "base.html" %}

{% block title %}{{ _('Help') }} - {{ app_name }}{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
    <div>
        <h1 class="text-2xl font-bold">{{ _('Help') }}</h1>
        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Complete documentation and user guide') }}</p>
    </div>
    <div class="text-sm text-text-muted-light dark:text-text-muted-dark mt-2 md:mt-0">
        <i class="fas fa-question-circle"></i> / {{ _('Help') }}
        </div>
    </div>
    
<div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
    <!-- Left sticky navigation -->
    <aside class="lg:col-span-1">
        <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark rounded-lg shadow p-4 lg:sticky lg:top-4">
            <h3 class="font-semibold mb-3"><i class="fas fa-list mr-2"></i>{{ _('Quick Navigation') }}</h3>
            <div class="relative mb-3">
                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                <input id="help-nav-filter" type="text" placeholder="{{ _('Filter sections...') }}" class="w-full pl-9 pr-3 py-2 text-sm rounded border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark" />
            </div>
            <nav id="help-nav" class="flex flex-col text-sm">
                <a class="help-link py-1 hover:text-primary" href="#quick-start"><i class="fas fa-rocket mr-2"></i>{{ _('Quick Start') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#time-tracking"><i class="fas fa-stopwatch mr-2"></i>{{ _('Time Tracking') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#project-management"><i class="fas fa-project-diagram mr-2"></i>{{ _('Project Management') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#client-management"><i class="fas fa-building mr-2"></i>{{ _('Client Management') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#task-management"><i class="fas fa-tasks mr-2"></i>{{ _('Task Management') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#kanban-board"><i class="fas fa-columns mr-2"></i>{{ _('Kanban Board') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#invoicing"><i class="fas fa-file-invoice-dollar mr-2"></i>{{ _('Invoicing') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#expenses"><i class="fas fa-receipt mr-2"></i>{{ _('Expenses') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#reports-analytics"><i class="fas fa-chart-line mr-2"></i>{{ _('Reports & Analytics') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#productivity"><i class="fas fa-keyboard mr-2"></i>{{ _('Productivity Features') }}</a>
                {% if current_user.is_admin %}
                <a class="help-link py-1 hover:text-primary" href="#admin-features"><i class="fas fa-cog mr-2"></i>{{ _('Admin Features') }}</a>
                {% endif %}
                <a class="help-link py-1 hover:text-primary" href="#mobile-usage"><i class="fas fa-mobile-alt mr-2"></i>{{ _('Mobile Usage') }}</a>
                <a class="help-link py-1 hover:text-primary" href="#troubleshooting"><i class="fas fa-tools mr-2"></i>{{ _('Troubleshooting') }}</a>
            </nav>
        </div>
    </aside>

    <!-- Main content -->
    <section class="lg:col-span-4 space-y-8">
        <!-- Hero -->
        <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow text-center">
            <h2 class="text-xl font-semibold mb-1">{{ _('TimeTracker Help Center') }}</h2>
            <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Everything you need to know to get the most out of TimeTracker') }}</p>

            <div class="flex flex-wrap gap-2 justify-center mt-4">
                <a href="{{ url_for('timer.manual_entry') }}" class="px-3 py-2 rounded-lg bg-primary text-white text-sm hover:opacity-90">
                    <i class="fas fa-play mr-1"></i>{{ _('Start Tracking Time') }}
                </a>
                <a href="{{ url_for('projects.list_projects') }}" class="px-3 py-2 rounded-lg border border-border-light dark:border-border-dark text-sm hover:bg-background-light dark:hover:bg-background-dark">
                    <i class="fas fa-project-diagram mr-1"></i>{{ _('View Projects') }}
                </a>
                <a href="{{ url_for('reports.reports') }}" class="px-3 py-2 rounded-lg border border-sky-600 text-sky-600 text-sm hover:bg-sky-50 dark:hover:bg-sky-900/20">
                    <i class="fas fa-chart-bar mr-1"></i>{{ _('Generate Reports') }}
                    </a>
                    {% if current_user.is_admin %}
                <a href="{{ url_for('admin.settings') }}" class="px-3 py-2 rounded-lg border border-amber-600 text-amber-600 text-sm hover:bg-amber-50 dark:hover:bg-amber-900/20">
                    <i class="fas fa-cog mr-1"></i>{{ _('System Settings') }}
                    </a>
                    {% endif %}
                </div>
            </div>

        <!-- Quick Start -->
        <section id="quick-start" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-rocket text-primary mr-2"></i>{{ _('Quick Start Guide') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('For New Users') }}</h4>
                    <ol class="list-decimal ml-5 space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li>{{ _('Log in with your username (no password required)') }}</li>
                        <li>{{ _('Explore the dashboard to see your overview') }}</li>
                        <li>{{ _('Start your first timer on an existing project') }}</li>
                        <li>{{ _('View your time entries in reports') }}</li>
                                </ol>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('For Administrators') }}</h4>
                    <ol class="list-decimal ml-5 space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li>{{ _('Set up clients in the Client Management section') }}</li>
                        <li>{{ _('Create projects and assign them to clients') }}</li>
                        <li>{{ _('Configure system settings (timezone, currency, etc.)') }}</li>
                        <li>{{ _('Manage users and permissions') }}</li>
                                </ol>
                            </div>
                        </div>
            <div class="mt-4 flex items-start gap-3 p-3 rounded-lg border border-sky-600/30 bg-sky-50 dark:bg-sky-900/20 text-sm">
                <i class="fas fa-lightbulb text-sky-600 mt-0.5"></i>
                <p class="text-text-muted-light dark:text-text-muted-dark"><strong>{{ _('Pro Tip:') }}</strong> {{ _('Use the mobile-friendly interface to track time on the go. The timer continues running even if you close your browser!') }}</p>
                </div>
            </section>

            <!-- Time Tracking -->
        <section id="time-tracking" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-stopwatch text-green-600 mr-2"></i>{{ _('Time Tracking') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mb-4">
                <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                    <h4 class="font-semibold mb-1">{{ _('Smart Timers') }}</h4>
                    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Real-time tracking with automatic idle detection and WebSocket updates') }}</p>
                    </div>
                <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                    <h4 class="font-semibold mb-1">{{ _('Manual Entry') }}</h4>
                    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Log time manually with custom start and end times') }}</p>
                </div>
                    </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Starting a Timer') }}</h4>
                    <ol class="list-decimal ml-5 space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Navigate to the Timer page or dashboard') }}</li>
                                    <li>{{ _('Select a project from the dropdown') }}</li>
                                    <li>{{ _('Optionally select a task for more detailed tracking') }}</li>
                                    <li>{{ _('Add notes about what you\'re working on (optional)') }}</li>
                                    <li>{{ _('Add tags separated by commas (optional)') }}</li>
                                    <li>{{ _('Click "Start Timer"') }}</li>
                                </ol>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Timer Features') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-check text-green-600 mr-2"></i>{{ _('Real-time duration display') }}</li>
                        <li><i class="fas fa-check text-green-600 mr-2"></i>{{ _('Continues running if browser closes') }}</li>
                        <li><i class="fas fa-check text-green-600 mr-2"></i>{{ _('Automatic idle detection (configurable)') }}</li>
                        <li><i class="fas fa-check text-green-600 mr-2"></i>{{ _('One active timer per user (configurable)') }}</li>
                        <li><i class="fas fa-check text-green-600 mr-2"></i>{{ _('WebSocket live updates') }}</li>
                                </ul>
                </div>
                    </div>
            <div class="mt-6">
                <h4 class="font-semibold mb-2">{{ _('Manual Time Entry') }}</h4>
                <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-3">{{ _('Create time entries manually when you need to record time spent away from the computer or adjust existing entries.') }}</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                    <div>
                        <h5 class="font-semibold">{{ _('Required Information') }}</h5>
                        <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Project selection') }}</li>
                                    <li>{{ _('Start date and time') }}</li>
                                    <li>{{ _('End date and time') }}</li>
                                </ul>
                            </div>
                    <div>
                        <h5 class="font-semibold">{{ _('Optional Information') }}</h5>
                        <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Task assignment') }}</li>
                                    <li>{{ _('Description/notes') }}</li>
                                    <li>{{ _('Tags for categorization') }}</li>
                                    <li>{{ _('Billable status override') }}</li>
                                </ul>
                        </div>
                    </div>
                </div>
            <div class="mt-6">
                <h4 class="font-semibold mb-2">{{ _('Advanced Time Entry Features') }}</h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                    <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                        <h5 class="font-semibold mb-2"><i class="fas fa-calendar-week text-primary mr-2"></i>{{ _('Bulk Entry') }}</h5>
                        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Create multiple time entries for consecutive days with the same project and duration. Perfect for regular work patterns.') }}</p>
                    </div>
                    <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                        <h5 class="font-semibold mb-2"><i class="fas fa-save text-green-600 mr-2"></i>{{ _('Templates') }}</h5>
                        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Save frequently used time entries as templates for quick reuse. Saves project, task, and notes.') }}</p>
                    </div>
                    <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                        <h5 class="font-semibold mb-2"><i class="fas fa-calendar text-sky-600 mr-2"></i>{{ _('Calendar View') }}</h5>
                        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Visualize your time entries on a calendar. Drag-and-drop to reschedule or click dates to add entries.') }}</p>
                    </div>
                </div>
            </div>
            </section>

            <!-- Project Management -->
        <section id="project-management" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-project-diagram text-sky-600 mr-2"></i>{{ _('Project Management') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Project Information') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-tag text-primary mr-2"></i><strong>{{ _('Name') }}:</strong> {{ _('Descriptive project name') }}</li>
                        <li><i class="fas fa-building text-green-600 mr-2"></i><strong>{{ _('Client') }}:</strong> {{ _('Associated client organization') }}</li>
                        <li><i class="fas fa-align-left text-sky-600 mr-2"></i><strong>{{ _('Description') }}:</strong> {{ _('Project details and scope') }}</li>
                        <li><i class="fas fa-calendar text-amber-600 mr-2"></i><strong>{{ _('Status') }}:</strong> {{ _('Active, completed, or archived') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Billing Information') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-dollar-sign text-green-600 mr-2"></i><strong>{{ _('Billable') }}:</strong> {{ _('Whether time should be tracked for billing') }}</li>
                        <li><i class="fas fa-money-bill text-sky-600 mr-2"></i><strong>{{ _('Hourly Rate') }}:</strong> {{ _('Rate for billable time calculations') }}</li>
                        <li><i class="fas fa-hashtag text-amber-600 mr-2"></i><strong>{{ _('Billing Reference') }}:</strong> {{ _('PO number or billing code') }}</li>
                                </ul>
                            </div>
                        </div>
                {% if current_user.is_admin %}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mt-6">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Project Operations') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Create new projects with client relationships') }}</li>
                                    <li>{{ _('Edit existing projects to update details') }}</li>
                                    <li>{{ _('Archive projects to hide from timers (preserves data)') }}</li>
                                    <li>{{ _('Delete projects (removes all associated time entries)') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Best Practices') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Use descriptive project names') }}</li>
                                    <li>{{ _('Set accurate hourly rates for billing') }}</li>
                                    <li>{{ _('Archive instead of delete when possible') }}</li>
                                    <li>{{ _('Use billing references for external tracking') }}</li>
                                </ul>
                    </div>
                </div>
                {% endif %}
            </section>

            <!-- Client Management -->
        <section id="client-management" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-building text-amber-600 mr-2"></i>{{ _('Client Management') }}</h3>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">{{ _('The client management system helps organize your work by client organizations, preventing errors and streamlining project creation.') }}</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Client Information') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-building text-primary mr-2"></i><strong>{{ _('Organization Name') }}:</strong> {{ _('Company or client name') }}</li>
                        <li><i class="fas fa-user text-green-600 mr-2"></i><strong>{{ _('Contact Person') }}:</strong> {{ _('Primary contact details') }}</li>
                        <li><i class="fas fa-envelope text-sky-600 mr-2"></i><strong>{{ _('Email & Phone') }}:</strong> {{ _('Contact information') }}</li>
                        <li><i class="fas fa-map-marker-alt text-amber-600 mr-2"></i><strong>{{ _('Address') }}:</strong> {{ _('Business address') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Benefits') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-check text-green-600 mr-2"></i>{{ _('Dropdown selection prevents typos') }}</li>
                        <li><i class="fas fa-check text-green-600 mr-2"></i>{{ _('Default rates auto-populate projects') }}</li>
                        <li><i class="fas fa-check text-green-600 mr-2"></i>{{ _('Consistent client naming') }}</li>
                        <li><i class="fas fa-check text-green-600 mr-2"></i>{{ _('Easier project organization') }}</li>
                                </ul>
                            </div>
                        </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm mt-6">
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <i class="fas fa-project-diagram text-primary mb-2"></i>
                    <h5 class="font-semibold">{{ _('Project Count') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Total and active projects') }}</p>
                    </div>
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <i class="fas fa-clock text-green-600 mb-2"></i>
                    <h5 class="font-semibold">{{ _('Time Tracking') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Total hours worked') }}</p>
                </div>
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <i class="fas fa-dollar-sign text-sky-600 mb-2"></i>
                    <h5 class="font-semibold">{{ _('Cost Estimation') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Estimated billing amounts') }}</p>
                </div>
                </div>
            </section>

            <!-- Task Management -->
        <section id="task-management" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-tasks text-red-500 mr-2"></i>{{ _('Task Management') }}</h3>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">{{ _('Break down projects into manageable tasks with detailed tracking and progress monitoring.') }}</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Task Properties') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-tag text-primary mr-2"></i><strong>{{ _('Name & Description') }}:</strong> {{ _('Clear task identification') }}</li>
                        <li><i class="fas fa-flag text-amber-600 mr-2"></i><strong>{{ _('Priority Levels') }}:</strong> {{ _('Low, Medium, High, Urgent') }}</li>
                        <li><i class="fas fa-calendar text-sky-600 mr-2"></i><strong>{{ _('Due Dates') }}:</strong> {{ _('Deadline tracking') }}</li>
                        <li><i class="fas fa-user text-green-600 mr-2"></i><strong>{{ _('Assignment') }}:</strong> {{ _('Task ownership') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Status Tracking') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-circle text-gray-400 mr-2"></i>{{ _('To Do - Not started') }}</li>
                        <li><i class="fas fa-circle text-primary mr-2"></i>{{ _('In Progress - Currently working') }}</li>
                        <li><i class="fas fa-circle text-amber-500 mr-2"></i>{{ _('Review - Ready for review') }}</li>
                        <li><i class="fas fa-circle text-green-600 mr-2"></i>{{ _('Done - Completed') }}</li>
                        <li><i class="fas fa-circle text-red-500 mr-2"></i>{{ _('Cancelled - Not needed') }}</li>
                                </ul>
                </div>
                    </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mt-6">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Time Tracking Features') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Start timers directly from tasks') }}</li>
                                    <li>{{ _('Link time entries to specific tasks') }}</li>
                                    <li>{{ _('Track estimated vs actual hours') }}</li>
                                    <li>{{ _('Monitor task progress automatically') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Task Views') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('My Tasks - Your assigned tasks') }}</li>
                                    <li>{{ _('All Tasks - Complete task list') }}</li>
                                    <li>{{ _('Overdue Tasks - Past due items') }}</li>
                                    <li>{{ _('Project Tasks - Tasks within projects') }}</li>
                                </ul>
                    </div>
                </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mt-6">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Collaboration Features') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-comments text-primary mr-2"></i>{{ _('Task Comments - Threaded discussions on tasks') }}</li>
                        <li><i class="fas fa-markdown text-green-600 mr-2"></i>{{ _('Markdown Support - Rich formatting in descriptions') }}</li>
                        <li><i class="fas fa-at text-sky-600 mr-2"></i>{{ _('User Mentions - Tag team members (if enabled)') }}</li>
                        <li><i class="fas fa-paperclip text-amber-600 mr-2"></i>{{ _('File Attachments - Attach files to tasks (if enabled)') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Markdown Formatting') }}</h4>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Task and project descriptions support Markdown:') }}</p>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark text-xs">
                                    <li>{{ _('**Bold**, *Italic*, ~~Strikethrough~~') }}</li>
                                    <li>{{ _('# Headings, - Lists, [Links](url)') }}</li>
                                    <li>{{ _('```code blocks```, tables, images') }}</li>
                                </ul>
                    </div>
                </div>
            </section>

            <!-- Kanban Board -->
        <section id="kanban-board" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-columns text-indigo-600 mr-2"></i>{{ _('Kanban Board') }}</h3>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">{{ _('Visualize your workflow with a drag-and-drop Kanban board for intuitive task management.') }}</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Board Features') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-columns text-primary mr-2"></i>{{ _('Customizable columns matching task statuses') }}</li>
                        <li><i class="fas fa-hand-pointer text-green-600 mr-2"></i>{{ _('Drag-and-drop tasks between columns') }}</li>
                        <li><i class="fas fa-filter text-sky-600 mr-2"></i>{{ _('Filter by project, user, or priority') }}</li>
                        <li><i class="fas fa-search text-amber-600 mr-2"></i>{{ _('Quick search across all tasks') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Using the Kanban Board') }}</h4>
                    <ol class="list-decimal ml-5 space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Access from the Tasks menu or project page') }}</li>
                                    <li>{{ _('Drag tasks to different columns to change status') }}</li>
                                    <li>{{ _('Click on a task card to view/edit details') }}</li>
                                    <li>{{ _('Use filters to focus on specific work') }}</li>
                                </ol>
                    </div>
                </div>
            <div class="mt-4 flex items-start gap-3 p-3 rounded-lg border border-indigo-600/30 bg-indigo-50 dark:bg-indigo-900/20 text-sm">
                <i class="fas fa-lightbulb text-indigo-600 mt-0.5"></i>
                <p class="text-text-muted-light dark:text-text-muted-dark"><strong>{{ _('Pro Tip:') }}</strong> {{ _('The Kanban board is perfect for sprint planning and daily standups. Each column represents a stage in your workflow!') }}</p>
                </div>
            </section>

            <!-- Expenses -->
        <section id="expenses" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-receipt text-purple-600 mr-2"></i>{{ _('Expense Tracking') }}</h3>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">{{ _('Track business expenses, manage receipts, and handle reimbursements efficiently.') }}</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Expense Features') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-folder text-primary mr-2"></i>{{ _('Categorize expenses (travel, meals, supplies, etc.)') }}</li>
                        <li><i class="fas fa-paperclip text-green-600 mr-2"></i>{{ _('Attach receipt images and documents') }}</li>
                        <li><i class="fas fa-dollar-sign text-sky-600 mr-2"></i>{{ _('Track amounts, tax, and payment methods') }}</li>
                        <li><i class="fas fa-check-circle text-amber-600 mr-2"></i>{{ _('Approval workflow for expense requests') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Billing & Reimbursement') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-money-bill-wave text-primary mr-2"></i>{{ _('Mark expenses as billable to clients') }}</li>
                        <li><i class="fas fa-file-invoice text-green-600 mr-2"></i>{{ _('Include expenses in client invoices') }}</li>
                        <li><i class="fas fa-hand-holding-usd text-sky-600 mr-2"></i>{{ _('Track reimbursement status') }}</li>
                        <li><i class="fas fa-project-diagram text-amber-600 mr-2"></i>{{ _('Link expenses to specific projects') }}</li>
                                </ul>
                    </div>
                </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm mt-6">
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <div class="mx-auto mb-2 w-10 h-10 rounded-full flex items-center justify-center bg-purple-600/10"><span class="font-bold text-purple-600">1</span></div>
                    <h5 class="font-semibold">{{ _('Record Expense') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Enter details and upload receipt') }}</p>
                    </div>
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <div class="mx-auto mb-2 w-10 h-10 rounded-full flex items-center justify-center bg-sky-600/10"><span class="font-bold text-sky-600">2</span></div>
                    <h5 class="font-semibold">{{ _('Submit for Approval') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Admin reviews and approves') }}</p>
                </div>
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <div class="mx-auto mb-2 w-10 h-10 rounded-full flex items-center justify-center bg-green-600/10"><span class="font-bold text-green-600">3</span></div>
                    <h5 class="font-semibold">{{ _('Invoice/Reimburse') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Add to invoice or reimburse') }}</p>
                    </div>
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <div class="mx-auto mb-2 w-10 h-10 rounded-full flex items-center justify-center bg-amber-600/10"><span class="font-bold text-amber-600">4</span></div>
                    <h5 class="font-semibold">{{ _('Track Payment') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Monitor reimbursement status') }}</p>
                </div>
                </div>
            </section>

            <!-- Invoicing -->
        <section id="invoicing" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-file-invoice-dollar text-green-600 mr-2"></i>{{ _('Professional Invoicing') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mb-4">
                <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                    <h4 class="font-semibold mb-1">{{ _('Core Features') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-file-pdf text-red-500 mr-2"></i>{{ _('Professional PDF generation') }}</li>
                        <li><i class="fas fa-palette text-primary mr-2"></i>{{ _('Company branding and logos') }}</li>
                        <li><i class="fas fa-hashtag text-sky-600 mr-2"></i>{{ _('Automatic invoice numbering') }}</li>
                        <li><i class="fas fa-calculator text-green-600 mr-2"></i>{{ _('Tax calculations') }}</li>
                                </ul>
                            </div>
                <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                    <h4 class="font-semibold mb-1">{{ _('Time Integration') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-clock text-amber-600 mr-2"></i>{{ _('Generate from time entries') }}</li>
                        <li><i class="fas fa-layer-group text-sky-600 mr-2"></i>{{ _('Smart grouping by task/project') }}</li>
                        <li><i class="fas fa-shield-alt text-green-600 mr-2"></i>{{ _('Prevent double-billing') }}</li>
                        <li><i class="fas fa-money-bill text-primary mr-2"></i>{{ _('Use project hourly rates') }}</li>
                                </ul>
                            </div>
                        </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <div class="mx-auto mb-2 w-10 h-10 rounded-full flex items-center justify-center bg-primary/10"><span class="font-bold text-primary">1</span></div>
                    <h5 class="font-semibold">{{ _('Create Invoice') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Set up client and project details') }}</p>
                    </div>
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <div class="mx-auto mb-2 w-10 h-10 rounded-full flex items-center justify-center bg-green-600/10"><span class="font-bold text-green-600">2</span></div>
                    <h5 class="font-semibold">{{ _('Add Items') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Generate from time or add manually') }}</p>
                </div>
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <div class="mx-auto mb-2 w-10 h-10 rounded-full flex items-center justify-center bg-sky-600/10"><span class="font-bold text-sky-600">3</span></div>
                    <h5 class="font-semibold">{{ _('Review & Send') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Export PDF and update status') }}</p>
                    </div>
                <div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
                    <div class="mx-auto mb-2 w-10 h-10 rounded-full flex items-center justify-center bg-amber-600/10"><span class="font-bold text-amber-600">4</span></div>
                    <h5 class="font-semibold">{{ _('Track Payment') }}</h5>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Monitor status and payments') }}</p>
                </div>
                </div>
            </section>

            <!-- Reports & Analytics -->
        <section id="reports-analytics" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-chart-line text-sky-600 mr-2"></i>{{ _('Reports & Analytics') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mb-4">
                <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                    <h4 class="font-semibold mb-1">{{ _('Standard Reports') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Project Report - Time breakdown by project') }}</li>
                                    <li>{{ _('User Report - Individual performance metrics') }}</li>
                                    <li>{{ _('Summary Report - Key metrics and trends') }}</li>
                                    <li>{{ _('Time Entry Report - Detailed time logs') }}</li>
                                </ul>
                            </div>
                <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                    <h4 class="font-semibold mb-1">{{ _('Export Options') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('CSV Export - For external analysis') }}</li>
                                    <li>{{ _('Configurable delimiters') }}</li>
                                    <li>{{ _('Custom date ranges') }}</li>
                                    <li>{{ _('Filtered data export') }}</li>
                                </ul>
                            </div>
                        </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Filter Options') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-calendar text-primary mr-2"></i>{{ _('Date Range - Custom start and end dates') }}</li>
                        <li><i class="fas fa-project-diagram text-green-600 mr-2"></i>{{ _('Project - Filter by specific projects') }}</li>
                        <li><i class="fas fa-user text-sky-600 mr-2"></i>{{ _('User - Filter by team members') }}</li>
                        <li><i class="fas fa-building text-amber-600 mr-2"></i>{{ _('Client - Filter by client organization') }}</li>
                        <li><i class="fas fa-save text-purple-600 mr-2"></i>{{ _('Saved Filters - Save frequently used filters') }}</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Visual Analytics') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-chart-bar text-primary mr-2"></i>{{ _('Interactive bar charts') }}</li>
                        <li><i class="fas fa-chart-pie text-green-600 mr-2"></i>{{ _('Time distribution pie charts') }}</li>
                        <li><i class="fas fa-chart-line text-sky-600 mr-2"></i>{{ _('Trend analysis over time') }}</li>
                        <li><i class="fas fa-mobile-alt text-amber-600 mr-2"></i>{{ _('Mobile-optimized charts') }}</li>
                                </ul>
                    </div>
                </div>
            <div class="mt-4 flex items-start gap-3 p-3 rounded-lg border border-purple-600/30 bg-purple-50 dark:bg-purple-900/20 text-sm">
                <i class="fas fa-lightbulb text-purple-600 mt-0.5"></i>
                <p class="text-text-muted-light dark:text-text-muted-dark"><strong>{{ _('Pro Tip:') }}</strong> {{ _('Use Saved Filters to quickly access your most common report views. Save filters for weekly reviews, monthly billing, or specific project tracking!') }}</p>
                </div>
            </section>

            <!-- Productivity Features -->
        <section id="productivity" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-keyboard text-indigo-600 mr-2"></i>{{ _('Productivity Features') }}</h3>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">{{ _('Boost your efficiency with keyboard shortcuts, command palette, and automation features.') }}</p>
            
            <div class="bg-background-light dark:bg-background-dark/40 p-6 rounded border border-border-light dark:border-border-dark mb-6">
                <h4 class="font-semibold mb-3 text-center"><i class="fas fa-terminal text-primary mr-2"></i>{{ _('Command Palette') }}</h4>
                <p class="text-sm text-text-muted-light dark:text-text-muted-dark text-center mb-4">{{ _('Access any feature instantly without leaving the keyboard') }}</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                    <div>
                        <h5 class="font-semibold mb-2">{{ _('Opening the Command Palette') }}</h5>
                        <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">?</kbd> {{ _('Press the question mark key') }}</li>
                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">Ctrl+K</kbd> / <kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">Cmd+K</kbd> {{ _('Quick search') }}</li>
                                        </ul>
                                    </div>
                    <div>
                        <h5 class="font-semibold mb-2">{{ _('Quick Actions') }}</h5>
                        <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">g d</kbd> {{ _('Go to Dashboard') }}</li>
                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">g p</kbd> {{ _('Go to Projects') }}</li>
                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">g t</kbd> {{ _('Go to Tasks') }}</li>
                            <li><kbd class="px-2 py-1 bg-white dark:bg-gray-800 border rounded">n e</kbd> {{ _('New Time Entry') }}</li>
                        </ul>
                    </div>
                                </div>
                            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
                <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                    <h5 class="font-semibold mb-2"><i class="fas fa-bolt text-amber-600 mr-2"></i>{{ _('Keyboard Shortcuts') }}</h5>
                    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Navigate faster with keyboard-driven commands. Press Shift+? to see all shortcuts.') }}</p>
                </div>
                <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                    <h5 class="font-semibold mb-2"><i class="fas fa-search text-sky-600 mr-2"></i>{{ _('Global Search') }}</h5>
                    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Quickly find projects, tasks, clients, and time entries from anywhere in the app.') }}</p>
                </div>
                <div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
                    <h5 class="font-semibold mb-2"><i class="fas fa-envelope text-green-600 mr-2"></i>{{ _('Email Notifications') }}</h5>
                    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Get notified about task assignments, overdue invoices, and weekly summaries via email.') }}</p>
                </div>
                            </div>
            </section>

            {% if current_user.is_admin %}
            <!-- Admin Features -->
        <section id="admin-features" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-cog text-amber-600 mr-2"></i>{{ _('Administrator Features') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('User Management') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Create new users with flexible authentication') }}</li>
                                    <li>{{ _('Assign custom roles with specific permissions') }}</li>
                                    <li>{{ _('Activate/deactivate user accounts') }}</li>
                                    <li>{{ _('View user statistics and activity') }}</li>
                                    <li>{{ _('Generate API tokens for users') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Access Control') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Granular role-based permissions system') }}</li>
                                    <li>{{ _('Custom roles with fine-grained access') }}</li>
                                    <li>{{ _('User data access controls') }}</li>
                                    <li>{{ _('OIDC/SSO integration (Azure AD, Authelia, etc.)') }}</li>
                                    <li>{{ _('API token management for integrations') }}</li>
                                </ul>
                            </div>
                        </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mt-6">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Authentication Methods') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-user text-primary mr-2"></i>{{ _('Username-only (simple internal use)') }}</li>
                        <li><i class="fas fa-shield-alt text-green-600 mr-2"></i>{{ _('OIDC/SSO (enterprise authentication)') }}</li>
                        <li><i class="fas fa-toggle-on text-sky-600 mr-2"></i>{{ _('Both methods simultaneously') }}</li>
                        <li><i class="fas fa-users text-amber-600 mr-2"></i>{{ _('Automatic role assignment via groups') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Role & Permission Management') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-user-tag text-primary mr-2"></i>{{ _('Create custom roles beyond Admin/User') }}</li>
                        <li><i class="fas fa-lock text-green-600 mr-2"></i>{{ _('Set granular permissions per feature') }}</li>
                        <li><i class="fas fa-users-cog text-sky-600 mr-2"></i>{{ _('Assign users to multiple roles') }}</li>
                        <li><i class="fas fa-clipboard-check text-amber-600 mr-2"></i>{{ _('View and manage all permissions') }}</li>
                                </ul>
                    </div>
                </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mt-6">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('General Settings') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-globe text-primary mr-2"></i>{{ _('Timezone and locale settings') }}</li>
                        <li><i class="fas fa-dollar-sign text-green-600 mr-2"></i>{{ _('Currency configuration') }}</li>
                        <li><i class="fas fa-clock text-sky-600 mr-2"></i>{{ _('Time rounding rules') }}</li>
                        <li><i class="fas fa-user-plus text-amber-600 mr-2"></i>{{ _('Self-registration settings') }}</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Timer Settings') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-pause text-primary mr-2"></i>{{ _('Idle timeout configuration') }}</li>
                        <li><i class="fas fa-play text-green-600 mr-2"></i>{{ _('Single active timer mode') }}</li>
                        <li><i class="fas fa-stopwatch text-sky-600 mr-2"></i>{{ _('Timer display preferences') }}</li>
                        <li><i class="fas fa-bell text-amber-600 mr-2"></i>{{ _('Notification settings') }}</li>
                                </ul>
                </div>
                    </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mt-6">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Database Management') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Create manual database backups') }}</li>
                                    <li>{{ _('View database migration status') }}</li>
                                    <li>{{ _('Monitor database performance') }}</li>
                                    <li>{{ _('Clean up old data and logs') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('System Monitoring') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('View system information and health') }}</li>
                                    <li>{{ _('Monitor application performance') }}</li>
                                    <li>{{ _('Review system logs and errors') }}</li>
                                </ul>
                    </div>
                </div>
            </section>
            {% endif %}

            <!-- Mobile Usage -->
        <section id="mobile-usage" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-mobile-alt text-primary mr-2"></i>{{ _('Mobile Usage') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Mobile-Friendly Features') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-mobile-alt text-primary mr-2"></i>{{ _('Optimized for phones and tablets') }}</li>
                        <li><i class="fas fa-hand-pointer text-green-600 mr-2"></i>{{ _('Touch-friendly interface') }}</li>
                        <li><i class="fas fa-expand-arrows-alt text-sky-600 mr-2"></i>{{ _('Adaptive layouts for all screen sizes') }}</li>
                        <li><i class="fas fa-eye text-amber-600 mr-2"></i>{{ _('High contrast for outdoor visibility') }}</li>
                                </ul>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Mobile Navigation') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                        <li><i class="fas fa-bars text-primary mr-2"></i>{{ _('Bottom tab bar for easy access') }}</li>
                        <li><i class="fas fa-home text-green-600 mr-2"></i>{{ _('Quick access to dashboard') }}</li>
                        <li><i class="fas fa-plus text-sky-600 mr-2"></i>{{ _('One-tap time logging') }}</li>
                        <li><i class="fas fa-chart-bar text-amber-600 mr-2"></i>{{ _('Mobile-optimized reports') }}</li>
                                </ul>
                </div>
                    </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm mt-6">
                <div>
                    <h4 class="font-semibold mb-2">{{ _('Installation') }}</h4>
                    <ol class="list-decimal ml-5 space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Open TimeTracker in your mobile browser') }}</li>
                                    <li>{{ _('Look for "Add to Home Screen" option') }}</li>
                                    <li>{{ _('Follow browser-specific installation prompts') }}</li>
                                    <li>{{ _('Launch from your home screen like a native app') }}</li>
                                </ol>
                            </div>
                <div>
                    <h4 class="font-semibold mb-2">{{ _('PWA Benefits') }}</h4>
                    <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                                    <li>{{ _('Offline capability for basic functions') }}</li>
                                    <li>{{ _('Faster loading times') }}</li>
                                    <li>{{ _('Native app-like experience') }}</li>
                                    <li>{{ _('Push notifications (where supported)') }}</li>
                                </ul>
                    </div>
                </div>
            </section>

            <!-- Troubleshooting -->
        <section id="troubleshooting" class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-tools text-red-500 mr-2"></i>{{ _('Troubleshooting & FAQ') }}</h3>
            <div class="space-y-3 text-sm">
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-stopwatch mr-2"></i>{{ _('What happens if I forget to stop my timer?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('The timer will continue running until you stop it manually. You can see your active timer on the dashboard and timer page. The timer persists even if you close your browser or restart your device. If idle detection is enabled, the timer may pause automatically after the configured timeout period.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-edit mr-2"></i>{{ _("Can I edit time entries after they're created?") }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Yes, you can edit any time entry by clicking the edit button in the time entry list. You can modify the project, start/end times, notes, tags, billable status, and task assignment. Admins can edit all time entries, while regular users can only edit their own entries.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-project-diagram mr-2"></i>{{ _('How do I track time for multiple projects?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('By default, you can only have one active timer at a time. To switch projects, stop your current timer and start a new one for the different project. Alternatively, you can create manual time entries for past work or configure the system to allow multiple active timers (admin setting).') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-download mr-2"></i>{{ _('How do I export my time data?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Go to the Reports page and use the "Export CSV" feature. You can apply filters to export specific data, or export all time entries. The CSV file includes all time entry details and can be opened in Excel or other spreadsheet applications. You can also configure the delimiter for different regional standards.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-dollar-sign mr-2"></i>{{ _("What's the difference between billable and non-billable time?") }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Billable time is tracked for client billing purposes and can have an hourly rate associated with it. Non-billable time is for internal work that doesn\'t get charged to clients. You can mark individual time entries as billable or non-billable, and projects can have default billable settings. This distinction is crucial for accurate invoicing and profitability analysis.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-file-invoice-dollar mr-2"></i>{{ _('How do I create an invoice from my time entries?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Navigate to Invoices → Create Invoice, set up the client and project details, then use "Generate from Time Entries" to automatically create invoice items from your tracked time. You can filter by date range and project, and the system will group time entries intelligently. Review the generated items and export as a professional PDF.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-mobile-alt mr-2"></i>{{ _('Can I use TimeTracker on my mobile device?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Yes! TimeTracker is fully responsive and works great on mobile devices. You can install it as a Progressive Web App (PWA) for a native-like experience. The mobile interface includes a bottom tab bar for easy navigation and touch-optimized controls for time tracking on the go.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-keyboard mr-2"></i>{{ _('How do I use the command palette and keyboard shortcuts?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Press the question mark key (?) to open the command palette. From there, you can type to search for any action or navigation target. Use keyboard sequences like "g d" for Dashboard, "g p" for Projects, or "n e" for New Entry. Press Shift+? to see all available shortcuts. Press Ctrl+K (or Cmd+K on Mac) for quick search.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-calendar-week mr-2"></i>{{ _('How do I create bulk time entries for multiple days?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Navigate to Work → Bulk Time Entry. Select your project, choose a date range, set your daily start and end times, and optionally skip weekends. The system will create identical time entries for each day in the range. This is perfect for logging regular work patterns or filling in past time when you worked consistent hours.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-save mr-2"></i>{{ _('What are time entry templates and how do I use them?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Time entry templates let you save frequently used time entry configurations. When creating a manual time entry, check "Save as Template" to save the project, task, and notes. Later, when creating new entries, you can select a template to quickly fill in these details. Templates are personal and only visible to you.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-receipt mr-2"></i>{{ _('How do I track expenses and add them to invoices?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Go to Expenses → New Expense to record business expenses. Upload receipt images, categorize the expense, and mark it as billable if needed. When creating invoices, you can include these expenses as line items. Expenses support approval workflows, reimbursement tracking, and can be linked to specific projects.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-markdown mr-2"></i>{{ _('Can I use Markdown in descriptions?') }}</summary>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Yes! Project and task descriptions support full Markdown formatting. You can use bold, italic, headings, lists, links, code blocks, tables, and images. This allows you to create rich, well-formatted documentation directly in your projects and tasks. The Markdown editor includes a preview mode and supports dark theme.') }}</p>
                </details>
                <details class="group border border-border-light dark:border-border-dark rounded p-4">
                    <summary class="font-semibold cursor-pointer flex items-center"><i class="fas fa-question-circle mr-2"></i>{{ _('Where can I get additional help?') }}</summary>
                    <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4 text-text-muted-light dark:text-text-muted-dark">
                        <div>
                            <h4 class="font-semibold">{{ _('Documentation') }}</h4>
                            <p>{{ _('This help page covers most common questions and features.') }}</p>
                        </div>
                        <div>
                            <h4 class="font-semibold">{{ _('Community Support') }}</h4>
                            <p>{{ _('Report issues and request features on') }} <a class="text-primary" href="https://github.com/drytrix/TimeTracker/issues" target="_blank">GitHub Issues</a>.</p>
                        </div>
                    </div>
                    {% if current_user.is_admin %}
                    <div class="mt-3 p-3 rounded border border-sky-600/30 bg-sky-50 dark:bg-sky-900/20">
                        <i class="fas fa-info-circle mr-2"></i>{{ _('As an admin, you can access additional system information and diagnostics in the') }} <a class="text-primary" href="{{ url_for('admin.system_info') }}">{{ _('System Info') }}</a> {{ _('section.') }}
                                </div>
                                {% endif %}
                </details>
                </div>
            </section>

            <!-- Footer Help -->
        <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-6 rounded-lg shadow text-center">
            <h3 class="text-lg font-semibold">{{ _('Still Need Help?') }}</h3>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">{{ _('Can\'t find what you\'re looking for? Here are additional resources:') }}</p>
            <div class="flex flex-wrap gap-3 justify-center">
                        {% if current_user.is_admin %}
                <a href="{{ url_for('admin.system_info') }}" class="px-4 py-2 rounded-lg border border-primary text-primary hover:bg-primary/10">
                    <i class="fas fa-info-circle mr-1"></i>{{ _('System Info') }}
                        </a>
                        {% endif %}
                <a href="https://github.com/drytrix/TimeTracker" target="_blank" rel="noopener" class="px-4 py-2 rounded-lg border border-border-light dark:border-border-dark hover:bg-background-light dark:hover:bg-background-dark">
                    <i class="fab fa-github mr-1"></i>{{ _('GitHub Repository') }}
                        </a>
                <a href="https://github.com/drytrix/TimeTracker/issues" target="_blank" rel="noopener" class="px-4 py-2 rounded-lg border border-amber-600 text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20">
                    <i class="fas fa-bug mr-1"></i>{{ _('Report Issue') }}
                        </a>
                <a href="https://buymeacoffee.com/DryTrix" target="_blank" rel="noopener" class="px-4 py-2 rounded-lg border border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20">
                    <i class="fas fa-mug-saucer mr-1"></i>{{ _('Support Development') }}
                        </a>
            </div>
        </div>
    </section>
</div>
{% endblock %}
{% block scripts_extra %}
<script>
document.addEventListener('DOMContentLoaded', function(){
  const links = Array.from(document.querySelectorAll('#help-nav .help-link'));
  const filter = document.getElementById('help-nav-filter');
  // Smooth scroll
  links.forEach(a => {
    a.addEventListener('click', (e) => {
      const targetId = a.getAttribute('href');
      if (targetId && targetId.startsWith('#')) {
        const el = document.querySelector(targetId);
        if (el) {
          e.preventDefault();
          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
          history.replaceState(null, '', targetId);
        }
      }
    });
  });

  // Active highlighting via IntersectionObserver
  const sectionIds = links.map(a => a.getAttribute('href')).filter(Boolean);
  const sections = sectionIds.map(id => document.querySelector(id)).filter(Boolean);
  const byId = new Map(links.map(a => [a.getAttribute('href'), a]));
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      const id = '#' + entry.target.id;
      const link = byId.get(id);
      if (!link) return;
      if (entry.isIntersecting) {
        links.forEach(l => l.classList.remove('text-primary','font-semibold'));
        link.classList.add('text-primary','font-semibold');
      }
    });
  }, { rootMargin: '-40% 0px -50% 0px', threshold: [0, 1] });
  sections.forEach(s => observer.observe(s));

  // Filter
  if (filter) {
    filter.addEventListener('input', () => {
      const q = filter.value.toLowerCase().trim();
      links.forEach(a => {
        const txt = a.textContent.toLowerCase();
        a.style.display = txt.includes(q) ? '' : 'none';
      });
    });
  }
});
</script>
{% endblock %}