<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>{{title}}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <script>
        function showhide(item, id, tooltip_when_showed = "", tooltip_when_hided = "") {
            var div = document.getElementById(id);
            if (div.style.display !== "block") {
                div.style.display = "block";
                item.style.transform = 'rotate(0deg)';
                item.title = tooltip_when_showed;
            }
            else {
                div.style.display = "none";
                item.style.transform = 'rotate(-90deg)';
                item.title = tooltip_when_hided;
            }
        }

        function showTest(checked, type) {
            var scenarios = document.getElementsByClassName(type + "-scenario");
            if (checked) {
                for (let i = 0; i < scenarios.length; i++) {
                    scenarios[i].style.display = "flex";
                }
            } else {
                for (let i = 0; i < scenarios.length; i++) {
                    scenarios[i].style.display = "none";
                }
            }
        }

    </script>

</head>

<body
    style="font-family: 'Roboto', sans-serif; padding: 4rem;background: #F5F6F7; scroll-behavior: smooth; color: #1a1a1a;">

    {% include './components/feature_statistics_link.html' %}
    <div style="margin-bottom: 1rem;">
        <div style="display: flex; align-items: first baseline; justify-content: space-between;">
            <div>
                <h1 style="font-size: 2rem; font-weight: 400; margin-bottom: 0.25rem;">Test report: {{title}}</h1>
                <p style="color: #535353; margin: 0 0 0.5rem 0;">{{file_path}}</p>
            </div>
            <p style="color: #535353;">{{date_time}}</p>
        </div>

        {% include './components/test_file_uri.html' %}
    </div>

    {{summary | safe}}

    <br>
    <div id="feature-statistics"
        style="background-color: white; padding: 2rem; border-radius: 0.625rem;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.10);">
        <table border="0" cellpadding="2" style="width: 100%;border-collapse: collapse;">
            <tbody>
                <tr style="border-bottom: 1px solid #555; color: #555;">
                    <td style="width: 50%;">Feature</td>

                    <td style="width: fit-content; text-align:center;">Total</td>
                    <td style="width: fit-content; text-align:center;">Passed</td>
                    <td style="width: fit-content; text-align:center;">Failed</td>
                    <td style="width: fit-content; text-align:center;">Skipped</td>
                    <td style="width: fit-content; text-align:center;">Success Rate</td>
                    <td style="width: fit-content; text-align:center;">Duration</td>

                </tr>
                {{feature_statistics | safe}}
            </tbody>
        </table>
    </div>

    <br>

    <div id="control-box" style="display: flex; justify-content: space-between;">
        {% include './components/filters.html' %}
    </div>

    <br>
    <div style="display: flex; flex-direction: column; gap: 3.5rem;">
        {{features | safe}}
    </div>


</body>

</html>