<div class="yarpp-widget-settings-switch">
	<div class="yarpp-widget-basic-settings" style="display: block;">
		<p class="yarpp-widget-text-control">
			<label for="<?php echo $this->get_field_id( 'heading' ); ?>">
				<?php _e( 'Heading:', 'yet-another-related-posts-plugin' ); ?>
				<input
					type="text"
					class="widefat"
					id="<?php echo $this->get_field_id( 'heading' ); ?>"
					name="<?php echo $this->get_field_name( 'heading' ); ?>"
					value="<?php echo esc_attr( $instance['heading'] ); ?>"/>
			</label>
		</p>
		<p class="yarpp-widget-select-control">
			<label for="<?php echo $this->get_field_id( 'template_file' ); ?>">
				<?php _e( 'Template file:', 'yet-another-related-posts-plugin' ); ?>
			</label>
			<select name="<?php echo $this->get_field_name( 'template_file' ); ?>" id="<?php echo $this->get_field_id( 'template_file' ); ?>">
				<?php foreach ( $block_templates as $template_base => $template_name ) : ?>
					<option value='<?php echo esc_attr( $template_base ); ?>' <?php selected( $template_base, $instance['template'] ); ?>>
						<?php echo esc_html( $template_name ); ?>
					</option>
				<?php endforeach; ?>
			</select>
		</p>
		<br/>
	</div>
</div>

<script type="text/javascript">
jQuery(function($) {
	$('.yarpp-widget-select-control','#wpbody').each(ensureTemplateChoice);
	$('.yarpp-widget-select-control select','#wpbody').on('change', ensureTemplateChoice);

	function ensureTemplateChoice(e) {
		if (typeof e === 'object' && 'type' in e) e.stopImmediatePropagation();
		var this_form = $(this).closest('form'),
			widget_id = this_form.find('.widget-id').val();
		// if this widget is just in staging:
		if (/__i__$/.test(widget_id)) return;

		const select = $('#widget-'+widget_id+'-template_file').val();
		const show_heading = select === 'builtin' || select === 'thumbnails';
		$('#widget-'+widget_id+'-heading').closest('p').toggle(show_heading);
	}
});
</script>
