<?php
/**
 * Categories filter block.
 *
 * @package EventimUSEventListings
 */

defined( 'ABSPATH' ) || exit;
?>
<div class="dashboard-module">
	<div class="module-header">
		<h1><?php esc_html_e( 'Categories', 'eventim-us-event-listings' ); ?></h1>
	</div>
	<div class="module-content">
		<?php
		$evusel_categoryListType          = $evuselConfig->get( 'shortcodes.tag_filter.view_type' );
		$evusel_categoryShortcodeListType = $evusel_categoryListType === 'l' ? 'list' : 'grid';
		?>

		<div class="settings-form">
			<div class="form-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Shortcode for Grid view', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-input">
					<div class="input-with-button">
						<input class="shortcode-info-input regular-text" id="category-filter-shortcode-input-grid"
							type="text"
							value="[<?php echo esc_attr( $evuselConfig::SHORTCODE_CATEGORY_FILTER . " categories='" . implode( ',', $selectedCategories ) . "' type=grid" ); ?>]">
						<button type="button" class="see-menu-item dispevli-menu-item-active copy-shortcode"
							onclick="copyShortcode(this)">
							<?php esc_html_e( 'Copy', 'eventim-us-event-listings' ); ?>
						</button>
					</div>
				</div>
			</div>

			<div class="form-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Shortcode for List view', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-input">
					<div class="input-with-button">
						<input class="shortcode-info-input regular-text" id="category-filter-shortcode-input-list"
							type="text"
							value="[<?php echo esc_attr( $evuselConfig::SHORTCODE_CATEGORY_FILTER . " categories='" . implode( ',', $selectedCategories ) . "' type=list" ); ?>]">
						<button type="button" class="see-menu-item dispevli-menu-item-active copy-shortcode"
							onclick="copyShortcode(this)">
							<?php esc_html_e( 'Copy', 'eventim-us-event-listings' ); ?>
						</button>
					</div>
				</div>
			</div>

			<div class="form-row">
				<div class="form-label">
					<label><?php esc_html_e( 'WordPress Categories', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-input">
					<div class="radio-options connected-radio-options"
						style="max-height: 150px; overflow-y: auto;  border-radius: 2px; width: 100%;">
						<?php foreach ( $categories as $evusel_category ) : ?>
							<div class="radio-option">
								<input type="checkbox" id="category-<?php echo esc_attr( $evusel_category->slug ); ?>"
									name="evusel_settings[shortcodes][category_filter][selected_categories][]"
									value="<?php echo esc_attr( $evusel_category->slug ); ?>" <?php echo in_array( $evusel_category->slug, $selectedCategories ) ? 'checked' : ''; ?>>
								<label for="category-<?php echo esc_attr( $evusel_category->slug ); ?>">
									<?php echo esc_html( $evusel_category->name ); ?>
								</label>
							</div>
						<?php endforeach; ?>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>