<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        {css}
    </style>
</head>
<body>
    <div class="luxin-container" id="luxin-container-{unique_id}">
        <div class="main-table-container" id="main-table-{unique_id}">
            <h3>Aggregated Data</h3>
            <div class="table-wrapper">
                {agg_table}
            </div>
        </div>
        
        <div id="detail-panel-{unique_id}" class="detail-panel">
            <div class="detail-panel-header">
                <h3>Detail Rows</h3>
                <button id="close-panel-{unique_id}" class="close-button">&times;</button>
            </div>
            <div id="detail-content-{unique_id}" class="detail-content">
                <p class="detail-placeholder">Click on a row to see details</p>
            </div>
        </div>
    </div>
    
    <script>
        {javascript}
    </script>
</body>
</html>

