{% extends "base.html" %}

{% block title %}Bugoverzicht{% endblock %}
{% block page_title %}🐞 Bugoverzicht{% endblock %}
{% block header_class %}header--bug{% endblock %}
{% block main_class %}wide{% endblock %}

{% block extra_css %}
<style>
    .text-wrap { max-width: 380px; white-space: pre-line; word-break: break-word; }
    .foutcode-block { font-family: ui-monospace, Consolas, monospace; background: var(--surface-muted); border: 1px solid var(--border); padding: 3px 8px; border-radius: 4px; font-size: 12.5px; display: inline-block; max-width: 260px; word-break: break-all; }
</style>
{% endblock %}

{% block content %}
<div class="card">
    <div class="page-head">
        <h2>Ingediende bugreports</h2>
        <div class="actions">
            <a class="btn btn-success" href="{{ url_for('bugreport.bugreport') }}">➕ Nieuwe bug melden</a>
        </div>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Gebruiker</th>
                    <th>Datum / tijd</th>
                    <th>Omschrijving</th>
                    <th>Foutcode</th>
                    <th>Status</th>
                    <th class="actions">Actie</th>
                </tr>
            </thead>
            <tbody>
                {% for bug in results %}
                <tr>
                    <td><strong>#{{ bug.Bug_ID }}</strong></td>
                    <td>{{ bug.Gebruiker }}</td>
                    <td class="nowrap">{{ bug.Datum.strftime('%d-%m-%Y %H:%M') if bug.Datum else '' }}</td>
                    <td class="text-wrap">{{ bug.Omschrijving }}</td>
                    <td>
                        {% if bug.Foutcode %}<span class="foutcode-block">{{ bug.Foutcode }}</span>
                        {% else %}<span class="muted"><em>Geen</em></span>{% endif %}
                    </td>
                    <td>
                        {% if bug.Status == 'Fixed' %}<span class="badge badge-success">✅ Fixed</span>
                        {% elif bug.Status == 'In behandeling' %}<span class="badge badge-warning">🧑‍💻 In behandeling</span>
                        {% else %}<span class="badge badge-info">ℹ️ Nieuw</span>
                        {% endif %}
                    </td>
                    <td class="actions">
                        <button type="button" class="btn-sm btn-success" onclick="openStatusModal('{{ bug.Bug_ID }}')">Wijzig status</button>
                    </td>
                </tr>
                {% else %}
                <tr class="empty-row"><td colspan="7">Er zijn momenteel geen bugreports.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block modals %}
<div id="statusModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="document.getElementById('statusModal').style.display='none'">&times;</span>
        <h3>Status wijzigen voor bug <span id="modalBugId"></span></h3>

        <form id="statusForm" method="POST" action="{{ url_for('bugreport_overzicht.bugreport_wijzig_status') }}">
            <input type="hidden" name="Bug_ID" id="modalHiddenBugId">
            <input type="hidden" name="new_status" id="modalHiddenStatus">
            <button type="button" class="status-button status-info" id="btn-nieuw" onclick="submitStatus('Nieuw')">ℹ️ Nieuw</button>
            <button type="button" class="status-button status-warning" id="btn-behandeling" onclick="submitStatus('In behandeling')">🧑‍💻 In behandeling</button>
            <button type="button" class="status-button status-success" id="btn-fixed" onclick="submitStatus('Fixed')">✅ Fixed</button>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function openStatusModal(bugId) {
        document.getElementById('modalBugId').textContent = '#' + bugId;
        document.getElementById('modalHiddenBugId').value = bugId;
        document.getElementById('statusModal').style.display = 'block';
    }

    function submitStatus(chosenStatus) {
        document.getElementById('modalHiddenStatus').value = chosenStatus;
        document.getElementById('statusForm').submit();
    }

    window.onclick = function (event) {
        const modal = document.getElementById('statusModal');
        if (event.target === modal) modal.style.display = 'none';
    };
</script>
{% endblock %}