{% extends "master.html" %}
{% load static i18n app_utils martortags %}

{% block extrastyle %}
    <link href="{% static 'plugins/css/highlight.min.css' %}" rel="stylesheet" />
    <link href="{% static 'martor/css/martor.bootstrap.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block extrajs %}
    <script src="{% static 'plugins/js/highlight.min.js' %}"></script>
    <script>
        // Apply syntax highlighting to code blocks
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.martor-preview pre code').forEach(function(block) {
                hljs.highlightBlock(block);
            });
        });
    </script>
{% endblock %}

{% block content %}
    <div class="container">

        <div class="row">
            <div class="offset-md-1 col-10">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">{{ game.name }}</h5>
                        <p class="card-subtitle mb-2 text-body-secondary">{% translate "Duration" %}: {{ game.duration }}</p>
                        <p class="card-text {% if game.status == 'draft' %}text-danger{% elif game.status == 'ready' %}text-warning{% elif game.status == 'ongoing' %}text-success{% elif game.status == 'done' %}text-error{% endif %}">{{ game.get_status_display }}</p>
                    </div>
                    <div class="card-body martor-preview">
                        <p class="card-text">{{ game.description|safe_markdown }}</p>
                    </div>
                    <div class="card-body">
                        <p class="card-text"><strong>{% translate "Level" %}</strong>: {{ game.get_level_display }}</p>
                    </div>
                    <div class="card-footer">
                        {% icon_action 'list' %}
                        {% icon_action 'update' game.pk %}
                        {% icon_action 'delete' game.pk %}
                        {% icon_action 'bulk_create_qr' game.pk %}
                        {% if play %}
                        {% icon_action 'play' play.pk %}
                        {% else %}
                        {% icon_action 'create_play' game.pk %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

    </div>

{% endblock %}