<!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">
<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>
<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="text-danger fw-bold">{{
comparison.max_diff|diff_percentage }}</span></p>
</div>
</div>
</div>
{% for diff in diffs %}
<div class="card mb-4" id="capture-a" data-original="{{ diff.run_a.image }}" data-original2="{{ diff.run_b.image }}"
data-diff="{{ diff.diff_image }}" 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="text-danger fw-bold">{{ diff.diff|diff_percentage }}</span>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-xl-8">
<div class="row pswp-gallery" id="gallery">
<div class="col-md-6">
{% if diff.run_a.image_preview %}
<div class="image-container">
<a href="{{ diff.run_a.image }}" 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-6">
{% if diff.run_b.image_preview %}
<div class="image-container">
<a href="{{ diff.run_b.image }}" 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-6">
{% if diff.diff_image_preview %}
<div class="image-container">
<a href="{{ diff.diff_image }}" 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">
<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>
<dt class="col-sm-4">Time B</dt>
<dd class="col-sm-8">{{ diff.run_b.execution_time|format_time }}</dd>
{% if diff.run_b.hang_log %}
<div class="alert alert-warning mb-3">
<strong>Hang in B</strong>
<p class="mb-0"><a href="#"
onclick="showLogModal('{{ diff.run_b.hang_log }}', 'Hang Log B - {{ diff.trace }}'); return false;"
class="alert-link">View Log</a></p>
</div>
{% endif %}
<dt class="col-sm-4">Log B</dt>
<dd class="col-sm-8">
<a href="#"
onclick="showLogModal('{{ diff.run_b.log }}', 'Log B - {{ diff.trace }}'); return false;"
class="link-primary">View</a>
</dd>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% include 'diff-scripts.html' %}
</body>
</html>