<!-- Filter -->
<div class="filter">
    <div class="filter_inner">

        <div class="filter_grid fs-row">
            <div class="filter_grid_item fs-cell fs-lg-2">
                <div class="filter_title_wrap">
                    <h2 id="filter_title" class="filter_title">Refine Your Results:</h2>
                </div>
            </div>

            <div class="filter_grid_item fs-cell fs-lg-10">
                <form class="filter_form" action="#" method="get" aria-describedby="#filter_title" role="search">
                    <div class="filter_cols">
                        <div class="filter_col is_left">
                            <div class="filter_tools">
                                <div class="filter_tool">
                                    <label class="filter_tool_label" for="filter_tool_search_input">Search</label>
                                    <div class="filter_tool_search_wrapper">
                                        <span class="filter_tool_search_icon">
                                            <svg class="icon icon_search">
                                                <use href="/images/icons.svg#search" />
                                            </svg>
                                        </span>
                                        <input class="filter_tool_search_input" id="filter_tool_search_input" placeholder="Search by name or department" type="search">
                                    </div>
                                </div>

                                <div class="filter_tool">
                                    <label class="filter_tool_label" for="filter_tool_label_1">Category</label>
                                    <div class="filter_tool_select_wrapper">
                                        <select class="filter_tool_select" id="filter_tool_label_1">
                                            <option value="All Categories">All Categories</option>
                                            <option value="Category One" selected>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>
                        </div>

                        <div class="filter_col is_right">
                            <button class="filter_tool_submit" type="submit">
                                <span class="filter_tool_submit_inner">
                                    <span class="filter_tool_submit_label">Submit</span>
                                </span>
                            </button>
                        </div>

                    </div>
                </form>
            </div>
        </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">
		{% if tools_title %}
			<div class="filter_tools_title_wrap">
				<div class="fs-row">
					<div class="fs-cell fs-lg-10 fs-lg-push-2">
						<h2 class="filter_tools_title">
							{{ tools_title }}
						</h2>
					</div>
				</div>
			</div>
		{% endif %}

		<div class="filter_grid fs-row">
			<div class="filter_grid_item fs-cell fs-lg-2">
				<div class="filter_title_wrap">
					<h2 id="filter_title" class="filter_title">Refine Your Results:</h2>
				</div>
			</div>

			<div class="filter_grid_item fs-cell fs-lg-10">
				<form class="filter_form" action="{{ action_category }}" method="get" aria-describedby="#filter_title" role="search">
					<div class="filter_cols">
						<div class="filter_col is_left">
							<div class="filter_tools">
								<div class="filter_tool">
									<label class="filter_tool_label" for="filter_tool_search_input">Search</label>
									<div class="filter_tool_search_wrapper">
										<span class="filter_tool_search_icon">{{ icon('search') }}</span>
										<input class="filter_tool_search_input" id="filter_tool_search_input" placeholder="{{ search_placeholder }}" type="search">
									</div>
								</div>

								{% if type != 'button' %}
									{% for tool in tools %}
										<div class="filter_tool">
											<label class="filter_tool_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 }}">
													{% 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 %}
								{% endif %}

							</div>
						</div>

						<div class="filter_col is_right">
							<button class="filter_tool_submit" type="submit">
								<span class="filter_tool_submit_inner">
									<span class="filter_tool_submit_label">Submit</span>
								</span>
							</button>
						</div>

						{% if type == 'button' %} 
							{% for tool in tools %}
								<div class="button_filter filter_col is_right">
									<ul class="button_filter_items">
										{% for item in tool.options %}
											<li class="button_filter_item">
												{% set href = page_link ~ "?" ~ "faculty_type" ~ "[]=" ~ item.category %}
												<a class="button_filter_link{% if item.selected %} button_filter_link_selected{% endif %}" href="{{ href }}">
													<span class="button_filter_link_label">{{ item.label }}</span>
												</a>
												{# <button class="button_filter_link{% if item.selected %} button_filter_link_selected{% endif %}" name="filters[category]" value="{{ item.category }}">
													{% if item.selected %}
														<span class="button_filter_link_icon">{{ icon('check') }}</span>
													{% endif %}
													<span class="button_filter_link_label">{{ item.label }}</span>
												</button> #}
											</li>
										{% endfor %}
									</ul>
								</div>
							{% endfor %}
						{% endif %}


								{# <div class="button_filter">
									<ul class="button_filter_items">
										{% for item in modalities %}
											<li class="button_filter_item">
												<button class="button_filter_link{% if item.active %} button_filter_link_selected{% endif %}" name="filters[modality]" value="{{ item.value }}">
													{% if item.active %}
														<span class="button_filter_link_icon">{{ icon('check') }}</span>
													{% endif %}
													<span class="button_filter_link_label">{{ item.label }}</span>
												</button>
											</li>
										{% endfor %}
									</ul>
								</div> #}
								{# {% for child in item.options %}
									<div class="tool_accordion_item_link_wrapper">
										{% set href = page_link ~ "?" ~ key ~ "[]=" ~ child.value %}
										<a class="tool_accordion_item_link" href="{{ href }}">
											<div class="tool_accordion_item_link_inner">
												{% if child_icon %}
													<span class="tool_accordion_item_link_icon" aria-hidden="true">{{ icon(child_icon) }}</span>
												{% endif %}
												<span class="tool_accordion_item_link_label">{{ child.label ?: child }}</span>
											</div>
										</a>
									</div>
								{% endfor %} #}

					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- END: Filter -->

No notes defined.