{% extends 'base.html.twig' %}

{% block title %}Game Lost - {{ session.game.name }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        body {
            background-color: #1a1a1a;
            color: #e0e0e0;
        }
        .card {
            background-color: #2d2d2d;
            border-color: #444;
            color: #e0e0e0;
        }
        .form-label {
            font-weight: bold;
        }
        .story-container {
            font-style: italic;
            border-left: 4px solid #dc3545;
            padding-left: 20px;
            margin-bottom: 30px;
        }
        .donation-section {
            background-color: #333;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            text-align: center;
        }
        .form-range::-webkit-slider-runnable-track {
            background-color: #444;
        }
        .form-range::-moz-range-track {
            background-color: #444;
        }
        .form-range::-webkit-slider-thumb {
            background-color: #dc3545;
        }
        .form-range::-moz-range-thumb {
            background-color: #dc3545;
        }
    </style>
{% endblock %}

{% block body %}
<div class="container mt-5 mb-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-lg">
                <div class="card-header bg-danger text-white">
                    <h3 class="card-title mb-0">Game Over - Time's Up!</h3>
                </div>
                <div class="card-body">
                    <h4>{{ session.game.name }}</h4>
                    <hr>

                    <div class="story-container">
                        <p>
                            The screens flickered one last time before going completely dark. The hum of the servers ceased, replaced by an eerie silence.
                            The server seems to have shut itself down before the AI virus could complete its task in decoding the undercover agents.
                        </p>
                        <p>
                            In the days after some people are arrested for sabotaging the agency, but in the end nobody is convicted for the actions.
                            Lets hope the agents which were undercover are safe and the information needed is still saved to put the other criminals behind bars.
                        </p>
                    </div>

                    <div class="donation-section">
                        <h5>Support the Developer</h5>
                        <p>If you enjoyed the experience (even if you lost!), please consider a small donation to help me create more games.</p>
                        <a href="https://www.paypal.com/donate?hosted_button_id=X9X8KB6R6GMRU" target="_blank" class="btn btn-primary">
                            <i class="bi bi-paypal"></i> Donate via PayPal
                        </a>
                    </div>

                    <div class="feedback-form mt-4">
                        <h5>Feedback</h5>
                        <form method="post">
                            <div class="mb-3">
                                <label for="difficulty" class="form-label">How would you rate the difficulty? (<span id="difficulty-val">5</span>/10)</label>
                                <input type="range" class="form-range" min="1" max="10" step="1" id="difficulty" name="difficulty" value="5" oninput="document.getElementById('difficulty-val').innerText = this.value">
                                <div class="d-flex justify-content-between mt-1">
                                    <small class="text-muted">Absolutely not</small>
                                    -
                                    <small class="text-muted">Absolutely</small>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="entertaining" class="form-label">How entertaining was it? (<span id="entertaining-val">5</span>/10)</label>
                                <input type="range" class="form-range" min="1" max="10" step="1" id="entertaining" name="entertaining" value="5" oninput="document.getElementById('entertaining-val').innerText = this.value">
                                <div class="d-flex justify-content-between mt-1">
                                    <small class="text-muted">Absolutely not</small>
                                    -
                                    <small class="text-muted">Absolutely</small>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="theme" class="form-label">How was the theme? (<span id="theme-val">5</span>/10)</label>
                                <input type="range" class="form-range" min="1" max="10" step="1" id="theme" name="theme" value="5" oninput="document.getElementById('theme-val').innerText = this.value">
                                <div class="d-flex justify-content-between mt-1">
                                    <small class="text-muted">Absolutely not</small>
                                    -
                                    <small class="text-muted">Absolutely</small>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="feedback" class="form-label">Additional Feedback</label>
                                <textarea class="form-control" id="feedback" name="feedback" rows="4" placeholder="Tell us more about your experience..."></textarea>
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-success">Submit Feedback & Return to Dashboard</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}