<div class="row filter">
	{{#if keywords}}
		{{ render "molecules/forms/filter-input" text="Search by keywords" placeholder="Enter keyword" keywords=true }}
	{{/if}}

	{{#if asset-categories}}
		{{ render "atoms/global/space" space=2 }}

		<div class="row filter__row dark-bg">
			<div class="col-xl-3 col-lg-12">
				<p class="h5">
					<a href="javascript:;" class="filter__category" data-target="assets">
						Asset Categories
						<small class="filter__cat-small">Commodities (6)</small>
					</a>
				</p>
			</div>
			<div class="col-xl-9 col-lg-12 hide-md filter__container">
				<ul class="filter__options" data-section="assets">
					<li>
						{{ render "atoms/buttons/filter-option" text="Equities (15)" }}
					</li>

					<li>
						{{ render "atoms/buttons/filter-option:is-active" text="Commodities (6)" }}
					</li>

					<li>
						{{ render "atoms/buttons/filter-option" text="Allocation (5)" }}
					</li>

					<li>
						{{ render "atoms/buttons/filter-option" text="Fixed Income (5)" }}
					</li>

					<li>
						{{ render "atoms/buttons/filter-option:is-disabled" text="Alternative (3)" }}
					</li>
				</ul>
			</div>
		</div>
	{{/if}}

	{{#if net-assets}}
		{{ render "atoms/global/space" space=2 }}

		<div class="row filter__row dark-bg">
			<div class="col-xl-3 col-lg-12">
				<p class="h5">
					<a href="javascript:;" class="filter__category" data-target="net-assets">
						Total Net Assets
						<i></i>
					</a>
				</p>
			</div>
			<div class="col-xl-8 col-lg-12 hide-md filter__container">
				<ul class="filter__options" data-section="net-assets">
					<li>
						{{ render "atoms/buttons/filter-option" text="&lt; 10M" }}
					</li>

					<li>
						{{ render "atoms/buttons/filter-option" text="10M - 50M" }}
					</li>

					<li>
						{{ render "atoms/buttons/filter-option:is-active" text="50M - 200M" }}
					</li>

					<li>
						{{ render "atoms/buttons/filter-option" text="200M - 1B" }}
					</li>

					<li>
						{{ render "atoms/buttons/filter-option" text="1B" }}
					</li>
				</ul>
			</div>
		</div>
	{{/if}}


	{{#if documentFormat }}
		{{ render "atoms/global/space" space=2 }}

		<div class="row filter__row dark-bg">
			<div class="col-xl-3 hide-lg">
				<p class="h5">Document Format</p>
			</div>
			<div class="col-xl-9 col-lg-12 filter__container">
				<ul class="filter__options">
					<li>
						<a href="javascript:;" class="filter__option">
							Page(15)
						</a>
					</li>
					<li>
						<a href="javascript:;" class="filter__option">
							PDF(8)
						</a>
					</li>
					<li>
						<a href="javascript:;" class="filter__option is-active">
							Video(5)
						</a>
					</li>
					<li>
						<a href="javascript:;" class="filter__option">
							Whitepaper(2)
						</a>
					</li>
				</ul>
			</div>
		</div>
	{{/if }}

	{{#if publishing-dates}}
		{{#unless filterPublishingDatesRemoveSpace }}
			{{ render "atoms/global/space" space=2 }}
		{{/unless }}

		<div class="row filter__row dark-bg">
			<div class="col-xl-3 hide-lg">
				<p class="h5">Publishing Dates</p>
			</div>
			<div class="col-xl-9 col-lg-12 filter__container">
				<ul class="filter__options">
					<li>
						<a href="javascript:;" class="filter__option">
							last 7  days
						</a>
					</li>
					<li>
						<a href="javascript:;" class="filter__option">
							last 30  days
						</a>
					</li>
					<li>
						<a href="javascript:;" class="filter__option is-active">
							last 3 months
						</a>
					</li>
					<li>
						<a href="javascript:;" class="filter__option">
							last 6 months
						</a>
					</li>
					<li>
						<a href="javascript:;" class="filter__option">
							last year
						</a>
					</li>
				</ul>
			</div>
		</div>
	{{/if}}

	{{#if advanced-filter}}
		{{ render "atoms/global/space" space=2 }}

		<div class="row filter__row dark-bg">
			<div class="filter__advanced">
				<div class="row">
					<!-- <div class="col-xl-3 col-md-12">
						<p class="h5">
							<a href="javascript:;" class="filter__category" data-target="net-assets">
								Advanced Filter Criteria
								<i></i>
							</a>
					 	</p>
					 </div> -->
					<div class="col-xl-12 col-md-12">
						<ul class="f-dropdown__wrapper">
							<li>
								<a href="javascript:;" class="f-dropdown" data-target="topic">
									Topic <i class="f-dropdown__arrow"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-dropdown" data-target="source">
									Source <i class="f-dropdown__arrow"></i>
								</a>
							</li>
							{{#unless page-archive}}
								<li>
									<a href="javascript:;" class="f-dropdown is-disabled">
										Content Type <i class="f-dropdown__arrow"></i>
									</a>
								</li>
								<li>
									<a href="javascript:;" class="f-dropdown is-disabled">
										Publishing dates <i class="f-dropdown__arrow"></i>
									</a>
								</li>
							{{/unless}}
						</ul>

						{{ render "molecules/components/dropdown-options" dropdown="topic" }}
						{{ render "molecules/components/dropdown-options" dropdown="source" }}

					</div>
				</div>


				<div class="row">
					<div class="col-xl-12">
						<ul class="f-tag__wrapper">
							<li>
								<a href="javascript:;" class="f-tag">
									Business cycle
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Green investments
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Macro Economy
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Emerging Markets
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									EIU
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									CIO Flash
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									CIO View
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Emergin Markets
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									EIU
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									CIO Flash
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									CIO View
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Macro Economy
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Business cycle
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Green Investments
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									CIO View
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Business cycle
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Green investments
									<i class="f-tag__close"></i>
								</a>
							</li>
							<li>
								<a href="javascript:;" class="f-tag">
									Emerging Markets
									<i class="f-tag__close"></i>
								</a>
							</li>
						</ul>
						<a href="javascript:;" class="filter__reset filter__action-small">Reset all filters</a>
					</div>
				</div>
			</div>
			<a href="javascript:;" class="toggle filter__toggle" data-target=".filter__advanced" data-class="is-opened" data-hidden="Show Filter" data-shown="Hide Filter">Show Filter</a>
		</div>
	{{/if}}

	{{#if filterButtons}}
		<div class="row no-padding dark-bg">
			<div class="col-xl-6">
				<a href="javascript:;" class="button no-bg filter-reset-btn no-padding-left">Reset all filters<i class="icon-inline icons-reset-link"></i></a>
			</div>
			<div class="col-xl-6 text-right">
				<a href="javascript:;" class="button">Apply</a>
			</div>
		</div>
	{{/if}}

	{{ render "molecules/components/overlay-options" }}
</div>

{{#unless nojs }}
<script>
	window.onload = function() {
		/**
		 * START - REQUIRED JS SNIPPET
		 */
		{{ render "atoms/scripts/script-filters" }}
		/**
		 * END - REQUIRED JS SNIPPET
		 */
	};
</script>
{{/unless }}
