<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Rendering snapshots</title>
    {% include 'diff-styles.html' %}
    {% include 'codemirror-scripts.html' %}
</head>

<body class="container py-4">
    <!-- Magnifying glass container -->
    <div class="magnifier-container">
        <div class="magnifier-view">
            <div class="magnifier-label">Run A</div>
            <img class="magnifier-img" id="mag-original">
        </div>
        <div class="magnifier-view">
            <div class="magnifier-label">Diff</div>
            <img class="magnifier-img" id="mag-diff">
        </div>
        <div class="magnifier-view">
            <div class="magnifier-label">Run B</div>
            <img class="magnifier-img" id="mag-second">
        </div>
        <div class="magnifier-caption">Space: flip A/B &nbsp;&bull;&nbsp; Ctrl+scroll: zoom</div>
    </div>

    <div class="mb-4">
        <h1 class="mb-3">Rendering snapshots</h1>

        <div class="row g-4 mb-4">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h3 class="h5 card-title">Run A</h3>
                        <p class="card-text mb-1">{{ comparison.run_a.comment }}</p>
                        {% if comparison.run_a.dxvk_versions %}
                        <p class="card-text mb-1"><strong>DXVK Version{% if comparison.run_a.dxvk_versions|length > 1 %}s{% endif %}:</strong>
                            {% for version in comparison.run_a.dxvk_versions %}{{ version }}{% if not loop.last %}, {% endif %}{% endfor %}
                        </p>
                        {% endif %}
                        {% if comparison.run_a.devices %}
                        <p class="card-text mb-1"><strong>Device{% if comparison.run_a.devices|length > 1 %}s{% endif %}:</strong>
                            {% for device in comparison.run_a.devices %}{{ device }}{% if not loop.last %}, {% endif %}{% endfor %}
                        </p>
                        {% endif %}
                        {% if comparison.run_a.drivers %}
                        <p class="card-text mb-1"><strong>Driver{% if comparison.run_a.drivers|length > 1 %}s{% endif %}:</strong>
                            {% for driver in comparison.run_a.drivers %}{{ driver }}{% if not loop.last %}, {% endif %}{% endfor %}
                        </p>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h3 class="h5 card-title">Run B</h3>
                        <p class="card-text mb-1">{{ comparison.run_b.comment }}</p>
                        {% if comparison.run_b.dxvk_versions %}
                        <p class="card-text mb-1"><strong>DXVK Version{% if comparison.run_b.dxvk_versions|length > 1 %}s{% endif %}:</strong>
                            {% for version in comparison.run_b.dxvk_versions %}{{ version }}{% if not loop.last %}, {% endif %}{% endfor %}
                        </p>
                        {% endif %}
                        {% if comparison.run_b.devices %}
                        <p class="card-text mb-1"><strong>Device{% if comparison.run_b.devices|length > 1 %}s{% endif %}:</strong>
                            {% for device in comparison.run_b.devices %}{{ device }}{% if not loop.last %}, {% endif %}{% endfor %}
                        </p>
                        {% endif %}
                        {% if comparison.run_b.drivers %}
                        <p class="card-text mb-1"><strong>Driver{% if comparison.run_b.drivers|length > 1 %}s{% endif %}:</strong>
                            {% for driver in comparison.run_b.drivers %}{{ driver }}{% if not loop.last %}, {% endif %}{% endfor %}
                        </p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-body">
                <h2 class="h4 card-title">Comparison Summary</h2>
                <p class="card-text mb-1">Maximum Difference: <span class="{% if comparison.max_diff != 0 %} text-danger {% endif %} fw-bold">{{
                        comparison.max_diff|diff_percentage }}</span></p>
                {% if patch_url %}
                <p class="card-text mb-1"><a href="{{ patch_url | safe }}">Download checksums.patch</a></p>
                {% endif %}
                {% if graphs_url %}
                <p class="card-text mb-1"><a href="{{ graphs_url | safe }}">View system resource graphs</a></p>
                {% endif %}
                <!-- TODO: do we want status? <p class="card-text">Status: <span class="badge bg-primary"> STATUS </span></p> -->
            </div>
        </div>
    </div>

    {% for diff in diffs %}
    <div class="card mb-4" id="capture-a" data-original="{{ diff.run_a.image | safe }}" data-original2="{{ diff.run_b.image | safe }}"
        data-diff="{{ diff.diff_image | safe }}" data-run-a-comment="{{ diff.run_a.comment }}"
        data-run-b-comment="{{ diff.run_b.comment }}">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="h5 mb-0">{{ diff.trace }} - {{ diff.frame }}</h3>
            <div class="text-muted small">
                Difference: <span class="{% if diff.diff != 0 %} text-danger {% endif %} fw-bold">{{ diff.diff|diff_percentage }}</span>
            </div>
        </div>
        <div class="card-body">
            {% if diff.flaky_frames %}
            <div class="alert alert-warning mb-3">
                <strong>Flaky rendering:</strong> these frames had inconsistent output within a single run: {{ diff.flaky_frames | join(", ") }}
            </div>
            {% endif %}
            <div class="row">
                <div class="col-12 col-xl-8">
                    <div class="row pswp-gallery" id="gallery">
                        <div class="col-md-4">
                            {% if diff.run_a.image_preview %}
                            <div class="image-container">
                                <a href="{{ diff.run_a.image | safe }}" data-pswp-width="1920" data-pswp-height="1080" id="gallery-img">
                                    <img src="{{ diff.run_a.image_preview }}" class="img-fluid preview-image">
                                </a>
                            </div>
                            {% endif %}
                        </div>

                        <div class="col-md-4">
                            {% if diff.run_b.image_preview %}
                            <div class="image-container">
                                <a href="{{ diff.run_b.image | safe }}" data-pswp-width="1920" data-pswp-height="1080" id="gallery-img">
                                    <img src="{{ diff.run_b.image_preview }}" class="img-fluid preview-image">
                                </a>
                            </div>
                            {% endif %}
                        </div>

                        <div class="col-md-4">
                            {% if diff.diff_image_preview %}
                            <div class="image-container">
                                <a href="{{ diff.diff_image | safe }}" data-pswp-width="1920" data-pswp-height="1080"
                                    id="gallery-img">
                                    <img src="{{ diff.diff_image_preview }}" class="img-fluid preview-image">
                                </a>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-4">
                    <div class="row">
                        {% if diff.run_a.log %}
                        <dt class="col-sm-4">Time A</dt>
                        <dd class="col-sm-8">{{ diff.run_a.execution_time|format_time }}</dd>

                        {% if diff.run_a.hang_log %}
                        <div class="alert alert-warning mb-3">
                            <strong>Hang in A</strong>
                            <p class="mb-0"><a href="#"
                                    onclick="showLogModal('{{ diff.run_a.hang_log }}', 'Hang Log A - {{ diff.trace }}'); return false;"
                                    class="alert-link">View Log</a></p>
                        </div>
                        {% endif %}

                        <dt class="col-sm-4">Log A</dt>
                        <dd class="col-sm-8">
                            <a href="#"
                                onclick="showLogModal('{{ diff.run_a.log }}', 'Log A - {{ diff.trace }}'); return false;"
                                class="link-primary">View</a>
                        </dd>
                        {% endif %}

                        <dt class="col-sm-4">Time{% if diff.run_a.log %} B{% endif %}</dt>
                        <dd class="col-sm-8">{{ diff.run_b.execution_time|format_time }}</dd>

                        {% if diff.peak_vram_mb is not none %}
                        <dt class="col-sm-4">Peak VRAM</dt>
                        <dd class="col-sm-8">{{ diff.peak_vram_mb|format_mib }}</dd>
                        {% endif %}
                        {% if diff.peak_sys_mem_mb is not none %}
                        <dt class="col-sm-4">Peak Sys Mem</dt>
                        <dd class="col-sm-8">{{ diff.peak_sys_mem_mb|format_mib }}</dd>
                        {% endif %}
                        {% if diff.peak_rss_mb is not none %}
                        <dt class="col-sm-4">Peak RSS</dt>
                        <dd class="col-sm-8">{{ diff.peak_rss_mb|format_mib }}</dd>
                        {% endif %}

                        {% if diff.run_b.hang_log %}
                        <div class="alert alert-warning mb-3">
                            <strong>Hang{% if diff.run_a.log %} in B{% endif %}</strong>
                            <p class="mb-0"><a href="#"
                                    onclick="showLogModal('{{ diff.run_b.hang_log }}', 'Hang Log{% if diff.run_a.log %} B{% endif %} - {{ diff.trace }}'); return false;"
                                    class="alert-link">View Log</a></p>
                        </div>
                        {% endif %}
                        <dt class="col-sm-4">Log{% if diff.run_a.log %} B{% endif %}</dt>
                        <dd class="col-sm-8">
                            <a href="#"
                                onclick="showLogModal('{{ diff.run_b.log }}', 'Log{% if diff.run_a.log %} B{% endif %} - {{ diff.trace }}'); return false;"
                                class="link-primary">View</a>
                        </dd>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

    {% include 'diff-scripts.html' %}
</body>

</html>