<?php
/**
 * Event card design block.
 *
 * @package EventimUSEventListings
 */

defined( 'ABSPATH' ) || exit;
?>
<div class="dashboard-module">
	<div class="module-header">
		<h1><?php esc_html_e( 'Event Card Design', 'eventim-us-event-listings' ); ?></h1>
	</div>
	<div class="module-content">
		<div class="form-grid">
			<div class="form-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Load material design related resources? (CSS,JS)', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-field">
					<input type="radio" id="radio-load-material-design-resources-on"
						name="evusel_settings[load_material_design_resources]" value="on"
						<?php echo $evuselConfig->get( 'load_material_design_resources' ) === 'on' ? 'checked' : ''; ?>>
					<label for="radio-load-material-design-resources-on">
					<?php
					echo esc_html(
						$suggestDisabingMaterialResources
							? __( 'Yes (Not Recommended)', 'eventim-us-event-listings' )
							: __( 'Yes (Recommended)', 'eventim-us-event-listings' )
					);
					?>
					</label>
					<input type="radio" id="radio-load-material-design-resources-off"
						name="evusel_settings[load_material_design_resources]" value="off"
						<?php echo $evuselConfig->get( 'load_material_design_resources' ) === 'off' ? 'checked' : ''; ?>>
					<label for="radio-load-material-design-resources-off">
						<?php
						echo esc_html(
							$suggestDisabingMaterialResources
							? __( 'No (Recommended, Material Design plugin detected)', 'eventim-us-event-listings' )
							: __( 'No', 'eventim-us-event-listings' )
						);
						?>
					</label>
				</div>
			</div>
			<div class="form-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Event card design', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-field social-radio-field"> 
					<input type="radio" id="radio-material-list-style-outlined" name="evusel_settings[shortcodes][calendar_view][material_list_style]" value="outlined" <?php echo $evuselConfig->get( 'shortcodes.calendar_view.material_list_style' ) === 'outlined' ? 'checked' : ''; ?>>
					<input type="hidden" id="hidden-material-list-style-outlined-list" name="evusel_settings[shortcodes][list_view][material_list_style]" value="outlined" <?php echo $evuselConfig->get( 'shortcodes.list_view.material_list_style' ) === 'outlined' ? 'data-checked=\"true\"' : ''; ?>>
					<label for="radio-material-list-style-outlined">
						<?php esc_html_e( 'Outlined', 'eventim-us-event-listings' ); ?>
					</label>
					<input type="radio" id="radio-material-list-style-elevated" name="evusel_settings[shortcodes][calendar_view][material_list_style]" value="elevated" <?php echo $evuselConfig->get( 'shortcodes.calendar_view.material_list_style' ) === 'elevated' ? 'checked' : ''; ?>>
					<input type="hidden" id="hidden-material-list-style-elevated-list" name="evusel_settings[shortcodes][list_view][material_list_style]" value="elevated" <?php echo $evuselConfig->get( 'shortcodes.list_view.material_list_style' ) === 'elevated' ? 'data-checked=\"true\"' : ''; ?>>
					<label for="radio-material-list-style-elevated">
						<?php esc_html_e( 'Elevated', 'eventim-us-event-listings' ); ?>
					</label>
				</div>
			</div>
		</div>
	</div>
</div>
