{%- macro input_date(prefix, initial=None, resolution='minute') -%}
  {% if prefix != None %}
    {% set year_field = prefix + '_year' %}
    {% set month_field = prefix + '_month' %}
    {% set day_field = prefix + '_day' %}
    {% set hour_field = prefix + '_hour' %}
    {% set minute_field = prefix + '_minute' %}
  {% else %}
    {% set year_field = 'year' %}
    {% set month_field = 'month' %}
    {% set day_field = 'day' %}
    {% set hour_field = 'hour' %}
    {% set minute_field = 'minute' %}
  {% endif %}

  {% set initial = initial|now_if_none|to_ct %}

  <input name="{{ year_field }}" maxlength="4" size="4" value="
    {%- if request.values[year_field] -%}
      {{ request.values[year_field] }}
    {%- else -%}
      {{ initial|hh_format('year') }}
    {%- endif %}">

  {%- if resolution in ['month', 'day', 'hour', 'minute'] -%}
    -<select name="{{ month_field }}">
    {% for month in range(1, 13) -%}
      <option value="{{ "%02i"|format(month) }}"
        {%- if request.values[month_field] -%}
          {%- if request.values[month_field]|int == month %} selected
          {%- endif -%}
        {%- else -%}
          {%- if initial.month == month %} selected{%- endif -%}
        {%- endif -%}>{{ "%02i"|format(month) }}</option>
    {% endfor %}
    </select>
  {%- endif -%}

  {% if resolution in ['day', 'hour', 'minute'] -%}
    -<select name="{{ day_field }}">
      {% for day in range(1, 32) -%}
        <option value="{{ day }}"
          {%- if request.values[day_field] -%}
            {%- if request.values[day_field]|int == day %} selected
            {% endif -%}
          {% else %}
            {%- if initial.day == day %} selected{% endif -%}
          {%- endif %}>{{ "%02i"|format(day) }}</option>
      {% endfor -%}
    </select>
  {%- endif -%}

  {% if resolution in ['hour', 'minute'] %}
    <select name="{{ hour_field }}">
      {% for hour in range(24) %}
        <option value="{{ hour }}"
          {%- if request.values[hour_field] -%}
            {%- if request.values[hour_field]|int == hour %} selected
            {%- endif -%}
          {%- else -%}
            {%- if initial.hour == hour %} selected{%- endif -%}
          {%- endif %}>{{ "%02i"|format(hour) }}</option>
      {%- endfor %}
    </select>
  {%- endif -%}

  {% if resolution == 'minute' -%}
    :<select name="{{ minute_field }}">
      {% for minute in range(0, 31, 30) -%}
        <option value="{{ minute }}"
          {%- if request.values[minute_field] %}
            {%- if request.values[minute_field]|int == minute %} selected
            {%- endif %}
          {%- else %}
            {%- if initial.minute == minute %} selected{% endif %}
            {%- endif %}>{{ "%02i"|format(minute) }}</option>
      {% endfor %}
    </select>
  {%- endif %}
{%- endmacro -%}

{%- macro input_option(name, item_id, desc, initial=None) -%}
    <option value="{{ item_id }}"
        {%- if request.values[name] -%}
            {%- if request.values[name] == '' ~ item_id %} selected
            {%- endif -%}
        {%- else -%}
            {%- if initial == item_id %} selected{% endif -%}
            {%- endif -%}>{{ desc }}</option>
{%- endmacro -%}

{% macro input_text(
  name, initial=None, size=None, maxlength=None, placeholder=None,
  required=None, pattern=None) %}
    <input name="{{name}}" value="
        {%- if request.values[name] -%}
            {{ request.values[name] }}
        {%- elif initial is not none -%}
            {{initial}}
        {%- endif -%}"
        {%- if size %} size="{{ size }}"{% endif %}
        {%- if placeholder %} placeholder="{{ placeholder }}"{% endif %}
        {%- if required %} required="required"{% endif %}
        {%- if pattern %} pattern="{{pattern}}"{% endif %}
        {%- if maxlength %} maxlength="{{ maxlength }}"{% endif %}>
{%- endmacro -%}

