{% macro css_style() %}
    .info th {
        cursor: pointer;
        text-align: center;
    }
    table.info {
        width: 100%;
    }
    .info table {
        width: 100%;
        border-collapse: collapse;
    }
    .info th, .info td {
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }
    .info td.value {
        white-space: normal;
        word-wrap: anywhere;
        overflow-wrap: anywhere;
        text-align: left;
    }
    .info td.key{
        font-weight: bold;
    }
    .panel td.key {
        white-space: pre-wrap;
        border: 0;
    }
    .superscript {
        vertical-align: super;
        font-size: smaller;
        color: grey;
    }
{%- endmacro %}

{%  macro top_n_table(function_name, element_name, top_records, rhs_uids, rhs_tag) %}
    <table class="info" id="{{ element_name }}">
        <thead>
        <tr>
            <th onclick="{{ function_name }}()" colspan="4">
                <span id="{{ element_name }}-plus-left" style="float: left; display: none">[+]</span>
                <span id="{{ element_name }}-minus-left" style="float: left">[-]</span>
                Top 10 Records
                <span id="{{ element_name }}-minus-right" style="float: right">[-]</span>
                <span id="{{ element_name }}-plus-right" style="float: right; display: none">[+]</span>
            </th>
        </tr>
        </thead>
        <tbody>
        {%- for top_record in top_records %}
            <tr class="accordion">
                <td class="key" style="width: 5%">{{ loop.index }}</td>
                <td class="key" style="width: 80%">{{ top_record.uid }}</td>
                <td class="key" style="width: 10%;{% if top_record.rel > 1 %}color: #D04848; font-weight: bold;{% endif %}">{{ top_record.rel }}%</td>
                <td class="key" style="width: 5%"><span class="control">[+]</span><span class="control hidden">[-]</span></td>
            </tr>
            <tr class="panel">
                <td colspan="3">
                    <table>
                       <tbody>
                       {%- for trace in top_record.trace_list %}
                          <tr>
                              <td class="key" style="width: 5%"></td>
                              <td class="key" style="width: 80%; color: {% if trace.strip()[2:] in rhs_uids or trace.strip() in rhs_uids %}green{% else %}red{% endif %};">{{ trace }}{% if trace.strip()[2:] not in rhs_uids and trace.strip() not in rhs_uids %} (not in {{ rhs_tag }}){% endif %}</td>
                              <td class="key" style="width: 10%"></td>
                              <td class="key" style="width: 5%"></td>
                          </tr>
                       {%- endfor %}
                       </tbody>
                    </table>
                </td>
            </tr>
        {%- endfor %}
        </tbody>
    </table>
{%- endmacro %}

{%  macro overview_table(function_name, element_name, lhs_header, rhs_header, title) %}
<table class="info" id="{{ element_name }}">
    <thead>
    <tr>
        <th onclick="{{ function_name }}()" colspan="2">
            <span id="{{ element_name }}-plus-left" style="float: left; display: none">[+]</span>
            <span id="{{ element_name }}-minus-left" style="float: left">[-]</span>
            {{ title }}
            <span id="{{ element_name }}-minus-right" style="float: right">[-]</span>
            <span id="{{ element_name }}-plus-right" style="float: right; display: none">[+]</span>
        </th>
    </tr>
    </thead>
    <tbody>
    {%- for (key, value, title) in lhs_header %}
        <tr title="{{ title }}">
            <td class="key">{{ key }}<span class="superscript">?</span></td>
            <td class="value">{{ value }}</td>
        </tr>
    {%- endfor %}
    </tbody>
</table>
{%- endmacro %}

{% macro toggle_script(function_name, element_name) -%}
function {{ function_name }}() {
    var tableBody = document.getElementById("{{ element_name }}").getElementsByTagName("tbody")[0];
    var plus_l = document.getElementById("{{ element_name }}-plus-left");
    var minus_l= document.getElementById("{{ element_name }}-minus-left");
    var plus_r = document.getElementById("{{ element_name }}-plus-right");
    var minus_r = document.getElementById("{{ element_name }}-minus-right");

    if (tableBody.style.visibility === "collapse") {
        tableBody.style.visibility = "visible";
        minus_l.style.display = "block";
        minus_r.style.display = "block";
        plus_l.style.display = "none";
        plus_r.style.display = "none";
    } else {
        tableBody.style.visibility = "collapse";
        minus_l.style.display = "none";
        minus_r.style.display = "none";
        plus_l.style.display = "block";
        plus_r.style.display = "block";
    }
}
{%- endmacro %}
