{% extends "base.jinja2" %}

{% block title %}Bug Report #{{ report.id }} - DarkflameServer{% endblock %}

{% block content %}
<nav data-crumbs data-crumb-label="Bug Report #{{ report.id }}" aria-label="Breadcrumb"><ol class="breadcrumb mb-3"><li class="breadcrumb-item"><a href="/bug_reports">Bug Reports</a></li><li class="breadcrumb-item active" aria-current="page">Bug Report #{{ report.id }}</li></ol></nav>

<div class="card mb-4" id="report" data-report-id="{{ report.id }}">
	<div class="card-header d-flex justify-content-between align-items-center">
		<h4 class="mb-0">Bug Report #{{ report.id }}</h4>
		{% if report.resolved %}<span class="badge text-bg-success">Resolved</span>{% else %}<span class="badge text-bg-warning">Open</span>{% endif %}
	</div>
	<div class="card-body">
		<div class="row g-3 mb-3">
			<div class="col-md-3">
				<div class="text-body-secondary small text-uppercase">Reporter</div>
				<div>{% if report.reporter_name != "" %}<a href="/characters/{{ report.reporter_id }}">{{ report.reporter_name }}</a>{% else %}Unknown{% endif %}</div>
			</div>
			<div class="col-md-3">
				<div class="text-body-secondary small text-uppercase">Submitted</div>
				<div>{{ report.submitted }}</div>
			</div>
			<div class="col-md-3">
				<div class="text-body-secondary small text-uppercase">Client Version</div>
				<div>{{ report.client_version }}</div>
			</div>
			<div class="col-md-3">
				<div class="text-body-secondary small text-uppercase">Other Player</div>
				<div>{% if report.other_player_name != "" %}<a href="/characters/{{ report.other_player_char_id }}">{{ report.other_player_name }}</a>{% else %}{{ report.other_player_id }}{% endif %}</div>
			</div>
		</div>
		<div class="text-body-secondary small text-uppercase">Selection</div>
		<p>{{ report.selection_text }}</p>
		<div class="text-body-secondary small text-uppercase">Report</div>
		<p class="mb-0" style="white-space: pre-wrap;">{{ report.body }}</p>
	</div>
</div>

<div class="card">
	<div class="card-header"><h5 class="mb-0">Resolution</h5></div>
	<div class="card-body">
		{% if report.resolved %}
		<p class="text-body-secondary small">Resolved {{ report.resolved_time }}{% if report.resolver_name != "" %} by {{ report.resolver_name }}{% endif %}</p>
		<p style="white-space: pre-wrap;">{{ report.resolution }}</p>
		{% endif %}
		{% if can.bug_reports_manage %}
		{% if not report.resolved %}
		<textarea id="resolution" class="form-control mb-2" rows="3" placeholder="What was done about this report?"></textarea>
		<button class="btn btn-success" onclick="resolveReport()">Mark Resolved</button>
		{% endif %}
		<button class="btn btn-outline-danger" onclick="deleteReport()">Delete</button>
		{% endif %}
	</div>
</div>
{% endblock %}

{% block scripts %}
<script>
var reportUrl = '/api/bug_reports/' + document.getElementById('report').getAttribute('data-report-id');
if (window.Live) Live.refreshPage('bug_reports', document.getElementById('report').getAttribute('data-report-id'));

function resolveReport() {
	api.action(reportUrl + '/resolve', { resolution: document.getElementById('resolution').value.trim() })
		.then(function () { location.reload(); }).catch(function () {});
}

function deleteReport() {
	if (!confirm('Delete this bug report?')) return;
	api.action(reportUrl + '/delete').then(function () { window.location.href = '/bug_reports'; }).catch(function () {});
}
</script>
{% endblock %}