{% macro input_number(
  name, initial=None, size=None, maxlength=None, placeholder=None,
  required=None) %}
    <input type="number" name="{{name}}" value="
        {%- if request.values[name] -%}
            {{ request.values[name] }}
        {%- elif initial is not none -%}
            {{initial}}
        {%- endif -%}"
        {%- if size %} size="{{ size }}"{% endif %}
        {%- if placeholder %} placeholder="{{ placeholder }}"{% endif %}
        {%- if maxlength %} maxlength="{{ maxlength }}"{% endif %}
        {%- if required %} required="required"{% endif %}>
{%- endmacro -%}

{% macro input_textarea(
    name, initial, rows, cols, placeholder=None, show_pos=False) -%}
  <textarea id="{{ name }}" name="{{ name }}" rows="{{ rows }}"
    cols="{{ cols }}"
    {%- if placeholder %} placeholder="{{ placeholder }}"{% endif %}>
    {%- if request.values[name] -%}
      {{ request.values[name] }}
    {%- else -%}
      {{ initial }}
    {%- endif -%}
  </textarea>
  {% if show_pos %}
    <p id="{{name}}_pos"></p>
    <script type="text/javascript">
      var props = document.getElementById('{{name}}');
      var cursorPos = document.getElementById('{{name}}_pos');

      props.onkeyup = updateLineCharacter;
      props.onclick = updateLineCharacter;

      function updateLineCharacter() {
        var textLines = props.value.substr(0, props.selectionStart).split("\n");
        var line = textLines.length;
        var column = textLines[textLines.length - 1].length + 1;
        cursorPos.innerHTML = "Line: " + line + " Column: "+ column
      };
    </script>
  {% endif %}
{%- endmacro -%}

{%- macro input_checkbox(name, initial) %}
	<input type="checkbox" name="{{ name }}" value="true"
		{%- if request.values[name] -%}
				{%- if request.values[name] == 'true' %} checked
				{%- endif -%}
		{%- else -%}
				{%- if initial == True %} checked{% endif -%}
				{%- endif -%}>
{%- endmacro -%}

