<?php

// Exit if accessed directly.

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

?>
<div class="wpforms-builder-provider-connection" data-connection_id="{{ data.connection.id }}">
	<input type="hidden" class="wpforms-builder-provider-connection-id" name="providers[{{ data.provider }}][{{ data.connection.id }}][id]" value="{{ data.connection.id }}">

	<div class="wpforms-builder-provider-connection-title">
		{{ data.connection.name }}
		<button class="wpforms-builder-provider-connection-delete js-wpforms-builder-provider-connection-delete" type="button">
			<i class="fa fa-trash-o"></i>
		</button>
		<input
			type="hidden"
			id="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-name"
			name="providers[{{ data.provider }}][{{ data.connection.id }}][name]"
			value="{{ data.connection.name }}">
	</div>

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

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

			<# _.each( data.accounts, function ( account, account_id ) { #>
				<option value="{{ account_id }}" data-option_id="{{ account['option_id'] }}"
					<# if ( account_id === data.connection.account_id ) { #> selected<# } #>>
					{{ account }}
				</option>
			<# } ); #>
		</select>
	</div>

	<div class="js-wpforms-builder-google-calendar-provider-account-fields wpforms-builder-google-calendar-provider-account-fields<# if ( _.isEmpty( data.connection.account_id ) ) { #> wpforms-hidden<# } #>">

		<!-- Calendar -->
		<div class="wpforms-builder-provider-connection-block wpforms-builder-google-calendar-provider-calendar js-wpforms-builder-google-calendar-provider-connection-calendar-wrapper"></div>

		<div class="js-wpforms-builder-google-calendar-provider-calendar-fields wpforms-builder-google-calendar-provider-calendar-fields<# if ( _.isEmpty( data.connection.calendar_id ) ) { #> wpforms-hidden<# } #>">

			<!-- Event Title -->
			<div class="wpforms-builder-provider-connection-block wpforms-builder-google-calendar-provider-event-title">
				<div class="wpforms-builder-provider-connection-setting">
					<label for="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-event-title"><?php esc_html_e( 'Title', 'wpforms-google-calendar' ); ?><span class="required">*</span></label>
					<input type="text"
						id="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-event-title"
						class="wpforms-required wpforms-smart-tags-enabled"
						data-type="all"
						name="providers[{{ data.provider }}][{{ data.connection.id }}][event_title]"
						value="{{ data.connection.event_title }}"
						placeholder="<?php esc_attr_e( 'Title', 'wpforms-google-calendar' ); ?>">
				</div>
			</div>

			<!-- Event Description -->
			<div class="wpforms-builder-provider-connection-block wpforms-builder-google-calendar-provider-event-description">
				<div class="wpforms-builder-provider-connection-setting">
					<label for="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-event-description"><?php esc_html_e( 'Description', 'wpforms-google-calendar' ); ?></label>
					<textarea
						id="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-event-description"
						class="wpforms-smart-tags-enabled"
						data-type="all"
						name="providers[{{ data.provider }}][{{ data.connection.id }}][event_description]"
						placeholder="<?php esc_attr_e( 'Description', 'wpforms-google-calendar' ); ?>">{{ data.connection.event_description }}</textarea>
				</div>
			</div>

			<!-- Event Location -->
			<div class="wpforms-builder-provider-connection-block wpforms-builder-google-calendar-provider-event-location">
				<div class="wpforms-builder-provider-connection-setting">
					<label for="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-event-location"><?php esc_html_e( 'Location', 'wpforms-google-calendar' ); ?></label>
					<textarea
						id="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-event-location"
						class="wpforms-smart-tags-enabled"
						data-type="all"
						name="providers[{{ data.provider }}][{{ data.connection.id }}][event_location]"
						placeholder="<?php esc_attr_e( 'Location', 'wpforms-google-calendar' ); ?>">{{ data.connection.event_location }}</textarea>
				</div>
			</div>

			<!-- Guests -->
			<div class="wpforms-builder-provider-connection-block wpforms-builder-google-calendar-provider-guests">
				<label for="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-guests"><?php esc_html_e( 'Guests', 'wpforms-google-calendar' ); ?><span class="required">*</span></label>
				<select
					id="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-guests"
					class="js-wpforms-builder-google-calendar-provider-connection-guests wpforms-required wpforms-field-map-select choicesjs-select"
					data-field-map-allowed="email"
					data-field-map-allow-repeated-fields="1"
					data-placeholder="<?php esc_attr_e( '--- Select Email Field ---', 'wpforms-google-calendar' ); ?>"
					name="providers[{{ data.provider }}][{{ data.connection.id }}][guests][]"
					multiple="multiple">
						<# _.each( data.emailFields, function ( field ) { #>
							<option value="{{ field.id }}"
								<# if ( _.contains( data.connection.guests, field.id ) ) { #> selected<# } #>>
								{{ field.label }}
							</option>
						<# } ); #>
				</select>
			</div>

			<!-- Start Date/Time -->
			<div class="wpforms-builder-provider-connection-block wpforms-builder-google-calendar-provider-start-datetime">
				<label for="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-start-datetime"><?php esc_html_e( 'Start Date/Time', 'wpforms-google-calendar' ); ?><span class="required">*</span></label>
				<select
					id="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-start-datetime"
					class="js-wpforms-builder-google-calendar-provider-connection-start-datetime wpforms-required wpforms-field-map-select"
					data-field-map-allowed="date-time"
					data-placeholder="<?php esc_attr_e( '--- Select Date/Time Field ---', 'wpforms-google-calendar' ); ?>"
					name="providers[{{ data.provider }}][{{ data.connection.id }}][start_datetime]">
					<option value="" selected disabled><?php esc_html_e( '--- Select Date/Time Field ---', 'wpforms-google-calendar' ); ?></option>
					<# _.each( data.dateTimeFields, function ( field ) { #>
						<option value="{{ field.id }}"
							<# if ( field.id === data.connection.start_datetime ) { #> selected<# } #>>
							{{ field.label }}
						</option>
					<# } ); #>
				</select>
				<div class="wpforms-alert wpforms-alert-warning wpforms-bottom wpforms-hidden" style="margin-top: 10px;">
					<div class="wpforms-aside-left">
						<p class="wpforms-alert-content"></p>
					</div>
				</div>
			</div>

			<!-- Duration -->
			<div class="wpforms-builder-provider-connection-block wpforms-builder-google-calendar-provider-duration">
				<label for="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-duration"><?php esc_html_e( 'Duration', 'wpforms-google-calendar' ); ?></label>
				<select
					id="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-duration"
					class="js-wpforms-builder-google-calendar-provider-connection-duration"
					name="providers[{{ data.provider }}][{{ data.connection.id }}][duration]">
					<#
					data.connection.duration = data.connection.duration + '';
					_.each( data.durationOptions, function ( label, value ) {
						#>
						<option value="{{ value }}"
							<# if ( value.toString() === data.connection.duration ) { #> selected<# } #>>
							{{ label }}
						</option>
					<# } ); #>
				</select>
			</div>

			<!-- End Date/Time -->
			<# const isUserDefinedDuration = data.connection.duration === 'user_defined'; #>
			<div class="wpforms-builder-provider-connection-block wpforms-builder-google-calendar-provider-end-datetime js-wpforms-builder-google-calendar-provider-end-datetime<# if ( ! isUserDefinedDuration ) { #> wpforms-hidden<# } #>">
				<label for="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-end-datetime"><?php esc_html_e( 'End Date/Time', 'wpforms-google-calendar' ); ?><span class="required">*</span></label>
				<select
					id="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-end-datetime"
					class="js-wpforms-builder-google-calendar-provider-connection-end-datetime wpforms-field-map-select<# if ( isUserDefinedDuration ) { #> wpforms-required<# } #>"
					data-field-map-allowed="date-time"
					data-placeholder="<?php esc_attr_e( '--- Select Date/Time Field ---', 'wpforms-google-calendar' ); ?>"
					name="providers[{{ data.provider }}][{{ data.connection.id }}][end_datetime]">
					<option value="" selected><?php esc_html_e( '--- Select Date/Time Field ---', 'wpforms-google-calendar' ); ?></option>
					<# _.each( data.dateTimeFields, function ( field ) { #>
						<option value="{{ field.id }}"
							<# if ( field.id === data.connection.end_datetime ) { #> selected<# } #>>
							{{ field.label }}
						</option>
					<# } ); #>
				</select>
				<div class="wpforms-alert wpforms-bottom wpforms-hidden" style="margin-top: 10px;">
					<div class="wpforms-aside-left">
						<p class="wpforms-alert-content"></p>
					</div>
				</div>
			</div>

			<!-- Event Repeat -->
			<div class="wpforms-builder-provider-connection-block wpforms-builder-google-calendar-provider-recurrence">
				<label for="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-recurrence"><?php esc_html_e( 'Repeat', 'wpforms-google-calendar' ); ?></label>
				<select
					id="js-wpforms-builder-google-calendar-provider-{{ data.connection.id }}-recurrence"
					class="js-wpforms-builder-google-calendar-provider-connection-recurrence"
					name="providers[{{ data.provider }}][{{ data.connection.id }}][recurrence]">
						<option value="" selected><?php esc_html_e( 'None', 'wpforms-google-calendar' ); ?></option>
						<# _.each( data.recurrenceOptions, function ( label, value ) { #>
							<option value="{{ value }}"
								<# if ( value === data.connection.recurrence ) { #> selected<# } #>>
								{{ label }}
							</option>
						<# } ); #>
				</select>
			</div>

			{{{ data.conditional }}}

			<# const opened = wpCookies.get('wpforms_fields_group_google_calendar_permissions_options' + data.connection.id ) ? 'opened': ''; #>
			<div class="wpforms-builder-provider-connection-block">
				<div class="wpforms-panel-fields-group unfoldable {{opened}}" data-group="google_calendar_permissions_options{{ data.connection.id }}">
					<div class="wpforms-panel-fields-group-border-top"></div>
					<div class="wpforms-panel-fields-group-title"><?php esc_html_e( 'Permissions', 'wpforms-google-calendar' ); ?><i class="fa fa-chevron-circle-right"></i></div>
					<div class="wpforms-panel-fields-group-inner"<# if ( _.isEmpty( opened ) ) { #> style="display: none;" <# } #>>
						<!-- See guest list - Toggle, enabled by default -->
						<div class="wpforms-panel-field wpforms-panel-field-toggle">
							<span class="wpforms-toggle-control">
								<input type="hidden" name="providers[{{ data.provider }}][{{ data.connection.id }}][see_guest_list]" value="0">
								<input type="checkbox" id="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-see-guest-list" name="providers[{{ data.provider }}][{{ data.connection.id }}][see_guest_list]" class="js-wpforms-builder-google-calendar-provider-connection-see-guest-list wpforms-builder-google-calendar-provider-connection-see-guest-list" value="1" <# if ( data.connection.see_guest_list === undefined || data.connection.see_guest_list ) { #>checked<# } #>>
								<label class="wpforms-toggle-control-icon" for="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-see-guest-list"></label>
								<label for="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-see-guest-list" class="wpforms-toggle-control-label"><?php esc_html_e( 'Allow guests to view the guest list', 'wpforms-google-calendar' ); ?></label>
							</span>
						</div>

						<!-- Invite others - Toggle, enabled by default -->
						<div class="wpforms-panel-field wpforms-panel-field-toggle">
							<span class="wpforms-toggle-control">
								<input type="hidden" name="providers[{{ data.provider }}][{{ data.connection.id }}][invite_others]" value="0">
								<input type="checkbox" id="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-invite-others" name="providers[{{ data.provider }}][{{ data.connection.id }}][invite_others]" class="js-wpforms-builder-google-calendar-provider-connection-invite-others wpforms-builder-google-calendar-provider-connection-invite-others" value="1" <# if ( data.connection.invite_others === undefined || data.connection.invite_others ) { #>checked<# } #>>
								<label class="wpforms-toggle-control-icon" for="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-invite-others"></label>
								<label for="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-invite-others" class="wpforms-toggle-control-label"><?php esc_html_e( 'Allow guests to invite others', 'wpforms-google-calendar' ); ?></label>
							</span>
						</div>

						<!-- Modify event - Toggle, disabled by default -->
						<div class="wpforms-panel-field wpforms-panel-field-toggle">
							<span class="wpforms-toggle-control">
								<input type="hidden" name="providers[{{ data.provider }}][{{ data.connection.id }}][modify_event]" value="0">
								<input type="checkbox" id="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-modify-event" name="providers[{{ data.provider }}][{{ data.connection.id }}][modify_event]" class="js-wpforms-builder-google-calendar-provider-connection-modify-event wpforms-builder-google-calendar-provider-connection-modify-event" value="1" <# if ( data.connection.modify_event ) { #>checked<# } #>>
								<label class="wpforms-toggle-control-icon" for="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-modify-event"></label>
								<label for="wpforms-builder-google-calendar-provider-{{ data.connection.id }}-modify-event" class="wpforms-toggle-control-label"><?php esc_html_e( 'Allow guests to modify this event', 'wpforms-google-calendar' ); ?></label>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div></div>
</div>