{% extends "base.html" %}

{% block title %}Bug rapporteren{% endblock %}
{% block page_title %}🐞 Bug rapporteren{% endblock %}
{% block header_class %}header--bug{% endblock %}
{% block main_class %}medium{% endblock %}
{% block loader_text %}Bugreport verwerken...{% endblock %}

{% block extra_css %}
<style>
    .info-box { margin-top: 14px; padding: 14px; border: 2px dashed var(--bug); border-radius: var(--radius); background: var(--success-bg); }
    .info-box ul { padding-left: 20px; margin: 6px 0 0; }
</style>
{% endblock %}

{% block content %}
<div class="split">
    <div class="card">
        <h2 class="card-title">Fout of bug rapporteren</h2>

        <form method="POST" action="{{ url_for('bugreport.bugreport_submit') }}" onsubmit="showLoader()">
            <div class="field">
                <label for="tijdstip">Tijdstip van de fout</label>
                <input type="datetime-local" id="tijdstip" name="tijdstip" required>
            </div>
            <div class="field">
                <label for="omschrijving">Omschrijving van de bug</label>
                <textarea id="omschrijving" name="omschrijving" required placeholder="Wat ging er precies mis? Welke stappen heb je ondernomen?"></textarea>
            </div>
            <div class="field">
                <label for="foutcode">Foutcode <span class="muted">(indien beschikbaar)</span></label>
                <textarea id="foutcode" name="foutcode" placeholder="Bijv. Error 404, NullPointerException of een tekstuele foutmelding..."></textarea>
            </div>
            <button class="btn-block btn-lg btn-success" type="submit">Rapport indienen</button>
        </form>
    </div>

    <div class="card">
        <h2 class="card-title">ℹ️ Informatie</h2>
        <p>Heeft de applicatie een probleem of werkt er iets niet naar behoren? Meld het direct aan het supportteam.</p>
        <div class="info-box">
            <strong>Automatische gegevens</strong>
            <ul>
                <li><strong>Gebruiker:</strong> wordt automatisch gekoppeld aan jouw account.</li>
                <li><strong>Status:</strong> staat standaard op <span class="badge badge-info">Nieuw</span>.</li>
            </ul>
        </div>
        <p class="small muted" style="margin-top: 14px;">
            Probeer de omschrijving zo nauwkeurig mogelijk in te vullen, zodat we het probleem snel kunnen reproduceren en oplossen.
        </p>
    </div>
</div>
{% endblock %}