{% extends "base.html" %}

{% load crispy_forms_tags %}

{% block content %}
<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">Log a QSO!</div>
			<div class="panel-body">
				<style scoped>
					#id_call {
						text-transform: uppercase;
					}
					#id_reportRX, #id_reportTX {
						width: 50px;
					}
					#id_ownNo, #id_otherNo {
						width: 75px;
					}
					#id_refStr {
						width: 100px;
					}
					#id_call {
						width: 100px;
					}
				</style>

					{% crispy form %}

			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">Your QSO log</div>
			<div class="panel-body">
				<table class="table">
					<thead>
						<tr>
							<th>Nr-S</th>
							<th>Band</th>
							<th>UTC</th>
							<th>Call</th>
							<th>RST-S</th>
							<th>RST-R</th>
							<th>Nr-R</th>
							<th>EXC</th>
							<th>Remarks</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
				{% for qso in qsos %}
					<tr>
						<td>{{ qso.ownNo }}</td>
						<td>{{ qso.band }}</td>
						<td>{{ qso.time|date:"H:i" }}</td>
						<td>{{ qso.call }}</td>
						<td>{{ qso.reportTX }}</td>
						<td>{{ qso.reportRX }}</td>
						<td>{{ qso.otherNo }}</td>
						<td>{{ qso.refStr }}</td>
						<td>{{ qso.remarks }}</td>
						<td><a href="{% url "contest:logEdit" qso.id %}">Edit</a> <a href="{% url "contest:logDelete" qso.id %}">Delete</a></td>
					</tr>
				{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
	// set focus to fucking call field
	// ...i hate javascript so much.
	$('#id_call').focus();
});
</script>

{% endblock %}