<!DOCTYPE html>
<html lang="en">
	<head>
		{% block head %}
			<link rel="stylesheet" href="/static/css/bootstrap.min.css">
			<link
		 			rel="stylesheet"
				 	href="/static/font-awesome-4.6.3/css/font-awesome.min.css">
			<link rel="stylesheet" href="/chellowcss">

			<script src="/static/js/jquery-2.2.4.min.js"></script>
			<script src="/static/js/bootstrap.min.js"></script>
			<script src="/static/js/grids.min.js"></script>
			<script src="/chellowjs"></script>
			<meta name="viewport" content="width=device-width, initial-scale=1">
		
			<title>Chellow {% block title %}{% endblock %}</title>
			{% block inside_head %}{% endblock %}
		{% endblock %}
	</head>
	<body>
		{% block body %}
			<!-- Layer Page -->
			<div class="layer-page">
	
				<!-- Layer Header -->
				<div class="layer-header">
					<div class="container-fluid">
						<div class="row">
							<!-- Logo -->
							<div
									class="col-sm-3 col-md-2 alignCenter bgBlue headerSameHeight">
								<p class="panel-logo">
									<a href="/"><span class="hide"></span></a>
								</p>
							</div>
                    	
							<!-- Top Header -->
							<div class="col-sm-9 col-md-10 top-header headerSameHeight">
								<div class="pull-left">
									<p class="panel-breadcrumbs">
										<!-- <a href="/">Chellow</a> -->
										{% block nav %}{% endblock %}</p>
						
								</div>
                            
								<div class="pull-right layer-profilemenu">
									<!-- Layer Header Top -->
									<div class="layer-headertop">
										<div class="headertop createnew blue">
											<div class="menu-topbar">
												<div class="topbar-main">
													<div class="standardForm siteSearch">
														<form action="/sites">
															<fieldset>
																<span class="topbarmain-title">
																	<input
																			type="text" class="input-text"
																			name="pattern"
                                      placeholder="Search Sites..."
																	>
																</span>
																<span class="topbarmain-arrow"><button type="submit" class="btn">&#x1F50D;</button></span>
															</fieldset>
														</form>
													</div>
												</div>
											</div>
										</div>
										<div class="headertop search blue">
											<div class="menu-topbar">
												<div class="topbar-main">
													<div class="standardForm supplySearch">
														<form action="/supplies">
															<fieldset>
																<span class="topbarmain-title">
																	<input type="text" class="input-text" name="search_pattern" placeholder="Search Supplies...">
																</span>
																<span class="topbarmain-arrow">
																	<button
																			type="submit" class="btn" >
                                      &#x1F50D;
																	</button>
																</span>
															</fieldset>
														</form>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- End Layer Header Top -->
								</div>
							</div>
						</div>
					</div>
	        <!-- End Layer Header -->
	
	
	        <!-- Layer Body -->
					<div class="layer-body menuHide">
		        <div class="container-fluid">
							<div class="row">           
								<!-- Layer Sidebar -->
								<div class="layer-sidebar col-sm-2 bgWhite bodySameHeight">
									<div class="main-navigation">
										<!-- Nav Contracts -->
										<nav class="nav-main active">
											<h4><i class="fa fa-file" aria-hidden="true"></i> Contracts</h4>
											<ul class="active">
													<li><a href="/dc_contracts" title="DC">DC</a></li>
													<li><a href="/mop_contracts" title="MOP">MOP</a></li>
													<li><a href="/supplier_contracts" title="Supplier">Supplier</a></li>
													<li><a href="/non_core_contracts" title="Non-Core">Non-Core</a></li>
											</ul>
										</nav>
										<!-- End Nav Contracts -->
										<!-- Nav Editors -->
										<nav class="nav-editors">
											<h4><i class="fa fa-cog" aria-hidden="true"></i> For Editors</h4>
											<ul>                                    
												<li><a href="/local_reports_home" title="Local Reports">Local Reports</a></li>
												<li><a href="/general_imports" title="General Import">General Import</a></li>
												<li><a href="/downloads" title="Downloads">Downloads</a></li>
												<li><a href="/reports/ecoes_comparison" title="Comparison against ECOES">Comparison against ECOES</a></li>
												<li><a href="/local_reports" title="Edit Local Reports">Edit Local Reports</a></li>
												<li><a href="/site_snags" title="Site Snags">Site Snags</a></li>
												<li>
                          <a href="/scenarios" title="Scenarios">Scenarios</a>
                        </li>
												<li><a href="https://github.com/WessexWater/chellow" title="Docs">Docs</a></li> 
											</ul>
										</nav>
										<!-- End Nav Editors -->
										<!-- Nav Industry -->
										<nav class="nav-industry">
											<h4><i class="fa fa-industry" aria-hidden="true"></i> Industry Info</h4>
											<ul>
												<li><a href="/dnos" title="DNOs">DNOs</a></li>
												<li><a href="/industry_contracts" title="Industry Rates">Industry Rates</a></li>
												<li><a href="/participants" title="Market Participants">Market Participants</a></li>
												<li><a href="/market_roles" title="Market Roles">Market Roles</a></li>
												<li><a href="/parties" title="Parties">Parties</a></li>
												<li><a href="/pcs" title="Profile Classes">Profile Classes</a></li>
												<li><a href="/mtcs" title="Meter Timeswitch Classes">Meter Timeswitch Classes</a></li>
												<li><a href="/meter_types" title="Meter Types">Meter Types</a></li>
												<li><a href="/dtc_meter_types" title="DTC Meter Types">DTC Meter Types</a></li>
												<li><a href="/meter_payment_types" title="Meter Payments Types">Meter Payments Types</a></li>
												<li><a href="/tprs" title="TPRs">TPRs</a></li>
												<li><a href="/sscs" title="SSCs">SSCs</a></li>
												<li><a href="/gsp_groups" title="GSP Groups">GSP Groups</a></li>
												<li><a href="/cops" title="CoPs">CoPs</a></li>
												<li><a href="/bill_types" title="Bill Types">Bill Types</a></li>
												<li><a href="/read_types" title="Read Types">Read Types</a></li>
												<li><a href="/energisation_statuses" title="Energisation Statuses">Energisation Statuses</a></li>
												<li><a href="/sources" title="Sources">Sources</a></li>
												<li><a href="/generator_types" title="Generator Types">Generator Types</a></li>
												<li><a href="/mdd_imports" title="MDD Imports">MDD Importer</a></li>
											</ul>
										</nav>
										<!-- End Nav Industry -->

										<!-- Nav Gas -->
										<nav class="nav-gas">
											<h4>
												<i class="fa fa-fire" aria-hidden="true"></i>
												Gas
											</h4>
											<ul>
												<li><a href="/g_supplies">Supplies</a></li>
												<li><a href="/g_contracts">Contracts</a></li>
												<li><a href="/g_read_types">Read Types</a></li>
												<li><a href="/g_units">Units</a></li>
												<li><a href="/g_reports">Reports</a></li>
												<li><a href="/g_dns">DNs</a></li>
												<li>
                          <a
                            href="/g_reading_frequencies"
                            >Reading Frequencies</a>
                        </li>
											</ul>
										</nav>
										<!-- End Nav Gas -->

										<!-- Nav Administration -->
										<nav class="nav-administration">
											<h4><i class="fa fa-user" aria-hidden="true"></i> Administration</h4>
											<ul>
												<li><a href="/users" title="Users">Users</a></li>
												<li><a href="/user_roles" title="Users Roles">Users Roles</a></li>
												<li><a href="/system" title="System">System</a></li>
											</ul>
										</nav>
										<!-- End Nav Administration -->

									</div>
								</div>
								<!-- End Layer Sidebar -->
                                                    
								<!-- Layer Content -->
								<div class="col-sm-12 bodySameHeight bgColor">
									<div class="layer-content">
										<div class="row">
											<div class="col-md-12">
												{% if global_alerts %}
													<!-- Layer Section -->
													<div class="layer-section">
														<!-- Section Content -->
														<div class="section-content">
															<div class="section-data">
																<ul>
																	{% for alert in global_alerts %}
																		<li class="global">{{alert}}</li>
																	{% endfor %}
																</ul>
															</div>
														</div>
														<!-- End Section Content -->
													</div>
													<!-- End Layer Section -->
												{% endif %}

												{% with messages = get_flashed_messages() %}
													{% if messages %}
														<!-- Layer Section -->
														<div class="layer-section">
															<!-- Section Content -->
															<div class="section-content">
																<div class="section-data">
																	<ul>
																		{% for message in messages %}
																			<li>{{message}}</li>
																		{% endfor %}
																	</ul>
																</div>
															</div>
															<!-- End Section Content -->
														</div>
														<!-- End Layer Section -->
													{% endif %}
												{% endwith %}
												{% block content %}
								           
								        {% endblock %}
											</div>
										</div>
									</div>
								</div>
								<!-- Layer Content -->
							</div>
						</div>		
					</div>	
				</div>
				<!-- End Layer Body -->

				<p class="panel-mainmenubutton">
					<a
					 		href="javascript:void(0)" title="Menu Toggle"
						 	onClick="toggleMenuMain()">
						<i class="fa fa-bars" aria-hidden="true"></i>
					</a>
				</p>
			</div>
			<!-- End Layer Page -->
		{% endblock %}
	</body>
</html>
