{% extends "layout.jinja2" %}

{% block content %}
    <div class="container container-table">
        <div class="row vertical-center-row">
            <ul class="nav nav-tabs">
                <li role="presentation" {% if tab == 1 %}class="active"{% endif %}>
                    <a {% if tab != 1 %}href="{{ request.route_path('countdown') }}"{% endif %}>European Session</a>
                </li>
                <li role="presentation" {% if tab == 2 %}class="active"{% endif %}>
                    <a {% if tab != 2 %}href="{{ request.route_path('countdown_pacific') }}"{% endif %}>Pacific
                        Session</a>
                </li>
            </ul>
            <div class="next-session-info jumbotron semi-transparent">
                <h1 id="session-pending" class="hidden">Session pending. Hop on!</h1>
                {% if session_date_london is defined %}
                    <h1 id="next-session">
                        Next session will be on<br>
                        {{ session_day }}, {{ session_date_london.strftime('%Y-%m-%d %H:%M') }}
                        {% if tab == 1 %}UK{% else %}Sydney{% endif %}
                    </h1>
                {% else %}
                    <h1 class="no-session">
                        Oops! It looks like no session is planned at the moment.
                    </h1>
                {% endif %}
                <p class="countdown hidden">
                    <span class="font-semi-bold font-italic">That is in<br><span id="countdown"></span></span>
                </p>
            </div>
        </div>
    </div>
    <footer class="footer text-center">
        <div class="footer-box">
            <div><a href="http://republicoffolk.org/forum/" target="_blank">
                {% include 'patrials/logo_svg.jinja2' %}
            </a></div>
            <div><span class="copyright">copyright Boberro 1984-2017</span></div>
        </div>
    </footer>
{% endblock %}

{% block head_js %}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js"></script>
{% endblock %}

{% block end_js %}
    {% if session_date is defined %}
        <div id="time-data" style="display: none;"
             data-session-time-utc="{{ session_date.strftime('%Y-%m-%d %H:%M:%SZ') }}"
                {% if previous_session_date is defined %}
             data-previous-session-time-utc="{{ previous_session_date.strftime('%Y-%m-%d %H:%M:%SZ') }}"
                {% endif %}>

        </div>
        <script type="text/javascript"
                src="{{ request.static_path('rof_countdown:static/countdown-view.js') }}"></script>
    {% endif %}
{% endblock %}

{% block head_css %}
    {% if background_src is defined %}
        <style>
            body {
                background: url('{{ background_src }}') center;
                background-size: cover;
            }
        </style>
    {% endif %}
{% endblock %}

{% block head_meta %}
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://server.republicoffolk.org:1984/">
    {% if session_date_london is defined %}
        <meta property="og:title"
              content="{{ session_day }}, {{ session_date_london.strftime('%Y-%m-%d %H:%M') }} {% if tab == 1 %}UK{% else %}Sydney{% endif %}">
    {% else %}
        <meta property="og:title"
              content="No session planned at this moment :(">
    {% endif %}
    <meta property="og:description" content="">
    <meta property="og:site_name" content="Next RoF {% if tab == 2 %}Pacific {% endif %}session">
    <meta property="og:locale" content="en_GB">
    <meta property="og:image" content="http://server.republicoffolk.org:1984/static/rof.png">
    {#    <meta property="og:image:width" content="96">#}
    {#    <meta property="og:image:height" content="64">#}
    <!-- End Open Graph -->
{% endblock %}