{% extends "base.html" %}

{% block title %}{{ _('About') }} - {{ 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">{{ _('About') }}</h1>
        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Professional time tracking and project management') }}</p>
    </div>
    <div class="text-sm text-text-muted-light dark:text-text-muted-dark mt-2 md:mt-0">
        <i class="fas fa-circle-info"></i> / {{ _('About') }}
    </div>
</div>

<!-- Hero -->
<div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark p-8 rounded-lg shadow mb-8 text-center">
    <h2 class="text-xl font-semibold mb-2">TimeTracker</h2>
    <p class="text-text-muted-light dark:text-text-muted-dark max-w-2xl mx-auto">
        {{ _('A comprehensive web-based time tracking application built with Flask, featuring project management, client organization, task management, invoicing, and advanced analytics.') }}
    </p>

    <div class="flex flex-wrap gap-2 mt-4 justify-center">
        <span class="px-3 py-1 rounded-full border border-primary text-primary">
            <i class="fas fa-clock mr-1"></i>{{ _('Time Tracking') }}
        </span>
        <span class="px-3 py-1 rounded-full border border-green-600 text-green-600">
            <i class="fas fa-project-diagram mr-1"></i>{{ _('Project Management') }}
        </span>
        <span class="px-3 py-1 rounded-full border border-sky-600 text-sky-600">
            <i class="fas fa-file-invoice-dollar mr-1"></i>{{ _('Invoicing') }}
        </span>
        <span class="px-3 py-1 rounded-full border border-amber-600 text-amber-600">
            <i class="fas fa-chart-line mr-1"></i>{{ _('Analytics') }}
        </span>
    </div>
</div>

<!-- Highlights -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark">
        <div class="flex items-center gap-3 mb-2">
            <i class="fas fa-stopwatch text-primary"></i>
            <h3 class="font-semibold">{{ _('Smart Timers') }}</h3>
        </div>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Real-time tracking with idle detection and live updates') }}</p>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark">
        <div class="flex items-center gap-3 mb-2">
            <i class="fas fa-building text-green-600"></i>
            <h3 class="font-semibold">{{ _('Client Management') }}</h3>
        </div>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Organize clients with contacts, rates, and project relations') }}</p>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark">
        <div class="flex items-center gap-3 mb-2">
            <i class="fas fa-tasks text-sky-600"></i>
            <h3 class="font-semibold">{{ _('Task System') }}</h3>
        </div>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Break down projects into tasks with progress tracking') }}</p>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark">
        <div class="flex items-center gap-3 mb-2">
            <i class="fas fa-file-pdf text-amber-600"></i>
            <h3 class="font-semibold">{{ _('PDF Invoices') }}</h3>
        </div>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Generate professional invoices from tracked time') }}</p>
    </div>
</div>

<!-- Core vs Advanced -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark">
        <h3 class="text-lg font-semibold mb-4"><i class="fas fa-star text-amber-500 mr-2"></i>{{ _('Core Features') }}</h3>
        <ul class="space-y-2 text-text-muted-light dark:text-text-muted-dark">
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Start/stop timers with project and task association') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Manual time entry with notes and tags') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Client and project organization') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Role-based access and user profiles') }}</span></li>
        </ul>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark">
        <h3 class="text-lg font-semibold mb-4"><i class="fas fa-rocket text-primary mr-2"></i>{{ _('Advanced Features') }}</h3>
        <ul class="space-y-2 text-text-muted-light dark:text-text-muted-dark">
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Branded PDF invoicing with tax and payment tracking') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Visual analytics and detailed reporting') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('REST API for integrations') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('PWA capabilities and mobile-friendly UI') }}</span></li>
        </ul>
    </div>
</div>

