<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="color-scheme" content="light dark" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"/>
        <title>Test coverage</title>

        <script>
            function showCoverageDetails(showStat, showFull, showPartial, showEmpty) {
                document.getElementById("coverage-stat").style.display = showStat ? '' : 'none';
                document.getElementById("coverage-details-full").style.display = showFull ? 'block' : 'none';
                document.getElementById("coverage-details-partial").style.display = showPartial ? 'block' : 'none';
                document.getElementById("coverage-details-empty").style.display = showEmpty ? 'block' : 'none';
            }

            function coverageDetailsAll() {
                showCoverageDetails(true, true, true, true);
            }

            function coverageDetailsFull() {
                showCoverageDetails(false, true, false, false);
            }

            function coverageDetailsPartial() {
                showCoverageDetails(false, false, true, false);
            }

            function coverageDetailsEmpty() {
                showCoverageDetails(false, false, false, true);
            }
        </script>

        <style>
            button:hover {
                opacity: 0.6;
            }
            .center-text {
                text-align: center;
                border-radius: 20px;
            }
            .flex-container {
                display: flex;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <header class="container">

            <h1>Test coverage:</h1>

            <div class="grid">
                <button class="contrast pico-background-blue-500" style="color: #0F1114" onclick="coverageDetailsAll()">
                    All: {{all}}
                </button>

                <button class="contrast pico-background-green-500 " style="color: #0F1114" onclick="coverageDetailsFull()">
                    Full: {{full}}
                </button>

                <button class="contrast pico-background-pumpkin-300" style="color: #0F1114" onclick="coverageDetailsPartial()">
                    Partial: {{partial}}
                </button>

                <button class="contrast pico-background-red-500" style="color: #0F1114" onclick="coverageDetailsEmpty()">
                    Empty: {{empty}}
                </button>
            </div>

        </header>


        <main class="container">

            <div class="flex-container" role="group" id="coverage-stat">
                {% if full %}
                    <div class="pico-background-green-500 center-text" style="flex: 0 0 {{ stat_full_percent }}%; color: #0F1114;">
                        {{ '%0.2f'|format(full_percent|float) }}%
                    </div>
                {% endif %}

                {% if partial %}
                    <div class="pico-background-pumpkin-300 center-text" style="flex: 0 0 {{ stat_partial_percent }}%; color: #0F1114;">
                        {{ '%0.2f'|format(partial_percent|float) }}%
                    </div>
                {% endif %}

                {% if empty %}
                    <div class="pico-background-red-500 center-text" style="flex: 0 0 {{ stat_empty_percent }}%; color: #0F1114;">
                        {{ '%0.2f'|format(empty_percent|float) }}%
                    </div>
                {% endif %}
            </div>

            {% for coverage_type, methods, color in [('full', methods_full, 'green-500'), ('partial', methods_partial, 'pumpkin-300'), ('empty', methods_empty, 'red-500')] %}
                <div id="coverage-details-{{ coverage_type }}">
                    {% if methods %}
                        <h2 class="pico-color-{{ color }}">Coverage details {{ coverage_type }}:</h2>
                        {% for method in methods %}
                            <details>
                                <summary role="button" class="outline secondary">
                                    {{ method.http_method|upper }} {{ method.http_path }}
                                </summary>

                                {% for detail in method.details %}
                                    <hr />
                                    <p>{{ detail }}</p>
                                    <hr />
                                {% endfor %}

                            </details>
                        {% endfor %}
                    {% endif %}
                </div>
            {% endfor %}

        </main>
    </body>
</html>
