{{#each (reverse timezones) ~}}
<div class="{{CSS_PREFIX}}timegrid-timezone-label-container" style="{{#if hidden}}display:none;{{/if}}background-color: {{backgroundColor}}; height: 100%; width: {{width}}%; left: {{left}}%; font-size: {{@root.styles.leftFontSize}}; border-right: {{@root.styles.leftBorderRight}};">
    <div title="{{tooltip}}" class="{{CSS_PREFIX}}timegrid-timezone-label-cell" data-timezone="{{displayLabel}}" style="height: 100%; width: 100%;">
        {{#if (and isPrimary @root.showTimezoneCollapseButton)}}
            <div class="{{CSS_PREFIX}}timegrid-timezone-close-btn" style="border: 1px solid #ddd; top:2px; bottom: 2px; width: 10px; border-left: none;">
                <span style="color: #777; height: calc({{@root.styles.displayTimezoneLabelHeight}} - 6px); line-height: calc({{@root.styles.displayTimezoneLabelHeight}} - 6px);">
                    <span class="{{CSS_PREFIX}}icon {{#if @root.timezonesCollapsed}}{{CSS_PREFIX}}ic-arrow-right{{else}}{{CSS_PREFIX}}ic-arrow-left{{/if}}"></span>
                </span>
            </div>
        {{/if}}
        <div class="{{CSS_PREFIX}}timegrid-timezone-label">{{{timezoneDisplayLabel-tmpl timezoneOffset displayLabel}}}</div>
    </div>
</div>
{{/each ~}}