<!-- Platform Support -->
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark mb-8">
    <h3 class="text-lg font-semibold mb-4"><i class="fas fa-globe mr-2"></i>{{ _('Platform Support') }}</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
        <div>
            <h4 class="font-semibold mb-2">{{ _('Web Application') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Desktop browsers (Chrome, Firefox, Safari, Edge)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Mobile responsive design') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Progressive Web App (PWA)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Touch-friendly tablet interface') }}</li>
            </ul>
        </div>
        <div>
            <h4 class="font-semibold mb-2">{{ _('Operating Systems') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Windows, macOS, Linux') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Android and iOS (browser)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Raspberry Pi support') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Dockerized deployment') }}</li>
            </ul>
        </div>
        <div>
            <h4 class="font-semibold mb-2">{{ _('Database Support') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('PostgreSQL (recommended)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('SQLite (dev/test)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Automatic migrations with Flask-Migrate') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Backup and restoration tools') }}</li>
            </ul>
        </div>
    </div>
</div>

<!-- Technical Specifications -->
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark mb-8">
    <h3 class="text-lg font-semibold mb-4"><i class="fas fa-cogs mr-2"></i>{{ _('Technical Specifications') }}</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
        <div>
            <h4 class="font-semibold mb-2">{{ _('Technology Stack') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li><i class="fas fa-code text-primary mr-2"></i><strong>{{ _('Backend') }}:</strong> Python, Flask, SQLAlchemy</li>
                <li><i class="fas fa-palette text-green-600 mr-2"></i><strong>{{ _('Frontend') }}:</strong> Tailwind CSS, JS, Font Awesome</li>
                <li><i class="fas fa-database text-sky-600 mr-2"></i><strong>{{ _('Database') }}:</strong> PostgreSQL, SQLite</li>
                <li><i class="fas fa-server text-amber-600 mr-2"></i><strong>{{ _('Deployment') }}:</strong> Docker, Docker Compose</li>
            </ul>
        </div>
        <div>
            <h4 class="font-semibold mb-2">{{ _('Key Capabilities') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li><i class="fas fa-bolt text-primary mr-2"></i><strong>{{ _('Real-time') }}:</strong> WebSocket updates, live timers</li>
                <li><i class="fas fa-language text-green-600 mr-2"></i><strong>{{ _('i18n') }}:</strong> Multi-language support</li>
                <li><i class="fas fa-shield-alt text-sky-600 mr-2"></i><strong>{{ _('Security') }}:</strong> CSRF, session management</li>
                <li><i class="fas fa-mobile-alt text-amber-600 mr-2"></i><strong>{{ _('Mobile') }}:</strong> Responsive, PWA</li>
            </ul>
        </div>
    </div>
</div>

<!-- Open Source & Community -->
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark mb-8">
    <h3 class="text-lg font-semibold mb-4"><i class="fas fa-code-branch mr-2"></i>{{ _('Open Source & Community') }}</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-text-muted-light dark:text-text-muted-dark">
        <div>
            <h4 class="font-semibold mb-2">{{ _('Open Source Benefits') }}</h4>
            <ul class="space-y-1">
                <li><i class="fas fa-code text-primary mr-2"></i>{{ _('Full source code available on GitHub') }}</li>
                <li><i class="fas fa-balance-scale text-primary mr-2"></i>{{ _('Licensed under GPL v3.0') }}</li>
                <li><i class="fas fa-users text-primary mr-2"></i>{{ _('Community-driven development') }}</li>
                <li><i class="fas fa-bug text-primary mr-2"></i>{{ _('Transparent issue tracking and bug reports') }}</li>
            </ul>
        </div>
        <div>
            <h4 class="font-semibold mb-2">{{ _('Deployment Options') }}</h4>
            <ul class="space-y-1">
                <li><i class="fas fa-docker text-sky-600 mr-2"></i>{{ _('Docker images (GHCR)') }}</li>
                <li><i class="fas fa-server text-sky-600 mr-2"></i>{{ _('Self-hosted deployment with full control') }}</li>
                <li><i class="fas fa-cloud text-sky-600 mr-2"></i>{{ _('Cloud-ready with Compose configs') }}</li>
            </ul>
        </div>
    </div>
    <div class="mt-4 flex flex-wrap gap-3">
        <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-2"></i>{{ _('View on GitHub') }}
        </a>
        <a href="https://buymeacoffee.com/DryTrix" 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-mug-saucer mr-2"></i>{{ _('Support Development') }}
        </a>
    </div>
</div>

<!-- Getting Help -->
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow border border-border-light dark:border-border-dark">
    <h3 class="text-lg font-semibold mb-4"><i class="fas fa-question-circle mr-2"></i>{{ _('Getting Help & Resources') }}</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="text-center p-4 rounded-lg border border-border-light dark:border-border-dark">
            <div class="mx-auto mb-3 w-14 h-14 rounded-full flex items-center justify-center bg-primary/10">
                <i class="fas fa-book text-primary"></i>
            </div>
            <h4 class="font-semibold mb-1">{{ _('Documentation') }}</h4>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-3">{{ _('Step-by-step guides for all features.') }}</p>
            <a href="{{ url_for('main.help') }}" class="px-3 py-2 text-sm rounded-lg bg-primary text-white hover:opacity-90">
                <i class="fas fa-book mr-1"></i>{{ _('View Help') }}
            </a>
        </div>
        <div class="text-center p-4 rounded-lg border border-border-light dark:border-border-dark">
            <div class="mx-auto mb-3 w-14 h-14 rounded-full flex items-center justify-center bg-green-600/10">
                <i class="fas fa-info-circle text-green-600"></i>
            </div>
            <h4 class="font-semibold mb-1">{{ _('System Information') }}</h4>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-3">{{ _('Status, versions, and configuration details.') }}</p>
            {% if current_user.is_admin %}
            <a href="{{ url_for('admin.system_info') }}" class="px-3 py-2 text-sm rounded-lg border border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20">
                <i class="fas fa-info-circle mr-1"></i>{{ _('System Info') }}
            </a>
            {% else %}
            <span class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Admin access required') }}</span>
            {% endif %}
        </div>
        <div class="text-center p-4 rounded-lg border border-border-light dark:border-border-dark">
            <div class="mx-auto mb-3 w-14 h-14 rounded-full flex items-center justify-center bg-amber-600/10">
                <i class="fab fa-github text-amber-600"></i>
            </div>
            <h4 class="font-semibold mb-1">{{ _('Community Support') }}</h4>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-3">{{ _('Report issues, request features, contribute.') }}</p>
            <a href="https://github.com/drytrix/TimeTracker/issues" target="_blank" rel="noopener" class="px-3 py-2 text-sm rounded-lg border border-amber-600 text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20">
                <i class="fab fa-github mr-1"></i>{{ _('GitHub Issues') }}
            </a>
        </div>
    </div>
</div>
{% endblock %}