{% load i18n %}

<div class="col-sm-6 col-md-4 col-lg-3">
    <div class="panel panel-{{ timezone.panelType|default:'default' }}">
        <div class="panel-heading">
            <div class="panel-title">
                {{ timezone.panel_name }} <span class="pull-right"><i id="icon-{{ timezone.timezone.panel_id }}"></i></span>
            </div>
        </div>

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

    {% if timezone.timezone.timezone_name %}
        <script type="application/javascript">
            if((aaTimezonesPanels instanceof Array) === false) {
                var aaTimezonesPanels = [];
            }

            aaTimezonesPanels.push({
                'timezoneName': '{{ timezone.timezone.timezone_name }}',
                'timezoneId': '{{ timezone.timezone.panel_id }}'
            });
        </script>
    {% endif %}
</div>
