<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UK Gender Pay Gap :: {{ title }}</title>
<!-- JQuery and JQurty UI current version -->
<script src='https://code.jquery.com/jquery-3.6.0.js'></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<!-- Highcharts libraries -->
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/maps/modules/map.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/mapdata/custom/world-robinson.js"></script>
<!-- local Javascript files -->
<script type="text/javascript" src="{{ url_for('static', filename='scripts.js') }}"></script>
<!-- remote and local CSS stylesheet -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<header>
<a href="/"><h1>{{ title }}</h1></a>
<p>Data provided by the <a href="https://gender-pay-gap.service.gov.uk/">UK Government</a> and the <a href="https://www.ons.gov.uk/aboutus/transparencyandgovernance/freedomofinformationfoi/ukpostcodestownsandcounties">Office for National Statistics</a></p>
</header>
<aside>
<form id="searchform" action="/search_click" method="POST">
<input type="search" id="search_entry" name="search" required>
<input type="submit" value="Search" id="search_btn">
</form>
{% if filters is defined %}
<h4>Filters</h4>
<form id="filterform" method="POST">
{% for filter_name, filter_content in filters.items() %}
<h5>{{ filter_name }}</h5>
{% if len(filter_content["options"]) > 5 %}
<a class="collapsetoggle" id="collapsetoggle/{{ filter_name }}" onclick="collapseTogglePress('collapsable/{{ filter_name }}', 'collapsetoggle/{{ filter_name }}', {{ len(filter_content['options']) }})" href="javascript:void(0);">
{{ "Un-hide %d hidden filters" % len(filter_content["options"]) }}
</a>
<div class="collapsable" id="collapsable/{{ filter_name }}">
{% endif %}
{% if "yearslider" in filter_content.keys() %}
{% if "year" in current_filters.keys() %}
<p id="slider_val">Year range: {{ current_filters["year"] }}</p>
<input type="range" min="1" max="{{ len(filter_content['yearslider']) }}" value="{{ filter_content['yearslider'].index(current_filters['year']) + 1 }}" name="yearslider" id="yearslider"><br>
<input type="checkbox" id="allyears" name="allyears" value="allyears">
<label for="allyears">All years</label><br>
{% else %}
<p id="slider_val">Year range: {{ filter_content['yearslider'][0] }}</p>
<input type="range" min="1" max="{{ len(filter_content['yearslider']) }}" value="1" name="yearslider" id="yearslider"><br>
<input type="checkbox" id="allyears" name="allyears" value="allyears" checked="checked">
<label for="allyears">All years</label><br>
{% endif %}
{% else %}
{% for option in filter_content["options"] %}
{% if filter_name in current_filters.keys() %}
{% if current_filters[filter_name] == option %}
<input type="radio" id="{{ option }}" name="{{ filter_name }}" value = "{{ option }}" checked="checked">
{% else %}
<input type="radio" id="{{ option }}" name="{{ filter_name }}" value = "{{ option }}">
{% endif %}
{% else %}
<input type="radio" id="{{ option }}" name="{{ filter_name }}" value = "{{ option }}">
{% endif %}
<label for="{{ option }}">{{ option }}</label><br>
{% endfor %}
{% if len(filter_content["default"]) < 2 %}
<input type="radio" id="No filter" name="{{ filter_name }}" value = "No filter">
<label for="No filter">No filter</label><br>
{% endif %}
{% if len(filter_content["options"]) > 5 %}
</div>
{% endif %}
{% endif %}
{% endfor %}
<input type="submit" value="Apply" id="apply_btn">
</form>
{% endif %}
</aside>
<div id="main_content">
{% block content %}
{% endblock %}
</div>
<footer>
<p>Source code released under GPLv3</p>
</footer>
</body>