<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>{{ tests_sum.name }}</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
        function activateNav(id) {
            $('.nav li').removeClass('active');
            $('#'+id).addClass('active')
        }
    </script>
    <style>
        html, body, div, iframe {
            height: 100%;
        }
        iframe {
            width: 100%;
            border: none;
        }
        .nav {
            font-size: 1.2em;
        }
        .link {
            color: steelblue;
            font-weight: bold;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
<nav class="container-fluid" style="background-color: darkgrey;">
    <ul class="nav nav-tabs">
        <li id="nav-overview" class="active" onclick="activateNav('nav-overview')">
            <a class="link" href="overview.html" target="suite-report">
                Overview
            </a>
        </li>
    </ul>
</nav>
<div class="container-fluid" style="background-color: lightgrey;">
    <div class="row">
        <nav class="col-md-2">
            <ul class="nav nav-tabs nav-stacked">
                <li><br/><h4>Test Suites</h4></li>
                {% for suite_sum in tests_sum.suite_sum_list %}
                <li id="nav-{{ suite_sum.name }}" onclick="activateNav('nav-{{ suite_sum.name }}')">
                    <a href="{{ suite_sum.name }}_result.html" target="suite-report">
                        - {{ suite_sum.name }}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </nav>

        <div class="col-md-10" style="height: 100%">
            <iframe src="overview.html" name="suite-report"></iframe>
        </div>
    </div>
</div>
</body>
</html>