<?php
/**
 * View All Templates modal content.
 *
 * This template is used for rendering the view all templates modal content
 * and is injected into the DOM via JS. The JS backbone template is used to render loop iterations.
 *
 * @since 1.0.0
 */

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

<script type="text/html" id="tmpl-wpforms-pdf-view-all-templates-modal">
	<div class="wpforms-pdf-view-all-templates-modal-content wpforms-modal-content">
		<div class="wpforms-pdf-view-all-templates-modal-category-grid">
			<# _.each( data.templatesByCategories, function( category, categoryKey ) { #>
				<# _.each( category.templates, function( template, key ) { #>
					<div class="wpforms-template-single">
					<#
					if ( _.isEmpty( template ) ) {
					#>
						<div class="wpforms-category-title"></div>
						<div class="wpforms-card-image">
							<div class="wpforms-card-image-placeholder"></div>
						</div>
					<#
					} else {
						const style = 'background-image: url( "' + data.backgroundUrlPath + template.slug + '.webp?v=' + data.version + '" )';
					#>
						<div class="wpforms-category-title">
							<# if ( key === 0 ) { #>
							<h2>{{ category.categoryLocalized.title_plural }}</h2>
							<# } #>
						</div>
						<div class="wpforms-card-image">
							<div class="wpforms-card-image-preview" style="{{ style }}"></div>
							<input type="radio"
								name="wpforms-pdf-view-all-templates-modal-choice"
								id="wpforms-pdf-view-all-templates-modal-choice-{{ template.slug }}"
								value="{{ template.slug }}"
								data-category="{{ category.category }}"
								data-pdf-id="{{ data.pdfId }}"
								<# if ( template.slug === data.selectedCategory ) { #> checked="checked"<# } #>
								/>
							<label for="wpforms-pdf-view-all-templates-modal-choice-{{ template.slug }}" class="option-{{ key }}">
								{{ template.title }}
								<span class="wpforms-card-image-overlay"></span>
							</label>
						</div>
					<#
					}
					#>

					</div>
				<# } ); #>
			<# } ); #>
		</div>
		<div class="wpforms-pdf-view-all-templates-modal-footer">
			<?php
				$contact_link = esc_url( wpforms_utm_link( 'https://wpforms.com/contact/', 'Builder Settings', 'New Template suggestion - PDF Addon' ) );

				echo wp_kses_post(
					sprintf(
						/* translators: %1$s: Link to contact page, %2$s: Closing link tag. */
						__( 'Have a suggestion for a new template? %1$sWe\'d love to hear it!%2$s', 'wpforms-pdf' ),
						'<a href="' . $contact_link . '" target="_blank">',
						'</a>'
					)
				);
			?>
		</div>
	</div>
</script>