<?php
/**
 * Template for rendering a basic search form widget.
 *
 * @since 1.0
 */
if ( ! defined('ABSPATH') ) {
	exit;
} ?>

<div class="mylisting-basic-form text-center" :class="tabMode==='dark'?'featured-light':tabMode"
	data-listing-types="<?php echo esc_attr( wp_json_encode( $types_config ) ) ?>"
	data-config="<?php echo esc_attr( wp_json_encode( $config ) ) ?>"
	v-cloak>
	<div class="featured-search wide">
		<div class="fs-tabs">
			<ul class="nav nav-tabs cts-carousel" role="tablist">
				<li v-for="listingType, key in types" role="presentation" :class="activeType.id===listingType.id?'active':''">
					<a role="tab" @click="activeType=listingType">
						<i :class="listingType.icon"></i>
						{{ listingType.name }}
					</a>
				</li>
				<li class="cts-prev">prev</li>
				<li class="cts-next">next</li>
			</ul>

			<div class="tab-content" :class="boxShadow?'add-box-shadow':''">
				<?php foreach ( $types as $key => $type ):
					$filters = $type->get_basic_filters(); ?>
					<div role="tabpanel" class="tab-pane fade in filter-count-<?php echo count($filters)+1 ?>"
						:class="activeType.id===<?php echo $type->get_id() ?>?'active':''">

						<form method="GET">
							<?php foreach ( $filters as $filter ): ?>
								<?php mylisting_locate_template( sprintf( 'templates/explore/filters/%s.php', $filter->get_type() ), [
									'filter' => $filter,
									'location' => 'basic-form',
									'onchange' => 'filterChanged',
								] ) ?>
							<?php endforeach ?>

							<div class="form-group">
								<button class="buttons button-2 search" @click.prevent="submit">
									<i class="material-icons">search</i>
									<?php _e( 'Search', 'my-listing' ) ?>
								</button>
							</div>
						</form>
					</div>
				<?php endforeach ?>
			</div>
		</div>
	</div>
</div>
