{% extends "base.html" %}
{% load static %}

{% block head_extra %}
    <script type="text/javascript" src="{% static 'js/webretro/embed/embed.js' %}"></script>
{% endblock %}

{% block title %}{{object.name}}{% endblock %}

{% block content %}
    <a href="{% url "games:game_list" %}">Back to list</a>
    <p>
    <img src={{object.marquee.url}} />
    </p>

    <dl>
        <dt>Released
        <dd>{{object.release_date|date:"Y/m/d"}}</dd>

        <dt>Players</dt>
        <dd>{{object.players}}</dd>

        <dt>Game System</dt>
        <dd>{{object.game_system}}</dd>

        <dt>Genre</dt>
        <dd>{% for genre in object.genre.all %}{{genre}}{% if not forloop.last %}, {% endif %}{% endfor %}</dd>

        <dt>Region</dt>
        <dd>{{object.region}}</dd>
    </dl>

    <p>{{object.description}}</p>

    <p><a href="{{object.rom_file.url}}">Download ROM</a></p>
    <div id="webretro-container" style="width:800px; height:600px"></div>
    <script>webretroEmbed(document.getElementById("webretro-container"), "{% static 'js/webretro/index.html' %}", {system: "{{object.game_system.retropie_slug}}", rom:"{{request.scheme}}://{{request.META.HTTP_HOST}}{{object.rom_file.url}}"});</script>

{% endblock %}