Feature Scroller: Featured

{%
	set carousel_options = {
		contained: false,
		controls: true,
		pagination: false,
		show: {
			"980px": 2,
			"1220px": 3,
		}
	}
%}

{% set carousel_options = carousel_options|json_encode %}

<div class="js-feature-scroller feature_scroller">
  <div class="fs-row">
	<div class="fs-cell">
	  <div class="feature_scroller_inner">
		<div class="feature_scroller_header">
		  <h2 class="feature_scroller_title">{{ title }}</h2>
		  {% if not featured %}
			<a class="feature_scroller_link" href="{{ link.url }}">{{ link.title }}</a>
		  {% endif %}
		</div>
		{% if not featured %}
		  <div class="feature_scroller_filter">
				<ul class="button_filter_items">
					{% for item in filters %}
					<li class="button_filter_item">
						<button class="button_filter_link{% if loop.first %} button_filter_link_selected{% endif %}" data-type="{{ item.target }}" type="button">
						<span class="button_filter_link_icon">{{ icon('check') }}</span>
						<span class="button_filter_link_label">{{ item.label }}</span>
						</button>
					</li>
					{% endfor %}
				</ul>
		  </div>
		{% endif %}
		<div class="feature_scroller_items_wrapper">
		  <div class="feature_scroller_items_feature_wrapper">
			<div class="feature_scroller_item feature_scroller_item_with_link">
			  <div class="feature_scroller_item_inner">
				{% if items[0].time %}
				  <time class="feature_scroller_item_time feature_scroller_item_time_lg">
					<span class="feature_scroller_item_time_icon">{{ icon('clock') }}</span>
					<span class="feature_scroller_item_time_label">{{ items[0].time }}</span>
				  </time>
				{% endif %}
				<figure class="feature_scroller_item_figure">
				  {% include '@partial-image' with {
					class: 'feature_scroller_item',
					alt: '',
					image: items[0].image,
					loading: 'lazy',
					sources: [
					  img.classic.sml,
					  img.classic.xsml,
					  img.classic.xxsml
					]
				  } %}
				</figure>
				<div class="feature_scroller_item_body">
				  {% if items[0].time %}
					<time class="feature_scroller_item_time feature_scroller_item_time_sm">
					  <span class="feature_scroller_item_time_icon">{{ icon('clock') }}</span>
					  <span class="feature_scroller_item_time_label">{{ items[0].time }}</span>
					</time>
				  {% endif %}
				  {% if items[0].title %}
					<h3 class="feature_scroller_item_title">
					  <a class="feature_scroller_item_title_label" href="#">{{ items[0].title }}</a>
					</h3>
				  {% endif %}
				  {% if items[0].type %}
				  <div class="feature_scroller_item_types">
					<div class="feature_scroller_item_type">
					  <span class="feature_scroller_item_type_icon">{{ icon(items[0].type.icon) }}</span>
					  <span class="feature_scroller_item_type_label">{{ items[0].type.label }}</span>
					</div>
					{% if items[0].subtype %}
					  <div class="feature_scroller_item_type feature_scroller_item_type_subtype">
						<span class="feature_scroller_item_type_icon">{{ icon(items[0].subtype.icon) }}</span>
						<span class="feature_scroller_item_type_label">{{ items[0].subtype.label }}</span>
					  </div>
					{% endif %}
					{% if items[0].tickets %}
					  <div class="feature_scroller_item_tickets">
						{% include '@partial-link' with {
						  class: 'feature_scroller_item_tickets',
						  title: items[0].tickets.label,
						  url: items[0].tickets.url
						} %}
					  </div>
					{% endif %}
				  </div>
				  {% endif %}
				</div>
			  </div>
			</div>
		  </div>
		  {% if featured %}
			<div class="feature_scroller_feature_inner">
			  <figure class="feature_scroller_feature_figure">
				{% include '@partial-image' with {
				  class: 'feature_scroller_feature',
				  alt: '',
				  image: featured.image,
				  loading: 'lazy',
				  sources: [
					img.classic.med,
					img.classic.sml,
					img.classic.xsml,
					img.classic.xxsml
				  ]
				} %}
			  </figure>
			  <div class="feature_scroller_feature_wrapper">
				<div class="feature_scroller_feature_header">
				  <h3 class="feature_scroller_feature_title">{{ featured.title }}</h3>
				</div>
				{% if featured.description or featured.link %}
				<div class="feature_scroller_feature_body">
				  {% if featured.description %}
				  <span class="feature_scroller_feature_description">{{ featured.description }}</span>
				  {% endif %}
				  {% if featured.link %}
				  <a class="feature_scroller_feature_link" href="{{ featured.link.url }}">
					<span class="feature_scroller_feature_link_label">{{ featured.link.label }}</span>
					<span class="feature_scroller_feature_link_icon">{{ icon('super_arrow_right') }}</span>
				  </a>
				  {% endif %}
				</div>
				{% endif %}
			  </div>
			</div>
		  {% else %}
			<div class="feature_scroller_items_carousel_wrapper">
			  <div class="js-carousel feature_scroller_items" data-carousel-options='{{ carousel_options }}'>
				{% for item in items %}
				  <div class="feature_scroller_item feature_scroller_item_with_link" data-type="{{ item.target }}">
					<div class="feature_scroller_item_inner">
					  {% if item.time %}
						<time class="feature_scroller_item_time feature_scroller_item_time_lg">
						  <span class="feature_scroller_item_time_icon">{{ icon('clock') }}</span>
						  <span class="feature_scroller_item_time_label">{{ item.time }}</span>
						</time>
					  {% endif %}
					  <figure class="feature_scroller_item_figure">
						{% include '@partial-image' with {
						  class: 'feature_scroller_item',
						  alt: '',
						  image: item.image,
						  loading: 'lazy',
						  sources: [
							img.classic.sml,
							img.classic.xsml,
							img.classic.xxsml
						  ]
						} %}
					  </figure>
					  <div class="feature_scroller_item_body">
						{% if item.time %}
						  <time class="feature_scroller_item_time feature_scroller_item_time_sm">
							<span class="feature_scroller_item_time_icon">{{ icon('clock') }}</span>
							<span class="feature_scroller_item_time_label">{{ item.time }}</span>
						  </time>
						{% endif %}
						{% if item.title %}
						  <h3 class="feature_scroller_item_title">
							<a class="feature_scroller_item_title_label" href="#">{{ item.title }}</a>
						  </h3>
						{% endif %}
						{% if item.type %}
						<div class="feature_scroller_item_types">
						  <div class="feature_scroller_item_type">
							<span class="feature_scroller_item_type_icon">{{ icon(item.type.icon) }}</span>
							<span class="feature_scroller_item_type_label">{{ item.type.label }}</span>
						  </div>
						  {% if item.subtype %}
							<div class="feature_scroller_item_type feature_scroller_item_type_subtype">
							  <span class="feature_scroller_item_type_icon">{{ icon(item.subtype.icon) }}</span>
							  <span class="feature_scroller_item_type_label">{{ item.subtype.label }}</span>
							</div>
						  {% endif %}
						  {% if item.tickets %}
							<div class="feature_scroller_item_tickets">
							  {% include '@partial-link' with {
								class: 'feature_scroller_item_tickets',
								title: item.tickets.label,
								url: item.tickets.url
							  } %}
							</div>
						  {% endif %}
						</div>
						{% endif %}
					  </div>
					</div>
				  </div>
				{% endfor %}
			  </div>
			</div>
		  {% endif %}
		</div>
	  </div>
	</div>
  </div>
</div>