{% extends 'timezones/base.html' %}

{% load i18n %}
{% load humanize %}
{% load static %}

{% block details %}

<div class="aa-timezones">
    <div class="row">
        <!-- // Local Time -->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        {% trans "Local Time" %} <span class="pull-right"><i id="icon-local-time"></i></span>
                    </h3>
                </div>

                <div class="panel-body text-center timezone-panel">
                    <b id="time-local-time" class="timezone-panel-section timezone-panel-section-time">--:--:--</b>
                    <span id="date-local-time" class="timezone-panel-section timezone-panel-section-date">({% trans "loading" %})</span>
                    <span id="utc-offset-local-time" class="timezone-panel-section timezone-panel-section-utc-offset"></span>
                </div>
            </div>
        </div>

        <!-- // EVE Time -->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        {% trans "EVE Time" %} <span class="pull-right"><i id="icon-eve-time"></i></span>
                    </h3>
                </div>

                <div class="panel-body text-center timezone-panel">
                    <b id="time-eve-time" class="timezone-panel-section timezone-panel-section-time">--:--:--</b>
                    <span id="date-eve-time" class="timezone-panel-section timezone-panel-section-date">({% trans "loading" %})</span>
                    <span id="utc-offset-eve-time" class="timezone-panel-section timezone-panel-section-utc-offset"></span>
                </div>
            </div>

            <script type="application/javascript">
                if((timezoneOptions instanceof Array) === false) {
                    var timezoneOptions = [];
                }

                timezoneOptions.push({
                    'timezoneName': 'Etc/UTC',
                    'timezoneId': 'eve-time'
                });
            </script>
        </div>

        {% for panelData in timezonePanelData %}
            <!-- // {{ panelData.timezoneName }} -->
            {% include "timezones/timezone-panel.html" with type="panelData" %}
        {% endfor %}
    </div>

    {% include 'timezones/time-until.html' %}
    {% include 'timezones/adjust-time.html' %}

    <!-- share translations with JS part -->
    <script type="application/javascript">
        var aaTimezonesTranslations = {
            days: '{% trans "Days" %}',
            alreadyOver: '{% trans "Already over, you missed it!" %}'
        };
    </script>
</div>
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/moment-js.html' with locale=True %}

    <script type="application/javascript" src="{% static 'timezones/js/timeago/jquery.timeago.min.js' %}"></script>
    <script type="application/javascript" src="{% static 'timezones/js/moment/moment-timezone-with-data-1970-2030.min.js' %}"></script>
    <script type="application/javascript" src="{% static 'timezones/js/timezones.min.js' %}"></script>
{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'timezones/css/weather-icons/css/weather-icons.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'timezones/css/timezones.min.css' %}" type="text/css">
{% endblock %}

{% block extra_script %}
{% endblock %}
