<!-- /* from timezone_option.html */ -->
<div class="iz-field">
	<label class="iz-label" for="timezone">{{ L_BOARD_TIMEZONE }}{{ L_COLON }}</label>

	{% if timezone_date %}
		<div id="tz_select_date" class="iz-field" hidden>
			<label class="iz-label iz-visually-hidden" for="tz_date">{{ L_SELECT_CURRENT_TIME }}</label>
			<select class="iz-select tz_select" name="tz_date" id="tz_date">
				<option value="">{{ L_SELECT_CURRENT_TIME }}</option>
				{% for timezone_date in timezone_date %}
					<option value="{{ timezone_date.VALUE }}"{% if timezone_date.SELECTED %} selected="selected"{% endif %}>{{ timezone_date.TITLE }}</option>
				{% endfor %}
			</select>
		</div>

		<button
			type="button"
			id="tz_select_date_suggest"
			class="iz-btn iz-btn--ghost iz-btn--sm"
			hidden
			timezone-preselect="{% if S_TZ_PRESELECT %}true{% else %}false{% endif %}"
			data-l-suggestion="{{ L_TIMEZONE_DATE_SUGGESTION }}"
		>
			{{ L_TIMEZONE_DATE_SUGGESTION }}
		</button>

		<div class="iz-space iz-space--xs"></div>
	{% endif %}

	<select class="iz-select tz_select" name="tz" id="timezone">
		<option value="">{{ L_SELECT_TIMEZONE }}</option>
		{% for timezone_select in timezone_select %}
			<optgroup label="{{ timezone_select.LABEL }}" data-tz-value="{{ timezone_select.VALUE }}">
				{% for timezone_options in timezone_options %}
					<option
						title="{{ timezone_select.timezone_options.TITLE }}"
						value="{{ timezone_select.timezone_options.VALUE }}"{% if timezone_select.timezone_options.SELECTED %} selected="selected"{% endif %}
					>
						{{ timezone_select.timezone_options.LABEL }}
					</option>
				{% endfor %}
			</optgroup>
		{% endfor %}
	</select>
</div>
<!-- /* from timezone_option.html */ -->
