{% extends "base.html" %}

{% block title %}
	&raquo; MOP Contracts &raquo; {{ contract.name }} &raquo; Issues
{% endblock %}

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

{% block nav %}
	<a href="/e/mop_contracts">MOP Contracts</a> &raquo;
	<a href="/e/mop_contracts/{{contract.id}}">{{contract.name}}</a> &raquo;
	Issues [<a href="/e/mop_contracts/{{contract.id}}/add_issue">add</a>]
{% endblock %}

{% block content %}
	<form hx-get="/reports/issues" hx-params="*" hx-include="this" hx-trigger="load, change"
			hx-target="#issues" hx-swap="outerHTML swap:1s">
		<fieldset>
			<legend>Filters</legend>	

			<input type="hidden" name="contract_id" value="{{contract.id}}">
		</fieldset>
	</form>

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

{% endblock %}
