<!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>
        #page-header {
            background: #983DE7;
            background: linear-gradient(to right, #aa61ea 0%, #ea3bc1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .overlay-container {
            position: relative;
        }
        .diff-wrapper-actual {
            mix-blend-mode: difference;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        a {
            color: #aa61ea !important;
            font-weight: bold;
            text-decoration: none;
            &:hover {
                color: #ea3bc1 !important;
                text-decoration: underline;
            }
        }

        .pass-green {
            color: #22c55e;
        }
        .pass-green-bg {
            background-color: #22c55e;
        }
        .pass-green-bg-20 {
            background-color: rgba(34, 197, 94, 0.2);
        }
        .fail-red {
            color: #ef4444;
        }
        .fail-red-bg {
            background-color: #ef4444;
        }
        .fail-red-bg-20 {
            background-color: rgba(239, 68, 68, 0.2);
        }
        .border-purple {
            border-color: #aa61ea;
        }
    </style>
</head>
<body class="bg-dark text-white">

<div class="container-fluid">
    <div class="row">
        <div class="col-6 p-4">
            <h3 id="page-header" class="mb-0">
                <strong>Textual</strong> Snapshot Tests
            </h3>
        </div>
        <div class="col p-4">
            <div class="w-100 d-flex gap-1 justify-content-end mb-1 mt-2">
                <span class="fail-red fail-red-bg-20 px-2 rounded-1">
                    <strong>{{ diffs | length }}</strong> snapshots changed
                </span>
                <span class="pass-green pass-green-bg-20 px-2 rounded-1">
                    <strong>{{ passes }}</strong> snapshots matched
                </span>
            </div>
        </div>
    </div>

    {% for diff in diffs %}
        <div class="row mb-4">
            <div class="col">
                <div class="card text-white bg-dark border-secondary rounded-1">
                    <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_exists %}
                        <div class="form-check form-switch mt-1 bg-dark">
                            <input class="form-check-input" type="checkbox" role="switch"
                                   id="flexSwitchCheckDefault{{ loop.index0 }}" onchange="toggleOverlayCheckbox(this, {{ loop.index0 }})">
                            <label class="form-check-label text-muted" for="flexSwitchCheckDefault{{ loop.index0 }}">
                                Show difference
                            </label>
                        </div>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                {{ diff.actual }}
                                <div class="w-100 d-flex flex-column justify-content-center align-items-center mt-1">
                                    {% if diff.app_path %}
                                        <div class="small text-center font-monospace">
                                            <a href="{{ file_open_prefix }}{{ diff.app_path }}">
                                               {{ diff.app_path.parent.name }}/{{ diff.app_path.name }}
                                            </a>
                                        </div>
                                    {% endif %}
                                    <div class="small opacity-75 text-center">{{ diff.docstring }}</div>
                                    <div class="small">
                                        <a href="#" class="mb-0 fw-normal"
                                           data-bs-toggle="modal"
                                           data-bs-target="#environmentModal{{ loop.index0 }}">
                                           View environment info
                                        </a>
                                    </div>
                                </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 a historical snapshot exists for this test, then display it,
                                    otherwise display a message to the user. #}
                                    {% if diff.snapshot_exists %}
                                        {{ diff.snapshot }}
                                    {% else %}
                                        <div class="card bg-dark text-white border-purple rounded-1">
                                            <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_exists %}
                                <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{{ loop.index0 }}" tabindex="-1"
                     aria-labelledby="environmentModalLabel{{ loop.index0 }}"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content bg-dark text-white">
                            <div class="modal-header">
                                <h5 class="modal-title" id="environmentModalLabel{{ loop.index0 }}">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 text-white">
                                    <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 text-white">
                                    <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">
        <div class="col">
            <div class="card text-white bg-dark border-secondary rounded-1">
                <div class="card-body">
                    <p class="card-text">If you're happy with the test output, run <span class="font-monospace">pytest</span> with the <span
                            class="font-monospace">--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>
