{% extends "base.html" %}
{% block content %}
<div class="container mt-5">
    <div class="card shadow-lg">
        <div class="row g-0">
            {% if game.steam_appid %}
            <div class="col-md-4">
                <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/{{ game.steam_appid }}/header.jpg" 
                     class="img-fluid rounded-start" alt="Game Cover">
            </div>
            {% endif %}
            <div class="col-md-8">
                <div class="card-body">
                    <h1 class="card-title mb-4">{{ game.name }}</h1>
                    <div class="alert alert-success">
                        <h4>{{ _('Your Key:') }}</h4>
                        <code class="fs-3">{{ game.steam_key }}</code>
                    </div>
                    <a href="{{ platform_link }}{{ game.steam_key }}" 
                      class="btn btn-primary btn-lg mb-3"
                      target="_blank">
                        {{ _('Redeem now on') }} {{ platform_label }}
                    </a>
                    <div class="mt-4 text-muted">
                        <small>
                            {{ _('This page will expire in') }} 
                            <span id="expiry-countdown" class="fw-bold"></span>
                        </small>
                        <div class="progress mt-2" style="height: 8px;">
                            <div id="expiry-bar" 
                                class="progress-bar bg-danger" 
                                role="progressbar" 
                                style="width: 100%">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
const totalDuration = {{ redeem_token.total_hours * 3600 * 1000 }};  // Gesamtdauer in Millisekunden
const expires = {{ expires_timestamp }};
const countdownEl = document.getElementById('expiry-countdown');
const progressBar = document.getElementById('expiry-bar');
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

function formatTime(unit) {
    return unit < 10 ? `0${unit}` : unit;
}

function updateProgressBar(percentage) {
    // Alle Farbklassen entfernen
    progressBar.classList.remove('bg-success', 'bg-warning', 'bg-danger');
    
    if (percentage > 75) {
        progressBar.classList.add('bg-success');
    } else if (percentage > 25) {
        progressBar.classList.add('bg-warning');
    } else {
        progressBar.classList.add('bg-danger');
    }
}

function updateCountdown() {
    const now = Date.now();
    const remaining = expires - now;
    const percent = (remaining / totalDuration) * 100;

    if (remaining < 0) {
        countdownEl.innerHTML = "EXPIRED";
        progressBar.style.width = "0%";
        clearInterval(timer);
        setTimeout(() => window.location.reload(), 5000);
        return;
    }

    const hours = Math.floor(remaining / (1000 * 60 * 60));
    const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((remaining % (1000 * 60)) / 1000);

    countdownEl.innerHTML = `${formatTime(hours)}h ${formatTime(minutes)}m ${formatTime(seconds)}s`;
    progressBar.style.width = `${percent}%`;
    updateProgressBar(percent);
}

// run countdown
updateCountdown();
const timer = setInterval(updateCountdown, 1000);
</script>
{% endblock %}