<commit_before>{% load i18n %}
<style type="text/css">

	div#filter-area {
		border: solid thin thistle;
 		border-radius: 5px;
		padding: 0 5px 5px 5px;
		margin-left: -10px;
 	}

	/*div#filter-area:hover { border: dashed thistle; }*/

	div#add-filters/*, div#close-select-filters*/ { cursor: pointer; height: 100%; }
	div#add-filters:hover/*, div#close-select-filters:hover*/ { background-color: lightgray; }
	/*
	div#close-select-filters {
		margin-left: 8px;
		margin-right: -10px;
		padding-bottom: 8px;
	}
	*/
	div#create-filter { padding-top:0.75em; }

	div#applied-filters { 
		/*margin-top: -15px;*/
		/*padding-left: 2em;*/
		padding-bottom: 5px;
		padding-top: 5px;
	}
	
	#add-filters {
		/*margin-left: 25px;*/
		/*margin-top: 5px; */
		/*margin-bottom: -15px;*/
		padding-bottom: 5px;
		/*padding-left: 5px;*/
		cursor: pointer;
	}

	#filters-label{
		opacity: 0.1;
		/*position: absolute;*/
		/*padding-left: 10px;*/
	}

	div#select-filters {
		background-color: #efefef;
		padding-top: 0.5em;
	    margin-left: 5px;
	    margin-right: 5px;
	    margin-bottom: 5px;
	    border-radius: 0 0 5px 5px;
	}

	div.filters{ 
		/*padding: 5px 10px; */
		margin: 2px 5px;
		color: white;
		font-size: 0.9em;
	}

	i.remove-filter{
		padding-left: 8px;
		font-size: 1.1em;
		cursor: pointer;
	}

	select[name="filter-field-value"]{
		opacity: 0.5;
	}

</style>


<div id="filter-area">
	
	<!-- top-filter row -->
	<div class="row" >
		<h2 id="add-filters" class="small-2 columns text-center" title="Filters applied">
			<span id="filters-count"></span> <span id="filters-label"></span>
		</h2>
		<div id="applied-filters" class="small-10 columns"></div>
	</div>

	<!-- second filter row -->
	<div class="row" id="select-filters">
		<!-- 
		<div class="small-1 columns text-center" id="close-select-filters">
			<i class="fi-x-circle" style="font-size:large;"></i>&nbsp; <br/>
			Close
		</div>
		 -->
		<div class="small-12 columns" id="create-filter">
			<div class="row">
				<div class="small-12 large-2 columns small-text-left  large-text-right"><h5> {% trans 'Filter Resources' %}</h5></div>
				<div class="small-12 large-2 columns">
					<select name="filter-field-name">
						<option value="initial-select"> -- {% trans 'Select' %} -- </option>
						{% for key, val in filter_dict.items %}
							<option value='{{val.value}}'
							data-primary-type='{{val.data_type}}'
							data-gstudio-type='{{val.type}}' data-name-field='{{key}}'>
								{% comment %}
									{# {% if val.altnames %}
										{{val.altnames}}
									{% else %}
										{{key}}
									{% endif %} #}
								{% endcomment %}
								{% firstof val.altnames key %}
							</option>
						{% endfor %}
						
					</select>
				</div>
				<div class="small-12 large-2 columns">
					<select name="filter-field-value"  
					onblur="$(this).css('height', '')"
					onfocus="$(this).css('height', '6em')" multiple disabled>
						<option value=""> -- {% trans 'Select' %} -- </option>
						
					</select>				
				</div>
				<div class="small-12 large-6  columns">
					<input type="button" class="button radius tiny" value="{% trans 'Filter' %}" id="filter-btn">
				</div>
			</div>
		</div>

	</div>
	<!-- end of second level filter -->

</div>
<!-- end of filter section -->


<script type="text/javascript">

	// show and hide functionality on click of add filters
	$("#add-filters").click(function(){
		if ( $( "#select-filters" ).is( ":hidden" ) ) {
			$( "#select-filters" ).show( "slow" );
		} else {
			$( "#select-filters" ).slideUp();
		}
	} )

	// hide functionality on click of close filters<commit_msg>Added instructions and some UI changes in filter widget<commit_after><!-- {# /**
	===: Instructions :===

	Provide method applyFilter() in your template with following signature:
	applyFilter(filtersObjArr)
	where,
	filtersObjArr -- is array containing all selected filters.
		- Each of the filter is contained in following format of JS Object:
			{
				"selFieldValue": selFieldValue,
				"selFieldGstudioType": selFieldGstudioType,
				"selFieldText": selFieldText,
				"selFieldPrimaryType": selFieldPrimaryType
			}

	Example - for filter "audience: Teachers"
	If "audience"(selFieldValue) is "attribute"(selFieldGstudioType) having data_type as "basestring"(selFieldPrimaryType) and value as "teachers"(selFieldText).
	then filtersObjArr will be as follows:
	[
		{
			"selFieldValue": "audience",
			"selFieldGstudioType": "attribute",
			"selFieldText": "teachers",
			"selFieldPrimaryType": "selFieldPrimaryType"
		}
	]
	And call the method as follows:
	applyFilter(filtersObjArr).
**/ } -->

