{# Selection of contents as filled in by Product Manager together with Marketing. 
   https://excentis.atlassian.net/wiki/spaces/BPK/pages/22740993/Reporting+Redesign+V2
   https://www.figma.com/file/rBEjySRxm0bm7Pjl4Qq2KI/ByteBlower-Report-Design-2023?type=design&node-id=0-1&mode=design
#}
<div class="content collapse">
    <div class="content-header">
       <h2> Legend </h2>
    </div>
    <div class="collapse-content">
        <!-- left part of info -->
        <div class="info-container">
            <!-- left part of info -->
            <ul class="info-list legend-info">
                <h4> Loss Legend </h4>
                <table class="">
                    <tr class="low-warning">
                        <td> </td>
                        <td>Loss</td>
                        <td>&#60; 0%</td>
                    </tr>
                    <tr>
                        <td> 0.0% &le; </td>
                        <td>Loss</td>
                        <td>&#60; {{warning_loss_pct}}%</td>
                    </tr>
                    <tr class="moderate-warning">
                        <td> {{warning_loss_pct}}% &le; </td>
                        <td>Loss</td>
                        <td>&#60; {{error_loss_pct}}%</td>
                    </tr>
                    <tr class="severe-warning">
                        <td> {{error_loss_pct}}% &le; </td>
                        <td>Loss</td>
                        <td>&le; 100%</td>
                    </tr>
                </table>
            </ul>            
            <!-- right part of info -->
            <ul class="info-list legend-info">
                <h4> Throughput Legend </h4>                                
                The Frame Blasting Layer 2 Speed includes:
                
                {{ throughput_legend_table }}

            </ul>
        </div>
    </div>
</div>