<!-- Filter -->
<div class="filter">
<div class="filter_inner">
<div class="filter_panels">
<form class="filter_tools" action="#" method="get">
<fieldset class="filter_fieldset">
<legend class="filter_legend">Programs</legend>
<div class="filter_options">
<div class="filter_option js-swap" type="radio" id="All" name="Programs" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="All">All</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option js-swap" type="radio" id="FIM Presents" name="Programs" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="FIM Presents">FIM Presents</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option js-swap" type="radio" id="Capitol Theatre" name="Programs" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="Capitol Theatre">Capitol Theatre</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option js-swap" type="radio" id="Whiting Auditorium" name="Programs" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="Whiting Auditorium">Whiting Auditorium</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option js-swap" type="radio" id="Flint Symphony Orchestra" name="Programs" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="Flint Symphony Orchestra">Flint Symphony Orchestra</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option js-swap" type="radio" id="Flint Repertory Theatre" name="Programs" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="Flint Repertory Theatre">Flint Repertory Theatre</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option js-swap" type="radio" id="Flint School of Performing Arts" name="Programs" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="Flint School of Performing Arts">Flint School of Performing Arts</label>
<span class="filter_option_input_indicator"></span>
</div>
</div>
</fieldset>
<fieldset class="filter_fieldset">
<legend class="filter_legend">Ticketed</legend>
<div class="filter_options">
<div class="filter_option js-swap" type="radio" id="All" name="Ticketed" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="All">All</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option js-swap" type="radio" id="Ticketed" name="Ticketed" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="Ticketed">Ticketed</label>
<span class="filter_option_input_indicator"></span>
</div>
<div class="filter_option js-swap" type="radio" id="Free to Attend" name="Ticketed" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input">
<label class="filter_option_input_label" for="Free to Attend">Free to Attend</label>
<span class="filter_option_input_indicator"></span>
</div>
</div>
</fieldset>
<div class="visually_hide">
Filtering <span data-js="aria-live-text">All</span> directory.
</div>
<div class="filter_tool filter_tool_people js-people-filter-tool-">
<label class="filter_label" for="filter_tool_label_1">Event Type</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_1" data-js="tool">
<option value="Season 22-23" selected>Season 22-23</option>
<option value="Category One">Category One</option>
<option value="Another Category">Another Category</option>
</select>
<span class="filter_tool_select_icon">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</div>
</div>
<div class="filter_tool filter_tool_people js-people-filter-tool-">
<label class="filter_label" for="filter_tool_label_2">Venues</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_2" data-js="tool">
<option value="All Venues" selected>All Venues</option>
<option value="Bower Theatre">Bower Theatre</option>
<option value="Capitol Theatre">Capitol Theatre</option>
<option value="Elgood Theatre">Elgood Theatre</option>
<option value="MacArthur Recital Hall">MacArthur Recital Hall</option>
<option value="Whiting Auditorium">Whiting Auditorium</option>
</select>
<span class="filter_tool_select_icon">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</div>
</div>
<div class="filter_tool" action="#" method="get">
<label class="filter_label" for="filter_search_input">Search</label>
<div class="filter_tool_search_wrapper">
<input class="filter_tool_search_input" id="filter_tool_search_input" type="search" placeholder="Search by keyword">
<span class="filter_tool_search_icon">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</span>
</div>
</div>
<button class="filter_tools_submit" type="submit">
<span class="filter_tools_submit_inner">
<span class="filter_tools_submit_label">Filter</span>
<span class="filter_tools_submit_icon">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</button>
</form>
</div>
</div>
</div>
<!-- END: Filter -->
{#
{% include '@partial-filter' with {
label: 'Directory',
active: 'search',
action_category: '#',
action_search: '#',
tools: [
{
label: 'Category',
options: [
{
label: 'All Categories',
label: true
}
]
}
],
search_placeholder: 'Placeholder',
results: '',
category: ''
} %}
#}
<!-- Filter -->
<div class="filter">
<div class="filter_inner">
<div class="filter_panels">
<form class="filter_tools" action="{{ action_category }}" method="get">
{% for fieldset in fieldsets %}
<fieldset class="filter_fieldset">
<legend class="filter_legend">{{ fieldset.legend }}</legend>
<div class="filter_options">
{% for option in fieldset.options %}
<div class="filter_option js-swap" {% if option.id == active_dropdown %}data-swap-active="true"{% endif %} type="radio" id="{{ option.id }}" name="{{ fieldset.legend }}" data-swap-group="people_filter_group" data-swap-target=".js-people-filter-tool-{{ option.swapTarget }}" data-swap-options='{ "collapse": false }' data-js="toggle-input-wrap">
<input class="filter_option_input_field" data-js="toggle-input" {% if option.id == active_dropdown %}checked{% endif %}>
<label class="filter_option_input_label" for="{{ option.id }}">{{ option.label }}</label>
<span class="filter_option_input_indicator"></span>
</div>
{% endfor %}
</div>
</fieldset>
{% endfor %}
<div class="visually_hide">
Filtering <span data-js="aria-live-text">{{ fieldsets[0].options[0].label }}</span> directory.
</div>
{% for tool in tools %}
<div class="filter_tool filter_tool_people js-people-filter-tool-{{ tool.handle }}">
<label class="filter_label" for="filter_tool_label_{{ loop.index }}">{{ tool.label }}</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_{{ loop.index }}" data-js="tool">
{% for option in tool.options %}
<option value="{{ option.label }}" {% if option.selected == true %} selected {% endif %}>{{ option.label }}</option>
{% endfor %}
</select>
<span class="filter_tool_select_icon">{{ icon('chevron_down') }}</span>
</div>
</div>
{% endfor %}
<div class="filter_tool" action="{{ action_search }}" method="get">
<label class="filter_label" for="filter_search_input">Search</label>
<div class="filter_tool_search_wrapper">
<input class="filter_tool_search_input" id="filter_tool_search_input" type="search" placeholder="{{ search_placeholder }}">
<span class="filter_tool_search_icon">{{ icon('search') }}</span>
</div>
</div>
<button class="filter_tools_submit" type="submit">
<span class="filter_tools_submit_inner">
<span class="filter_tools_submit_label">Filter</span>
<span class="filter_tools_submit_icon">{{ icon('chevron_right') }}</span>
</span>
</button>
</form>
</div>
</div>
</div>
<!-- END: Filter -->
No notes defined.