<?php

// Exit if accessed directly.

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

?>

<label for="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-calendar"><?php esc_html_e( 'Calendar', 'wpforms-google-calendar' ); ?><span class="required">*</span></label>

<select id="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-calendar" class="js-wpforms-builder-google-calendar-provider-connection-calendar wpforms-required" name="providers[{{ data.provider }}][{{ data.connection.id }}][calendar_id]"<# if ( _.isEmpty( data.calendars ) ) { #> disabled<# } #>>
	<option value="" selected disabled><?php esc_html_e( '--- Select Calendar ---', 'wpforms-google-calendar' ); ?></option>

	<# _.each( data.calendars, function ( calendar, calendar_id ) { #>
		<option value="{{ calendar_id }}" data-timezone="{{ calendar.timezone }}"
			<# if ( calendar_id === data.connection.calendar_id ) { #> selected<# } #>>
			{{ calendar.name }}
		</option>
	<# } ); #>
</select>
<p class="description js-wpforms-builder-google-calendar-provider-connection-calendar-description<# if ( ! data.calendars || ! data.calendars[data.connection.calendar_id] ) { #> wpforms-hidden<# } #>"><?php esc_html_e( 'Calendar time is', 'wpforms-google-calendar' ); ?>
	<span class="js-wpforms-builder-google-calendar-provider-connection-calendar-datetime-preview"></span>
</p>