fieldwitness/frontends/web/templates/attest/verify_result.html

{% extends "base.html" %}
{% block title %}Verification Result — FieldWitness{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        {% if found %}
        <div class="alert alert-success">
            <i class="bi bi-patch-check me-2"></i>
            <strong>{{ message }}</strong>
        </div>
        {% else %}
        <div class="alert alert-warning">
            <i class="bi bi-exclamation-triangle me-2"></i>
            <strong>{{ message }}</strong>
        </div>
        {% endif %}

        {% if not is_image %}
        <div class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            This file is attested by cryptographic hash. Perceptual matching (pHash, dHash)
            is available for image files only.
        </div>
        {% endif %}

        {# Query file hashes #}
        <div class="card bg-dark border-secondary mb-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-hash me-2"></i>File Hashes for <code>{{ filename }}</code></h6>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <label class="form-label text-muted small">SHA-256</label>
                    <div><code class="text-warning small">{{ query_hashes.sha256 }}</code></div>
                </div>
                {% if query_hashes.phash %}
                <div class="mb-2">
                    <label class="form-label text-muted small">pHash</label>
                    <div><code class="small">{{ query_hashes.phash }}</code></div>
                </div>
                {% endif %}
            </div>
        </div>

        {# Matching attestations #}
        {% for match in matches %}
        <div class="card bg-dark border-{{ 'success' if match.match_type == 'exact' else 'info' }} mb-3">
            <div class="card-header d-flex justify-content-between">
                <span>
                    <i class="bi bi-patch-check me-2"></i>
                    Attestation <code>{{ match.record.short_id }}</code>
                </span>
                <span class="badge bg-{{ 'success' if match.match_type == 'exact' else 'info' }}">
                    {{ match.match_type }} match
                </span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Attestor</label>
                        <div>
                            <code>{{ match.record.attestor_fingerprint[:16] }}...</code>
                            <span class="text-muted small ms-2">({{ match.attestor_name }})</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Attested At</label>
                        <div>{{ match.record.timestamp.strftime('%Y-%m-%d %H:%M:%S UTC') }}</div>
                    </div>
                    {% if match.record.captured_at %}
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Captured At</label>
                        <div>{{ match.record.captured_at.strftime('%Y-%m-%d %H:%M:%S') }}</div>
                    </div>
                    {% endif %}
                    {% if match.record.location %}
                    <div class="col-md-6">
                        <label class="form-label text-muted small">Location</label>
                        <div>{{ match.record.location }}</div>
                    </div>
                    {% endif %}
                    {% if match.record.metadata.get('caption') %}
                    <div class="col-12">
                        <label class="form-label text-muted small">Caption</label>
                        <div>{{ match.record.metadata.caption }}</div>
                    </div>
                    {% endif %}
                </div>

                {% if match.distances %}
                <hr class="border-secondary">
                <h6 class="text-muted small">Hash Distances</h6>
                <div class="d-flex gap-3 flex-wrap">
                    {% for name, dist in match.distances.items() %}
                    <span class="badge bg-{{ 'success' if dist == 0 else ('info' if dist < 5 else ('warning' if dist < 10 else 'danger')) }}">
                        {{ name }}: {{ dist }}
                    </span>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}

        {% if found %}
        <div class="card bg-dark border-secondary mt-4">
            <div class="card-header">
                <h6 class="mb-0">Download Verification Receipt</h6>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Generate a signed JSON receipt for legal or archival use.
                    Re-upload the same file to produce the downloadable receipt.
                </p>
                <form action="/verify/receipt" method="post" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <div class="mb-3">
                        <input class="form-control form-control-sm bg-dark text-light border-secondary"
                               type="file" name="image" required>
                    </div>
                    <button type="submit" class="btn btn-outline-warning btn-sm">
                        Download Receipt (.json)
                    </button>
                </form>
            </div>
        </div>
        {% endif %}

        <div class="d-grid gap-2 mt-4">
            <a href="/verify" class="btn btn-outline-info">
                Verify Another File
            </a>
            <a href="/attest/log" class="btn btn-outline-secondary">
                View Attestation Log
            </a>
        </div>
    </div>
</div>
{% endblock %}