{% load i18n %}
<style type="text/css">

	div#filter-area {
		border: solid thin thistle;
 		border-radius: 5px;
		padding: 0 5px 5px 5px;
		margin-left: -10px;
 	}

	/*div#filter-area:hover { border: dashed thistle; }*/

	div#add-filters/*, div#close-select-filters*/ { cursor: pointer; height: 100%; }
	div#add-filters:hover/*, div#close-select-filters:hover*/ { background-color: lightgray; }
	/*
	div#close-select-filters {
		margin-left: 8px;
		margin-right: -10px;
		padding-bottom: 8px;
	}
	*/
	div#create-filter { padding-top:0.75em; }

	div#applied-filters { 
		/*margin-top: -15px;*/
		/*padding-left: 2em;*/
		padding-bottom: 5px;
		padding-top: 5px;
	}
	
	#add-filters {
		/*margin-left: 25px;*/
		/*margin-top: 5px; */
		/*margin-bottom: -15px;*/
		padding-bottom: 5px;
		/*padding-left: 5px;*/
		cursor: pointer;
	}

	#filters-label{
		opacity: 0.1;
		/*position: absolute;*/
		/*padding-left: 10px;*/
	}

	div#select-filters {
		background-color: #efefef;
		padding-top: 0.5em;
	    margin-left: 5px;
	    margin-right: 5px;
	    margin-bottom: 5px;
	    border-radius: 0 0 5px 5px;
	}

	div.filters{ 
		/*padding: 5px 10px; */
		margin: 2px 5px;
		color: white;
		font-size: 0.9em;
	}

	i.remove-filter{
		padding-left: 8px;
		font-size: 1.1em;
		cursor: pointer;
	}

	select[name="filter-field-value"]{
		opacity: 0.5;
	}

</style>


<div id="filter-area">
	
	<!-- top-filter row -->
	<div class="row" >
		<h2 id="add-filters" class="small-2 columns text-center" title="Filters applied">
			<span id="filters-count"></span> <span id="filters-label"></span>
		</h2>
		<div id="applied-filters" class="small-10 columns"></div>
	</div>

	<!-- second filter row -->
	<div class="row" id="select-filters">
		<!-- 
		<div class="small-1 columns text-center" id="close-select-filters">
			<i class="fi-x-circle" style="font-size:large;"></i>&nbsp; <br/>
			Close
		</div>
		 -->
		<div class="small-12 columns" id="create-filter">
			<div class="row">
				<div class="small-12 large-3 columns small-text-left  large-text-center"><h5> {% trans 'Filter Resources' %}</h5></div>
				<div class="small-12 large-3 columns">
					<select name="filter-field-name">
						<option value="initial-select"> -- {% trans 'Select' %} -- </option>
						{% for key, val in filter_dict.items %}
							<option value='{{val.value}}'
							data-primary-type='{{val.data_type}}'
							data-gstudio-type='{{val.type}}' data-name-field='{{key}}'>
								{% comment %}
									{# {% if val.altnames %}
										{{val.altnames}}
									{% else %}
										{{key}}
									{% endif %} #}
								{% endcomment %}
								{% firstof val.altnames key %}
							</option>
						{% endfor %}
						
					</select>
				</div>
				<div class="small-12 large-3 columns">
					<select name="filter-field-value"  
					onblur="$(this).css('height', '')"
					onfocus="$(this).css('height', '6em')" multiple disabled>
						<option value=""> -- {% trans 'Select' %} -- </option>
						
					</select>				
				</div>
				<div class="small-12 large-3 columns">
					<input type="button" class="button radius tiny" value="{% trans 'Filter' %}" id="filter-btn">
				</div>
			</div>
		</div>

	</div>
	<!-- end of second level filter -->

</div>
<!-- end of filter section -->


<script type="text/javascript">

	// show and hide functionality on click of add filters
	$("#add-filters").click(function(){
		if ( $( "#select-filters" ).is( ":hidden" ) ) {
			$( "#select-filters" ).show( "slow" );
		} else {
			$( "#select-filters" ).slideUp();
		}
	} )

	// hide functionality on click of close filters
{'fraction_non_alphanumeric': 0.19365466748017082, 'fraction_numerical': 0.019280048810250153, 'mean_word_length': 2.951783992285439, 'pattern_counts': {'":': 10, '<': 108, '<?xml version=': 0, '>': 108, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3134959', 'n_tokens_mistral': 3569, 'n_tokens_neox': 2855, 'n_words': 634}