<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Textual Snapshot Test Report</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <style>
        .overlay-container {
            position: relative;
        }
        .diff-wrapper-actual {
            mix-blend-mode: difference;
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row mb-4" style="background-color:#F4F8F7;">
        <div class="col-8 p-4">
            <h4>
                <strong>Textual</strong> Snapshot Tests
            </h4>
            <span class="text-muted">Showing diffs for {{ fails }} mismatched snapshot(s)</span>
        </div>
        <div class="col p-4">
            <div class="w-100 d-flex justify-content-end mb-1 mt-2">
                <span class="text-danger">
                    <strong>{{ diffs | length }}</strong> snapshots changed
                </span>
                <span class="text-muted mx-2">·</span>
                <span class="text-success">
                    <strong>{{ passes }}</strong> snapshots matched
                </span>
            </div>
            <div class="progress">
                <div class="progress-bar bg-danger" role="progressbar" aria-label="Segment one"
                     style="width: {{ fail_percentage }}%"
                     aria-valuenow="{{ fails }}" aria-valuemin="0" aria-valuemax="{{ num_snapshot_tests }}"></div>
                <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two"
                     style="width: {{ pass_percentage }}%"
                     aria-valuenow="{{ num_snapshot_tests }}" aria-valuemin="0"
                     aria-valuemax="{{ num_snapshot_tests }}"></div>
            </div>
        </div>
    </div>

    {% for diff in diffs %}
        <div class="row mb-4">
            <div class="col">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <span class="font-monospace mt-1">
                            <span class="fw-bold">{{ diff.test_name }}</span>
                            <span class="text-muted px-2">
                                {{ diff.path }}:{{ diff.line_number }}
                            </span>
                        </span>
                        {% if diff.snapshot != "" %}
                        <div class="form-check form-switch mt-1">
                            <input class="form-check-input" type="checkbox" role="switch"
                                   id="flexSwitchCheckDefault" onchange="toggleOverlayCheckbox(this, {{ loop.index0 }})">
                            <label class="form-check-label text-muted" for="flexSwitchCheckDefault">
                                Show difference
                            </label>
                        </div>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                {{ diff.actual }}
                                <div class="w-100 d-flex justify-content-center mt-1">
                                    <span class="small">Output from test (<a href="#" class="link-primary mb-0"
                                                                             data-bs-toggle="modal"
                                                                             data-bs-target="#environmentModal">More info</a>)</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="overlay-container">
                                    <div class="diff-wrapper-actual" id="diff-overlay-{{ loop.index0 }}" hidden>
                                        {{ diff.actual }}
                                    </div>
                                </div>
                                <div class="diff-wrapper-snapshot">
                                    {% if diff.snapshot != "" %}
                                        {{ diff.snapshot }}
                                    {% else %}
                                        <div class="card">
                                            <div class="card-body">
                                                <h4>No history for this test</h4>
                                                <p class="lead">If you're happy with the content on the left,
                                                    save it to disk by running pytest with the <code>--snapshot-update</code> flag.</p>
                                                <h5>Unexpected?</h5>
                                                <p class="lead">
                                                    Snapshots are named after the name of the test you call <code>snap_compare</code> in by default.
                                                    <br>
                                                    If you've renamed a test, the association between the snapshot and the test is lost,
                                                    and you'll need to run with <code>--snapshot-update</code> to associate the snapshot
                                                    with the new test name.
                                                    </p>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                                {% if diff.snapshot != "" %}
                                <div class="w-100 d-flex justify-content-center mt-1">
                                    <span class="small">
                                        Historical snapshot
                                    </span>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {# Modal with debug info: #}
                <div class="modal modal-lg fade" id="environmentModal" tabindex="-1"
                     aria-labelledby="environmentModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="environmentModalLabel">More info for <span
                                        class="font-monospace">{{ diff.test_name }}</span></h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                            </div>
                            <div class="modal-body overflow-auto">
                                <h5>Textual App State</h5>
                                <table class="table mb-4">
                                    <thead>
                                    <tr>
                                        <th scope="col">Variable</th>
                                        <th scope="col">Value</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td class="font-monospace">app.console.legacy_windows</td>
                                        <td class="font-monospace">{{ diff.app.console.legacy_windows }}</td>
                                    </tr>
                                    <tr>
                                        <td class="font-monospace">app.console.size</td>
                                        <td class="font-monospace">{{ diff.app.console.size }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                                <h5>Environment (<span class="font-monospace">os.environ</span>)</h5>
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th scope="col">Variable</th>
                                        <th scope="col">Value</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for key, value in diff.environment.items() %}
                                        <tr>
                                            <td class="font-monospace">{{ key }}</td>
                                            <td class="font-monospace">{{ value }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}

    <div class="row" style="background-color:#F4F8F7;">
        <div class="col">
            <div class="card bg-light">
                <div class="card-body">
                    <p class="card-text">If you're happy with the test output, run <span class="font-monospace text-primary">pytest</span> with the <span
                            class="font-monospace text-primary">--snapshot-update</span> flag to update the snapshot.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="w-100 d-flex p-4 justify-content-center">
                <p class="text-muted">Report generated at UTC {{ now }}.</p>
            </div>
        </div>
    </div>

</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

<script type="application/javascript">
    function toggleOverlayCheckbox(element, index) {
        const overlay = document.getElementById(`diff-overlay-${index}`)
        overlay.hidden = !overlay.hidden
    }
</script>

</body>
</html>
