{% extends "base.html" %}

{% block breadcrumb %}
    HolyGrail
    <span class="lb-tb-sep">›</span> BYOVD Hunter
{% endblock %}

{% set active_nav = 'holygrail' %}

{% block content %}

<style>
  /* Page-specific styles for the HolyGrail BYOVD page.
   * Stepper, progress bar, console log, and score display.
   * Everything references --lb-* tokens. */
  .hg-stepper { display: flex; align-items: center; gap: 8px; }
  .hg-step { display: flex; align-items: center; gap: 8px; color: var(--lb-text-mute); }
  .hg-step-circle {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    border: 1px solid var(--lb-border-hi);
    color: var(--lb-text-mute);
    transition: all var(--lb-transition);
  }
  .hg-step-circle.active {
    border-color: var(--lb-accent);
    color: var(--lb-accent);
    background: rgba(239, 68, 68, 0.1);
  }
  .hg-step-circle.done {
    border-color: var(--lb-sev-low);
    color: var(--lb-sev-low);
  }
  .hg-step-connector { flex: 1; height: 1px; background: var(--lb-border); min-width: 24px; }

  .hg-progress { height: 4px; background: var(--lb-bg); border: 1px solid var(--lb-border); position: relative; overflow: hidden; }
  .hg-progress-bar { position: absolute; top: 0; left: 0; height: 100%; background: var(--lb-accent); transition: width var(--lb-transition); }

  .hg-console-log {
    background: var(--lb-bg); border: 1px solid var(--lb-border);
    padding: 10px; max-height: 280px; overflow-y: auto;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--lb-text-dim);
  }
  .hg-console-log ul { list-style: none; padding: 0; margin: 0; }
  .hg-console-log li { padding: 2px 0; }
  .hg-console-log li::before { content: '>'; color: var(--lb-accent-soft); margin-right: 8px; opacity: 0.7; }

  .hg-score-value {
    font-size: 36px; font-weight: 700; line-height: 1;
    color: var(--lb-text); font-variant-numeric: tabular-nums;
  }
</style>

<!-- Page header -->
<div class="lb-panel">
    <div class="lb-panel-hdr"><span class="lb-glyph">▸</span>HolyGrail BYOVD Hunter</div>
    <div class="lb-panel-body">
        <p class="lb-muted" style="font-size: 12px; margin-bottom: 12px;">
            Driver Imports · LoLDrivers · Microsoft Driver Block Policy
        </p>

        <!-- Stepper -->
        <div id="stepper" class="hg-stepper">
            <div class="hg-step">
                <div id="s1" class="hg-step-circle active">1</div>
                <span style="font-size: 12px;">Upload Driver</span>
            </div>
            <div class="hg-step-connector"></div>
            <div class="hg-step">
                <div id="s2" class="hg-step-circle">2</div>
                <span style="font-size: 12px;">Analyze</span>
            </div>
            <div class="hg-step-connector"></div>
            <div class="hg-step">
                <div id="s3" class="hg-step-circle">3</div>
                <span style="font-size: 12px;">Review Results</span>
            </div>
        </div>
    </div>
</div>

<!-- Upload section -->
<div id="uploadArea">
    <div id="uploadCard" class="lb-panel">
        <div class="lb-panel-hdr"><span class="lb-glyph">▸</span>Drop Driver</div>
        <div class="lb-panel-body">
            <div id="dz" role="button" tabindex="0" aria-label="Upload driver file">
                <input type="file" id="fileInput" class="hidden" accept=".sys"/>
                <label for="fileInput" class="lb-upload-zone" style="display: block; cursor: pointer;">
                    <svg class="lb-upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                        <polyline points="7,10 12,15 17,10" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                        <line x1="12" y1="15" x2="12" y2="3" stroke-linecap="round" stroke-width="1.5"/>
                    </svg>
                    <div class="lb-upload-title">Drop Driver Here</div>
                    <div class="lb-upload-hint">
                        <span class="lb-tag info">.SYS</span> ·
                        Max {{ (config.utils.max_file_size / 1024 / 1024) | round(1) }} MB
                    </div>
                </label>
            </div>
            <div id="uploadStatus" class="hidden" style="margin-top: 12px;"></div>
        </div>
    </div>
</div>

<!-- Console -->
<div id="consoleCard" class="hidden lb-panel lb-fade-in">
    <div class="lb-panel-hdr">
        <span class="lb-glyph">▸</span><span id="consoleTitle">Driver Analysis</span>
        <button id="cancelBtn" class="lb-btn lb-btn-ghost" style="margin-left: auto; padding: 2px 10px; font-size: 12px;">Cancel</button>
    </div>
    <div class="lb-panel-body">
        <div class="hg-progress" style="margin-bottom: 10px;">
            <div id="progressBar" class="hg-progress-bar" style="width: 0%"></div>
        </div>
        <div class="hg-console-log">
            <ul id="consoleLog"></ul>
        </div>
    </div>
</div>

