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

{% load i18n %}
{% 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">
                        <div class="panel-title">
                            {% trans "Local Time" %} <span class="pull-right"><i id="icon-local-time"></i></span>
                        </div>
                    </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">
                        <div class="panel-title">
                            {% trans "EVE Time" %} <span class="pull-right"><i id="icon-eve-time"></i></span>
                        </div>
                    </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(!(aaTimezonesPanels instanceof Array)) {
                        var aaTimezonesPanels = [];
                    }

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

            {% if timezones %}
                {% for timezone in timezones %}
                    <!-- // {{ timezone.panel_name }} -->
                    {% include "timezones/timezone-panel.html" %}
                {% endfor %}
            {% endif %}
        </div>

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

        <!-- share options with JS part -->
        <script type="application/javascript">
            let aaTimezonesOptions = {
                base_url: '{% url "timezones:index" %}',
            }

            let aaTimezonesTranslations = {
                days: '{% trans "Days" %}',
                alreadyOver: '{% trans "Already over, you missed it!" %}'
            };

            // check if we have a ts hash or a real url
            let timestamp = window.location.hash;

            {% if timestamp %}
                timestamp = '#{{ timestamp }}';
            {% endif %}

            let aaTimezonesAdjustOptions = {
                timestamp: timestamp
            }
        </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 %}
