<div class="section">
    <h2 class="section-title">{{ panel.title }}</h2>
    <div class="overview-grid">
        <div class="interactive-chart-panel">
            <div class="chart-panel-header">
                <div class="chart-controls">
                    <button class="chart-control-btn active" data-chart="media_type" type="button">Media Type</button>
                    <button class="chart-control-btn" data-chart="extension" type="button">Extension</button>
                    <button class="chart-control-btn" data-chart="largest_files" type="button">Largest Files</button>
                </div>
                <div class="metric-toggle-controls">
                    <button class="metric-toggle-btn active" data-metric="count" type="button">By Count</button>
                    <button class="metric-toggle-btn" data-metric="size" type="button">By Size</button>
                </div>
            </div>
            <div class="chart-panel-body">
                <div class="chart-area">
                    <canvas id="composition-chart"></canvas>
                </div>
                <div id="composition-chart-legend" class="chart-legend"></div>
            </div>
        </div>

        <div class="mini-file-view-panel" data-current-hash="{{ panel.data.most_recent_file_record.hash if panel.data.most_recent_file_record else '' }}">
            <div class="panel-header">
                <div class="header-with-info">
                    <div class="panel-title-group">
                        <h3 class="sub-header">File Info</h3>
                        <span class="info-icon" 
                            data-tooltip="Click a file in the File Explorer below to load its details here." 
                            data-tooltip-placement="top">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>
                        </span>
                    </div>
                    <span id="expand-file-view-btn" class="expand-icon" title="Expand View">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg>
                    </span>
                </div>
            </div>
            <div class="panel-content">
                {% if panel.data.most_recent_file_record %}
                    {% set context = {'file': panel.data.most_recent_file_record} %}
                    {% include 'panels/_mini_file_view.html' with context %}
                {% else %}
                    <p class="muted-text">No files in collection.</p>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="chart-container full-width" style="margin-top: 1.5rem;">
        <canvas id="overview-timeline-chart"></canvas>
    </div>
</div>