<div class="col-sm-6 col-md-4 col-lg-3">
    <div class="panel panel-{{ panelData.panelType|default:"default" }}">
        <div class="panel-heading">
            <h3 class="panel-title">
                {{ panelData.panelTitle }} <span class="pull-right"><i id="icon-{{ panelData.panelId }}"></i></span>
            </h3>
        </div>

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

    {% if panelData.timezoneName %}
        <script type="text/javascript">
            if((timezoneOptions instanceof Array) === false) {
                var timezoneOptions = [];
            }

            timezoneOptions.push({
                'timezoneName': '{{ panelData.timezoneName }}',
                'timezoneId': '{{ panelData.panelId }}'
            });
        </script>
    {% endif %}
</div>
