{% import 'macros_profile_overview.html.jinja2' as profile_overview %}
{% import 'macros_accordion.html.jinja2' as accordion %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <style>
        html {
            font-family: "Courier New", Courier, monospace;
        }
        html, body {
            margin: 0;
            padding: 0;
        }
        .middle {
            width: 98%;
            float: left;
            margin: 0 1%;
            justify-content: center;
        }
        .column {
            width: 48%;
            margin: 0 1%;
            justify-content: center;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .column-head {
            border-bottom: 1px solid #ddd;
            text-align: center;
        }
        .clear {
            clear: both;
        }

        .svg-container {
            display: inline-block;
            position: relative;
            width: 100%;
            vertical-align: top;
        }

        .svg-content {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
        }
        .help {
            margin: 0 auto 2em auto;
            text-align: center;
        }
        .help h2 {
            border-bottom: 1px solid #ddd;
        }
        .help ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .help ul li {
            margin: 0;
            padding: 0;
        }

        div.tools table {
            border-collapse: collapse;
            border-bottom: 1px solid #ddd;
            margin: 0 auto 2em auto;
        }

        div.tools td.value {
            padding: 1em 0.5em;
            text-align: left;
        }

        div.tools td.key {
            padding: 1em 0.5em;
            text-align: right;
            font-weight: bold;
        }

        div.flamegraphs h2 {
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        
        {{ profile_overview.css_style() }}
        {{ accordion.css_style() }}
    </style>
</head>
<body>

<div class="left column">
    <h2 class="column-head">{{ lhs_tag }}</h2>
    {{ profile_overview.overview_table('toggleLeftCollapse', 'left-info', lhs_header, rhs_header, "Profile Specification") }}
    <div style="margin: 0 10px;">&nbsp;</div>
    {{ profile_overview.overview_table('toggleLeftProfileCollapse', 'left-profile-info', lhs_stats, rhs_stats, "Profile Stats") }}
    <div style="margin: 0 10px;">&nbsp;</div>
</div>

<div class="right column">
    <h2 class="column-head">{{ rhs_tag }}</h2>
    {{ profile_overview.overview_table('toggleRightCollapse', 'right-info', rhs_header, lhs_header, "Profile Specification") }}
    <div style="margin: 0 10px;">&nbsp;</div>
    {{ profile_overview.overview_table('toggleRightProfileCollapse', 'right-profile-info', rhs_stats, lhs_stats, "Profile Stats") }}
    <div style="margin: 0 10px;">&nbsp;</div>
</div>

<div class="tools">
    <table>
        <tbody>
        <tr>
            <td class="key" title="Displays resources for different type.">Resource Type:</td>
            <td class="value" title="Displays resources for different type.">
                <select class="filter" id="type_selector">
                    {% for data_type in data_types %}
                        <option value="{{ data_type }}">{{ data_type }}</option>
                    {%- endfor %}
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

{% for (_, lhs_flamegraph, rhs_flamegraph, diff_flamegraph) in flamegraphs %}
<div class="flamegraphs" id="{{ data_types[loop.index0] }}">
    <h2>{{ data_types[loop.index0] }}</h2>
    <div class="left column">
        <div class='svg-container'>
            {{ lhs_flamegraph}}
        </div>
    </div>
    <div class="right column">
        <div class='svg-container'>
            {{ rhs_flamegraph }}
        </div>
    </div>
    <div class="middle">
        <h2 class="column-head">Difference of profiles</h2>
        <div class='svg-container'>
            {{ diff_flamegraph }}
        </div>

        <div class="help">
            <h2>Help</h2>
            <ul>
                <li>> Click on the square to nested into selected trace.</li>
                <li>> The size of the rectangle represents relative consumption with respect to parent.</li>
                <li>> The color of the rectangle represents nothing.</li>
                <li>> Use <it>reset zoom</it> (top left) to return to original view.</li>
                <li>> Use <it>search</it> (top right) to highlight selected functions.</li>
            </ul>
        </div>
    </div>
</div>
{%- endfor %}


<script>
{{ profile_overview.toggle_script('toggleLeftCollapse', 'left-info') }}
{{ profile_overview.toggle_script('toggleLeftProfileCollapse', 'left-profile-info') }}
{{ profile_overview.toggle_script('toggleRightCollapse', 'right-info') }}
{{ profile_overview.toggle_script('toggleRightProfileCollapse', 'right-profile-info') }}
{{ accordion.script("table-row") }}

function switch_type() {
    const selected_type = document.querySelector("#type_selector").value

    var selectedDiv = document.getElementById(selected_type);
    var allDivs = document.getElementsByClassName("flamegraphs");

    for (var i = 0; i < allDivs.length; i++) {
        allDivs.item(i).style.visibility = "collapse";
        allDivs.item(i).style.display = "none";
    }
    selectedDiv.style.visibility = "visible";
    selectedDiv.style.display = "block";
    resize();
}
document.querySelectorAll('select.filter').forEach((el) => {
    el.addEventListener('change', () => {
        switch_type()
    })
});
function resize() {
    const selected_type = document.querySelector("#type_selector").value

    var selectedDiv = document.getElementById(selected_type);
    const svgContents = selectedDiv.getElementsByClassName('svg-content');
    const lhs_svgContainer = selectedDiv.getElementsByClassName('svg-container')[0];
    const rhs_svgContainer = selectedDiv.getElementsByClassName('svg-container')[1];
    const diff_svgContainer = selectedDiv.getElementsByClassName('svg-container')[2];
    if (lhs_svgContainer) {
        let max_box = 0, max_height = 0;
        for (let i = 0; i < svgContents.length; i++) {
            const svgContent = svgContents[i];
            const viewBox = svgContent.getAttribute('viewBox');
            const svgHeight = svgContent.getBoundingClientRect().height;
            const viewBoxValues = viewBox.split(' ');
            const height = parseInt(viewBoxValues[3]);
            if (svgHeight > max_height)
                max_height = svgHeight;
            if (height > max_box)
                max_box = height;
        };
        lhs_svgContainer.style.height = `${max_box}px`;
        rhs_svgContainer.style.height = `${max_box}px`;
        diff_svgContainer.style.height = `${max_box}px`;
        selectedDiv.style.height = `${max_height + max_height + 100}px`;
    }
}

resize();
window.addEventListener('resize', resize);

switch_type()
toggleLeftCollapse();
toggleLeftProfileCollapse();
toggleRightCollapse();
toggleRightProfileCollapse();

</script>

</body>
</html>
