{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-book me-3"></i>Documentation</h2>
                <div class="text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    Comprehensive guide to using Claude Code Tracker
                </div>
            </div>

            <div class="row">
                <!-- Getting Started -->
                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column">
                            <div class="text-center mb-3">
                                <div class="bg-primary bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                    <i class="fas fa-rocket fa-lg text-primary"></i>
                                </div>
                            </div>
                            <h5 class="card-title text-center">Getting Started</h5>
                            <p class="card-text text-center text-muted flex-grow-1">
                                Learn the basics of Claude Code Tracker and get up and running quickly.
                            </p>
                            <div class="text-center">
                                <a href="/dashboard/docs/getting-started" class="btn btn-primary">
                                    <i class="fas fa-arrow-right me-1"></i>
                                    Read Guide
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Data Import -->
                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column">
                            <div class="text-center mb-3">
                                <div class="bg-secondary bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                    <i class="fas fa-cloud-upload-alt fa-lg text-secondary"></i>
                                </div>
                            </div>
                            <h5 class="card-title text-center">Data Import Guide</h5>
                            <p class="card-text text-center text-muted flex-grow-1">
                                Step-by-step guide to importing your .claude.json file using file upload or file paths.
                            </p>
                            <div class="text-center">
                                <a href="/dashboard/docs/data-import" class="btn btn-secondary">
                                    <i class="fas fa-arrow-right me-1"></i>
                                    Import Data
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Docker Deployment -->
                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column">
                            <div class="text-center mb-3">
                                <div class="bg-info bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                    <i class="fab fa-docker fa-lg text-info"></i>
                                </div>
                            </div>
                            <h5 class="card-title text-center">Docker Deployment</h5>
                            <p class="card-text text-center text-muted flex-grow-1">
                                Deploy Claude Code Tracker using Docker with Caddy reverse proxy integration.
                            </p>
                            <div class="text-center">
                                <a href="/dashboard/docs/docker-deployment" class="btn btn-info">
                                    <i class="fas fa-arrow-right me-1"></i>
                                    Deploy
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Hook Setup -->
                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column">
                            <div class="text-center mb-3">
                                <div class="bg-success bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                    <i class="fas fa-link fa-lg text-success"></i>
                                </div>
                            </div>
                            <h5 class="card-title text-center">Hook Setup Guide</h5>
                            <p class="card-text text-center text-muted flex-grow-1">
                                Configure Claude Code hooks to automatically track your development activity.
                            </p>
                            <div class="text-center">
                                <a href="/dashboard/docs/hook-setup" class="btn btn-success">
                                    <i class="fas fa-arrow-right me-1"></i>
                                    Setup Hooks
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Hook Reference -->
                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column">
                            <div class="text-center mb-3">
                                <div class="bg-dark bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                    <i class="fas fa-book-open fa-lg text-dark"></i>
                                </div>
                            </div>
                            <h5 class="card-title text-center">Hook Reference</h5>
                            <p class="card-text text-center text-muted flex-grow-1">
                                Complete reference for all 39+ available Claude Code hooks and configurations.
                            </p>
                            <div class="text-center">
                                <a href="/dashboard/docs/hook-reference" class="btn btn-dark">
                                    <i class="fas fa-arrow-right me-1"></i>
                                    Browse Hooks
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- API Reference -->
                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column">
                            <div class="text-center mb-3">
                                <div class="bg-warning bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                    <i class="fas fa-code fa-lg text-warning"></i>
                                </div>
                            </div>
                            <h5 class="card-title text-center">API Reference</h5>
                            <p class="card-text text-center text-muted flex-grow-1">
                                Detailed API documentation for integrating with Claude Code Tracker.
                            </p>
                            <div class="text-center">
                                <a href="/dashboard/docs/api-reference" class="btn btn-warning">
                                    <i class="fas fa-arrow-right me-1"></i>
                                    View API
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- FAQ -->
                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column">
                            <div class="text-center mb-3">
                                <div class="bg-danger bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                    <i class="fas fa-question-circle fa-lg text-danger"></i>
                                </div>
                            </div>
                            <h5 class="card-title text-center">FAQ</h5>
                            <p class="card-text text-center text-muted flex-grow-1">
                                Frequently asked questions and troubleshooting guide.
                            </p>
                            <div class="text-center">
                                <a href="/dashboard/docs/faq" class="btn btn-danger">
                                    <i class="fas fa-arrow-right me-1"></i>
                                    Get Help
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Start Section -->
            <div class="row mt-5">
                <div class="col-md-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-light">
                            <h4 class="mb-0"><i class="fas fa-lightning-bolt me-2"></i>Quick Start</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="lead">Get started with Claude Code Tracker in just a few steps:</p>
                                    <ol class="list-unstyled">
                                        <li class="mb-2">
                                            <span class="badge bg-primary rounded-pill me-2">1</span>
                                            <strong>Import existing data</strong> from your <code>~/.claude.json</code> file
                                        </li>
                                        <li class="mb-2">
                                            <span class="badge bg-primary rounded-pill me-2">2</span>
                                            <strong>Set up hooks</strong> to automatically track new sessions
                                        </li>
                                        <li class="mb-2">
                                            <span class="badge bg-primary rounded-pill me-2">3</span>
                                            <strong>Explore your data</strong> through the dashboard and analytics
                                        </li>
                                    </ol>
                                </div>
                                <div class="col-md-4 text-center">
                                    <div class="d-grid gap-2">
                                        <a href="/dashboard/import" class="btn btn-success btn-lg">
                                            <i class="fas fa-upload me-2"></i>
                                            Import Data Now
                                        </a>
                                        <a href="/dashboard/docs/getting-started" class="btn btn-outline-primary">
                                            <i class="fas fa-book me-2"></i>
                                            Read Full Guide
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Features Overview -->
            <div class="row mt-5">
                <div class="col-md-12">
                    <h3 class="mb-4"><i class="fas fa-star me-2"></i>Key Features</h3>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 bg-light h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="bg-primary bg-opacity-10 rounded p-2 me-3">
                                    <i class="fas fa-chart-line text-primary"></i>
                                </div>
                                <div>
                                    <h6 class="card-title">Development Analytics</h6>
                                    <p class="card-text small text-muted">Track sessions, time spent, and productivity trends across all your projects.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 bg-light h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="bg-success bg-opacity-10 rounded p-2 me-3">
                                    <i class="fas fa-comments text-success"></i>
                                </div>
                                <div>
                                    <h6 class="card-title">Conversation History</h6>
                                    <p class="card-text small text-muted">Search and browse through all your Claude Code conversations with powerful filtering.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 bg-light h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="bg-info bg-opacity-10 rounded p-2 me-3">
                                    <i class="fas fa-timeline text-info"></i>
                                </div>
                                <div>
                                    <h6 class="card-title">Project Timelines</h6>
                                    <p class="card-text small text-muted">Visualize your development journey with chronological project timelines.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 bg-light h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="bg-warning bg-opacity-10 rounded p-2 me-3">
                                    <i class="fas fa-link text-warning"></i>
                                </div>
                                <div>
                                    <h6 class="card-title">Hook Integration</h6>
                                    <p class="card-text small text-muted">Automatically capture data through Claude Code hooks for real-time tracking.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 bg-light h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="bg-secondary bg-opacity-10 rounded p-2 me-3">
                                    <i class="fas fa-database text-secondary"></i>
                                </div>
                                <div>
                                    <h6 class="card-title">Data Import/Export</h6>
                                    <p class="card-text small text-muted">Import existing data from Claude.json and export your analytics.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 bg-light h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="bg-danger bg-opacity-10 rounded p-2 me-3">
                                    <i class="fas fa-shield-alt text-danger"></i>
                                </div>
                                <div>
                                    <h6 class="card-title">Privacy First</h6>
                                    <p class="card-text small text-muted">All data stays local - no external services or cloud dependencies.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- External Links -->
            <div class="row mt-5">
                <div class="col-md-12">
                    <div class="card border-0 bg-primary text-white">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <h5 class="card-title mb-2">
                                        <i class="fas fa-external-link-alt me-2"></i>
                                        Additional Resources
                                    </h5>
                                    <p class="card-text mb-0">
                                        Explore the interactive API documentation and source code
                                    </p>
                                </div>
                                <div class="col-md-4 text-end">
                                    <a href="/docs" target="_blank" class="btn btn-light me-2">
                                        <i class="fas fa-book me-1"></i>
                                        API Docs
                                    </a>
                                    <a href="https://github.com/claude/claude-tracker" target="_blank" class="btn btn-outline-light">
                                        <i class="fab fa-github me-1"></i>
                                        GitHub
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}