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

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

{% block extrajs %}
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"></script>
    <script src="{% static 'plugins/js/ace.js' %}"></script>
    <script src="{% static 'plugins/js/mode-markdown.js' %}"></script>
    <script src="{% static 'plugins/js/ext-language_tools.js' %}"></script>
    <script src="{% static 'plugins/js/theme-github.js' %}"></script>
    <script src="{% static 'plugins/js/highlight.min.js' %}"></script>
    <script src="{% static 'plugins/js/emojis.min.js' %}"></script>
    <script src="{% static 'martor/js/martor.bootstrap.min.js' %}"></script>
    <script>
        function setDefaultValues() {
            if ($('#bulk_form').length > 0) {
                $('#id_num_questions').val(5);
                $('#id_question_prefix').val('{% translate "Question" %}');
                $('#id_num_answers_per_question').val(3);
                $('#id_answer_prefix').val('{% translate "Answer" %}');
                $('#id_num_questions, #id_question_prefix, #id_num_answers_per_question, #id_answer_prefix').trigger('input');
            }
        }
    </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">
                            {% if object %}
                            {% translate "You are about to edit this game" %}: {{ game.name }}
                            {% elif game %}
                            {% translate "You are about to add content to this game" %}: {{ game.name }}
                            {% else %}
                            {% translate "You are about to add a new game" %}
                            {% endif %}
                        </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">
                        <div class="container">
                            {% crispy form %}
                        </div>
                    </div>
                    <div class="card-footer">
                        {% icon_action 'list' %}
                        {% if game %}
                        {% icon_action 'detail' game.pk %}
                        {% endif %}
                        {% if not object and game %}
                        {% icon_action 'update' game.pk %}
                        {% endif %}
                        {% if game %}
                        {% icon_action 'delete' game.pk %}
                        {% endif %}
                        {% if object %}
                        {% icon_action 'bulk_create_qr' game.pk %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

    </div>

{% endblock %}