{% extends 'base.html' %}

{% block pagetitle %}
    Pagina principale
{% endblock %}

{% block prehead %}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
{% endblock %}

{% block posthead %}
    <script>
        function timer() {
            let now = new Date().getTime();
            let to = new Date("Oct 31, 2018 15:30:00").getTime();
            let result = to - now;
            document.getElementById("time-left").innerHTML = Math.floor(String((result / 3600000))) + "h "
                                                           + Math.floor(String((result / 60000) % 60)) + "m "
                                                           + Math.floor(String((result / 1000) % 60)) + "s";
        }

        setInterval(timer, 100);
    </script>
{% endblock %}

{% block body %}
    <h1 id="main-title">
        Royal Games
    </h1>
    <div class="main-page">
        {% if g.event_started %}
            <div class="halloween">
                <div class="box">
                    <div class="upper-box">
                        owlcaptain.tk
                    </div>
                    <div class="lower-box">
                        Lune raccolte:
                        <div class="mysterystatus">
                            {% for index, star in halloween %}
                                {% if star %}
                                    <i class="fas fa-moon done"></i>
                                {% else %}
                                    <i class="far fa-moon todo"></i>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <br>
                        Tempo rimanente:
                        <div id="time-left" class="time-left">
                            Loading...
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="left">
            <div class="box">
                <div class="upper-box">
                    Prossimi eventi
                </div>
                <div class="lower-box">
                    {% for event in next_events %}
                        {% include "/components/event.html" %}
                    {% endfor %}
                </div>
            </div>
            {% include "components/wikibox.html" %}
            <div class="box">
                <div class="upper-box">
                    Citazione casuale dal diario
                </div>
                <div class="lower-box">
                    {% include "components/diarioentry.html" %}
                    <a href="/diario">Visualizza tutto</a>
                </div>
            </div>

        </div>
        <div class="right">
            <div class="box">
                <div class="upper-box">
                    Membri
                </div>
                <div class="lower-box">
                    <ul>
                        {% for royal in royals %}
                            <li><a href="/profile/{{ royal.username }}">{{ royal.username }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="box">
                <div class="upper-box">
                    Resoconti
                </div>
                <div class="lower-box">
                    <ul>
                        <li><a href="/game/ryg">Royal Games</a></li>
                        {% if g.css == "spoopy.less" %}
                            <li><a href="/game/halloween">Halloween</a></li>
                        {% endif %}
                        <li><a href="/game/tg">Telegram</a></li>
                        <li><a href="/game/discord">Discord</a></li>
                        <li><a href="/game/steam">Steam</a></li>
                        <li><a href="/game/dota">Dota 2</a></li>
                        <!--li><a href="/game/rl">Rocket League</a></li-->
                        <li><a href="/game/lol">League of Legends</a></li>
                        <li><a href="/game/ow">Overwatch</a></li>
                        <li><a href="/game/osu">osu!</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}