{% extends "main.html" %}
{% load i18n %}
{% load staticfiles %}

{% block title %}{% trans "Fight " %} {{ fight.id }}{% endblock %}

{% block content %}
<h2>{% trans "Fight "%} {{ fight.id }}</h2>

<ul>
  <li>x: <a href="{{ fight.x.get_absolute_url }}">{{ fight.x }}</a></li>
  <li>o: <a href="{{ fight.o.get_absolute_url }}">{{ fight.o }}</a></li>
  <li>{% trans "Result" %}: x {{ fight.get_result_display }}</li>
  <li>Created: {{ fight.created|date:"Y-m-d H:i:s" }}</li>
{% if fight.error %}
  <li>Error: {{ fight.error }}</li>
{% endif %}
</ul>

<div>
<div class="board-wrapper">
  <div class="board_here"></div>
  <button class="btn btn-sm btn-default" id="reset">&lt;&lt;</button>
  <button class="btn btn-sm btn-default" id="backward">&lt;</button>
  <button class="btn btn-sm btn-default" id="forward">&gt;</button>
  <button class="btn btn-sm btn-default" id="fastforward">&gt;&gt;</button>
</div>
<div class="status_here"></div>
<div style="clear: both"></div>
</div>

{% endblock content %}

{% block end_head %}
{{ block.super }}
<link rel="stylesheet" href="{% static "css/board.css" %}">
{% endblock %}


{% block end_body %}
{{ block.super }}
<script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
<script type="text/javascript" src="{% static "js/fight.js" %}"></script>
<script type="text/javascript">
    var gameplay = {{ fight.gameplay }};
    var error = "{{ fight.error|escapejs }}";
    var board = new Board(gameplay, error, $(".board_here"), $(".status_here"));
    $("#reset").click(board.board_reset.bind(board));
    $("#forward").click(board.forward.bind(board));
    $("#backward").click(board.backward.bind(board));
    $("#fastforward").click(board.fastforward.bind(board));
</script>
</script>

{% endblock %}
