<!--
Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space

Permission to use, copy, modify, and/or distribute this software for any purpose with or without
fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS
SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE
AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,
NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE
OF THIS SOFTWARE.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lutris Playtime Report</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* Theme-specific CSS injected here */
        __THEME_CSS__
    </style>
</head>
<body>
    <!-- Scroll to Top Button -->
    <button class="scroll-top" id="scroll-top" title="Scroll to top">
        <div class="scroll-top-arrow"></div>
    </button>

    <!-- Theme Toggle Button -->
    <button class="theme-toggle" id="theme-toggle" title="Toggle theme">
        <span class="icon" id="theme-icon"></span>
    </button>

    <div class="card">
        <div class="card-header">
            <h1 class="card-title">Lutris Playtime Report</h1>
        </div>
        <div class="card-content">
            <div class="filters" id="filters"></div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Statistics</h2>
        </div>
        <div class="card-content">
            <div class="stats">
                <div class="stat">
                    <div class="stat-value" id="total-library">__TOTAL_LIBRARY__</div>
                    <div class="stat-label">Games in Library</div>
                </div>
                <div class="stat">
                    <div class="stat-value" id="total-games">0</div>
                    <div class="stat-label">Games Played</div>
                </div>
                <div class="stat">
                    <div class="stat-value" id="total-time">0h</div>
                    <div class="stat-label">Total Playtime</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Playtime Distribution</h2>
        </div>
        <div class="card-content">
            <div class="charts-wrapper">
                <div class="chart-container">
                    <div class="chart-title">Top Games</div>
                    <canvas id="playtime-chart"></canvas>
                </div>
                <div class="chart-container">
                    <div class="chart-title">By Category</div>
                    <canvas id="categories-chart"></canvas>
                </div>
                <div class="chart-container">
                    <div class="chart-title">By Runner</div>
                    <canvas id="runners-chart"></canvas>
                </div>
                <div class="chart-container">
                    <div class="chart-title">By Source</div>
                    <canvas id="sources-chart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Summaries</h2>
        </div>
        <div class="card-content summaries-content">
            <div class="tabs">
                <div class="tab active" data-tab="games">Top Games</div>
                <div class="tab" data-tab="categories">By Category</div>
                <div class="tab" data-tab="runners">By Runner</div>
            </div>
            <div class="tab-content">
                <div class="tab-panel active" id="tab-games">
                    <div class="table-wrapper">
                        <table>
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Game</th>
                                    <th>Playtime</th>
                                    <th style="text-align: right">%</th>
                                </tr>
                            </thead>
                            <tbody id="games-table"></tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-panel" id="tab-categories">
                    <div class="table-wrapper">
                        <table>
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Category</th>
                                    <th>Playtime</th>
                                    <th style="text-align: right">%</th>
                                </tr>
                            </thead>
                            <tbody id="categories-table"></tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-panel" id="tab-runners">
                    <div class="table-wrapper">
                        <table>
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Runner</th>
                                    <th>Playtime</th>
                                    <th style="text-align: right">%</th>
                                </tr>
                            </thead>
                            <tbody id="runners-table"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    __SCRIPT__
    </script>
</body>
</html>
