{% extends "base.html" %}

{% block title %}
	» Supplies » {{supply.name}} » Issues
{% endblock %}

{% block inside_head %}
	<style>
		#issues.htmx-swapping {
			opacity: 0;
			transition: opacity 1s ease-out;
		}
	</style>
{% endblock %}

{% block nav %}
	<a href="/e/supplies">Supplies</a> &raquo; 
	<a href="/e/supplies/{{supply.id}}">{{supply.id}}</a> &raquo; 
	Issues
{% endblock %}

{% block content %}

	<ul>
		<li>
			<a href="/e/mop_contracts/{{latest_era.mop_contract.id}}/add_issue?supply_id={{supply.id}}">Add MOP Issue</a>
		</li>
		<li>
			<a href="/e/dc_contracts/{{latest_era.dc_contract.id}}/add_issue?supply_id={{supply.id}}">Add DC Issue</a>
		</li>
		{% if latest_era.imp_supplier_contract %}
			<li>
				<a href="/e/supplier_contracts/{{latest_era.imp_supplier_contract.id}}/add_issue?supply_id={{supply.id}}">Add Import Supplier Issue</a>
			</li>
		{% endif %}
		{% if latest_era.exp_supplier_contract %}
			<li>
				<a href="/e/supplier_contracts/{{latest_era.exp_supplier_contract.id}}/add_issue?supply_id={{supply.id}}">Add Export Supplier Issue</a>
			</li>
		{% endif %}
	</ul>

	<form hx-get="/reports/issues" hx-params="*" hx-include="this" hx-trigger="load, change"
			hx-target="#issues" hx-swap="outerHTML swap:1s">
		<fieldset>
			<input type="hidden" name="supply_id" value="{{supply.id}}"/>
			<legend>Filters</legend>	

			<label>Contract</label>
			<select name="contract_id" multiple size="{{mop_contracts|length + dc_contracts|length + supplier_contracts| length + 3}}">
				<optgroup label="MOP">
					{% for contract in mop_contracts %}
						{{input_option('contract_id', contract.id, contract.name)}}
					{% endfor %}
				</optgroup>
				<optgroup label="DC">
					{% for contract in dc_contracts %}
						{{input_option('contract_id', contract.id, contract.name)}}
					{% endfor %}
				</optgroup>
				<optgroup label="Supplier">
					{% for contract in supplier_contracts %}
						{{input_option('contract_id', contract.id, contract.name)}}
					{% endfor %}
				</optgroup>
			</select>
			<label>Owner</label>
			<select name="owner_id" multiple size="{{owners|length + 2}}">
				{% for owner in owners %}
					{{input_option('owner_id', owner.id, owner.email_address)}}
				{% endfor %}
			</select>
		</fieldset>
	</form>

	<div id="issues"></div>

{% endblock %}