{% extends 'portal/base.html' %}
{% load static %}
{% load pipeline %}

{% block head %}
<link rel="manifest" href="{% static "manifest.json" %}">
  {% include 'game/crowdin.html' %}
{% endblock head %}

{% block css %}
{% stylesheet 'game-scss' %}
<link href="{% static 'popup.css' %}" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
{% endblock css %}

{% block title %}Code for Life - Rapid Router{% endblock %}

{% block topBar %}
{% endblock topBar %}

{% block subNav %}
{% endblock subNav %}

{% block contentWrapper %}
    <section role='main'>
    <div class='clearfix container'>
        <div class='main'>
            <div class='row'>
                <div class='small-12 columns'>
                    {% block content %}
                      <div id="myModal" class="modal-overlay">
                        <div class="ocargo-modal">
                          <div id="modal-content">
                            <h2 id="myModal-title" class="ocargo-modal-title"></h2>
                            <div id="myModal-lead" class="ocargo-modal-lead"></div>
                            <div id="myModal-mainText" class="ocargo-modal-mainText"></div>
                            <div id="modal-buttons">
                              <button class="navigation_button long_button" onclick="document.getElementById('close-modal').click()">
                                <span>Close</span>
                              </button>
                            </div>
                            <a class="close-reveal-modal" id="close-modal" href="#">&#215;</a>
                          </div>
                          <div id="modal-mascot">
                            {# FUTURE: add external branding option #}
                            <object width="100%" height="100%" data="{% static "game/image/characters/front_view/Dee.svg" %}" type="image/svg+xml"></object>
                          </div>
                        </div>
                      </div>
                    {% endblock content %}
                </div>
            </div>
        </div>
    </div>
    </section>
{% endblock contentWrapper %}

{% block footer %}
{% endblock footer %}

{% block scripts %}
    <script type='text/javascript' src="{% static 'game/js/svginnerhtml.js' %}"></script>
    <script type='text/javascript' src='{% static 'game/js/foundation/vendor/js.cookie.min.js' %}'></script>
    <script type='text/javascript' src='{% static 'game/js/handlebars.runtime-v4.7.7.js' %}'></script>
    <script type='text/javascript' src='{% static 'game/js/templates.js' %}'></script>
    <script type='text/javascript' src='{% static 'game/js/button.js' %}'></script>
    <script type='text/javascript' src='{% url 'js-reverse' %}'></script>
    <script type='text/javascript' src='{% url 'rapid-router/javascript-catalog' %}'></script>
{% endblock %}
