{% extends "base.html" %}

{% block title %}Interview Complete - Codingo{% endblock %}

{% block hero %}
<section class="hero">
    <div class="container">
        <div class="hero-content">
            <!-- Rounded Video Container -->
            <div class="luna-avatar-container">
                <div class="luna-glow"></div>
                <div class="luna-avatar">
                    <img src="{{ url_for('static', filename='images/LUNA.png') }}" alt="LUNA AI Assistant">
                </div>
            </div>
            <span class="eyebrow"><span class="dot"></span> Interview Complete</span>
            <h2 style="margin-top: 1rem;">Thank you for your time,<br>we'll get back to you if shortlisted.</h2>
            <div class="score-card">
                <span class="score-label">Overall performance</span>
                <span class="score-value">{{ score }}</span>
                <span class="score-summary">{{ feedback_summary }}</span>
            </div>
            <a href="{{ url_for('jobs') }}" class="btn btn-outline" style="margin-top:1.75rem;">Back to Jobs</a>
        </div>
    </div>
</section>

<style>
    .score-card {
        margin-top: 1.5rem;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: .35rem;
        padding: 1.5rem 2.5rem;
        border-radius: var(--r, 18px);
        background: var(--surface, #fff);
        border: 1px solid var(--line, #e7e9f2);
        box-shadow: 0 18px 45px rgba(13, 20, 40, .12);
    }
    .score-label { color: var(--muted, #5b6478); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
    .score-value {
        font-family: 'Space Grotesk', sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 1.1;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .score-summary { color: var(--ink, #0b1020); font-size: 1rem; max-width: 420px; }
</style>

{% endblock %}