<!-- Results -->
<div id="resultsCard" class="hidden">

    <!-- Header -->
    <div class="lb-panel">
        <div class="lb-panel-hdr">
            <span class="lb-glyph">▸</span>Analysis Complete
            <div style="margin-left: auto; display: flex; gap: 8px;">
                <button id="resetBtn" class="lb-btn lb-btn-ghost" style="padding: 2px 10px; font-size: 12px;">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="1,4 1,10 7,10" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
                    Reset
                </button>
                <button id="staticScanBtn" onclick="runStaticScan()" class="lb-btn" style="padding: 2px 10px; font-size: 12px;">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                    Run Static Scan
                </button>
                <label class="lb-btn lb-btn-primary" style="padding: 2px 10px; font-size: 12px; cursor: pointer;">
                    <input type="file" id="fileInputSmall" class="hidden" accept=".sys"/>
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17,8 12,3 7,8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><line x1="12" y1="3" x2="12" y2="15" stroke-linecap="round" stroke-width="1.5"/></svg>
                    Upload Another
                </label>
            </div>
        </div>
        <div class="lb-panel-body">
            <div id="summaryName" class="lb-strong" style="font-size: 16px; word-break: break-all; margin-bottom: 6px;">No file</div>
            <div style="display: flex; gap: 12px; margin-bottom: 12px;">
                <span class="lb-tag info"><span id="summaryType">—</span></span>
                <span class="lb-tag info"><span id="summaryTime">—</span></span>
            </div>

            <!-- Verdict banner -->
            <div id="verdictBanner"></div>

            <!-- Block status quick chips -->
            <div class="lb-chip-row" style="margin-top: 12px;">
                <div class="lb-chip">
                    <div class="lb-chip-name">LOLDrivers</div>
                    <div id="lolBadge" class="lb-chip-count" style="font-size: 14px;">Checking…</div>
                </div>
                <div class="lb-chip">
                    <div class="lb-chip-name">Windows 10</div>
                    <div id="w10Badge" class="lb-chip-count" style="font-size: 14px;">Checking…</div>
                </div>
                <div class="lb-chip">
                    <div class="lb-chip-name">Windows 11</div>
                    <div id="w11Badge" class="lb-chip-count" style="font-size: 14px;">Checking…</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Score + Hash -->
    <div class="lb-panel">
        <div class="lb-panel-hdr"><span class="lb-glyph">▸</span>BYOVD Score</div>
        <div class="lb-panel-split">
            <div class="lb-col">
                <div class="lb-hero-label">Score</div>
                <div id="scoreValue" class="hg-score-value">0</div>
                <div class="hg-progress" style="margin-top: 10px; margin-bottom: 8px;">
                    <div id="scoreBar" class="hg-progress-bar" style="width: 0%"></div>
                </div>
                <div id="scoreLabel" class="lb-muted" style="font-size: 12px;">Calculating…</div>
            </div>
            <div class="lb-col" style="flex: 2;">
                <div class="lb-hero-label">SHA256</div>
                <div style="display: flex; align-items: flex-start; gap: 8px; margin-top: 6px;">
                    <code id="sha256Full" class="lb-mono lb-strong" style="flex: 1; font-size: 12px; word-break: break-all; padding: 6px 8px; background: var(--lb-bg); border: 1px solid var(--lb-border);">Unknown</code>
                    <button id="copyShaBtn" class="lb-btn lb-btn-ghost" style="padding: 4px 8px; font-size: 12px;">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke-width="1.5"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                        Copy
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Metadata -->
    <div class="lb-panel">
        <div class="lb-panel-hdr"><span class="lb-glyph">▸</span>Metadata</div>
        <div class="lb-panel-body">
            <div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;">
                <div>
                    <div class="lb-eyebrow">File Version</div>
                    <div id="fileVersion" class="lb-strong lb-mono" style="font-size: 13px;">Unknown</div>
                </div>
                <div>
                    <div class="lb-eyebrow">File Size</div>
                    <div id="fileSizePretty" class="lb-strong" style="font-size: 13px;">Unknown</div>
                </div>
                <div>
                    <div class="lb-eyebrow">Architecture</div>
                    <div id="arch" class="lb-strong lb-mono" style="font-size: 13px;">Unknown</div>
                </div>
                <div>
                    <div class="lb-eyebrow">Original Filename</div>
                    <div id="originalFilename" class="lb-strong lb-mono" style="font-size: 13px; word-break: break-all;">Unknown</div>
                </div>
                <div>
                    <div class="lb-eyebrow">Compile Time</div>
                    <div id="compileTime" class="lb-strong lb-mono" style="font-size: 13px;">Unknown</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Critical imports -->
    <div class="lb-panel" id="importsCard">
        <div class="lb-panel-hdr"><span class="lb-glyph">▸</span>Critical Imports</div>
        <div class="lb-panel-body">
            <div id="importsWrap" style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;"></div>
            <div class="lb-muted" style="font-size: 11px;">Heuristics identify privileged primitives commonly exploited in BYOVD attacks.</div>
        </div>
    </div>

    <!-- Windows block status -->
    <div class="lb-panel">
        <div class="lb-panel-hdr"><span class="lb-glyph">▸</span>Windows Block Status</div>
        <div class="lb-panel-body">
            <div id="blockRows" class="lb-grid-2"></div>
        </div>
    </div>

    <!-- Hidden helpers for JS -->
    <div class="hidden">
        <span id="summarySize">—</span>
        <code id="summaryMd5">—</code>
        <code id="summarySha">—</code>
    </div>
</div>

<!-- Toast container -->
<div id="toastContainer" style="position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200;" aria-live="polite"></div>

{% endblock %}

{% block scripts %}
<script type="module" src="{{ url_for('static', filename='js/holygrail/core.js') }}"></script>
{% endblock %}