{% extends 'sstreasury/base.html' %}

{#
    Society Self-Service
    Copyright © 2018-2019  Yingtong Li (RunasSudo)

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
#}

{% block title %}{{ claim.purpose }}{% endblock %}

{% block maincontent %}
	<h1>{{ claim.purpose }}</h1>
	
	<form class="ui form" action="{{ url('claim_action', kwargs={'id': claim.id}) }}" method="POST">
		<span class="ui header">Status: {{ claim.get_state_display() }}</span>
		
		{% if claim.can_submit(request.user) %}
			<button class="ui mini labeled primary icon button" type="submit" name="action" value="Submit" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to submit this claim for Treasury approval? You will not be able to make any additional changes without withdrawing the claim.');"><i class="paper plane icon"></i> Submit</button>
		{% endif %}
		{% if claim.can_approve(request.user) %}
			<button class="ui mini labeled positive icon button" type="submit" name="action" value="Approve" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to approve this claim?');"><i class="check icon"></i> Approve</button>
			
			<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Return" onclick="return confirm('Are you sure you want to refuse this claim and return it for re-drafting?');"><i class="undo icon"></i> Return for re-drafting</button>
		{% endif %}
		{% if claim.can_withdraw(request.user) %}
			<button class="ui mini labeled basic negative icon button" type="submit" name="action" value="Withdraw" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to withdraw this budget from being considered for approval? The budget will be reverted to a draft.');"><i class="undo icon"></i> Withdraw</button>
		{% endif %}
		
		{% if claim.can_edit(request.user) %}
			<a class="ui mini labeled right floated icon button" href="{{ url('claim_edit', kwargs={'id': claim.id}) }}"><i class="edit icon"></i> Edit</a>
		{% endif %}
		
		<a class="ui mini labeled right floated icon button" href="{{ url('claim_print', kwargs={'id': claim.id}) }}" target="_blank"><i class="print icon"></i> Print</a>
		
		{% if not claim.can_edit(request.user) and claim.can_withdraw(request.user) %}
			<div class="ui message">
				<p>This claim has been submitted and is now awaiting processing. If you wish to edit this claim, you must first withdraw it. This will revert the claim to a draft.</p>
			</div>
		{% endif %}
		
		<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
	</form>
	
	<table class="ui mydefinition table">
		<tbody>
			<tr>
				<td class="two wide">ID</td>
				<td class="fourteen wide">RE-{{ claim.id }}</td>
			</tr>
			<tr>
				<td>Purpose</td>
				<td>{{ claim.purpose }}</td>
			</tr>
			<tr>
				<td>Expenditure date</td>
				<td>{{ claim.date }}</td>
			</tr>
			<tr>
				<td>Submitter</td>
				<td>
					<div class="ui list">
						<div class="item">
							<i class="user circle icon"></i>
							<div class="content">
								<a href="mailto:{{ claim.author.email }}">
									{% if claim.author.first_name %}
										{{ claim.author.first_name }} {{ claim.author.last_name }}
									{% else %}
										{{ claim.author.email }}
									{% endif %}
								</a>
							</div>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td>Budget ID</td>
				<td>{{ claim.budget_id }}</td>
			</tr>
			<tr>
				<td>Comments</td>
				<td>{{ claim.comments }}</td>
			</tr>
			<tr>
				<td>Items</td>
				<td>
					<div id="items_grid"></div>
				</td>
			</tr>
		</tbody>
	</table>
	
	<form class="ui form" action="{{ url('claim_action', kwargs={'id': claim.id}) }}" method="POST">
		<div class="required field">
			<textarea rows="4" name="comment"></textarea>
		</div>
		<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
		<input class="ui primary button" type="submit" name="action" value="Comment">
		
		{% if claim.can_approve(request.user) %}
			<button class="ui right floated labeled basic negative icon button" type="submit" name="action" value="Comment,Return" onclick="return confirm('Are you sure you want to refuse this claim and return it for re-drafting?');"><i class="undo icon"></i> Comment and return for re-drafting</button>
			
			<button class="ui right floated labeled positive icon button" type="submit" name="action" value="Comment,Approve" onclick="return confirm('Are you sure you want to approve this claim?');"><i class="check icon"></i> Comment and approve</button>
		{% endif %}
	</form>
	
	<div class="ui feed">
		{% for item in history %}
			{% if item.__class__.__name__ == 'ClaimComment' %}
				<div class="event">
					<div class="label">
						<i class="comment alternate outline icon"></i>
					</div>
					<div class="content">
						<div class="summary">
							<i class="user circle icon"></i>
							<a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> commented
							<div class="date">
								{{ localtime(item.time) }}
							</div>
						</div>
						<div class="extra text">
							{{ item.content|markdown }}
						</div>
					</div>
				</div>
			{% elif item.__class__.__name__ == 'ClaimHistory' %}
				<div class="event">
					<div class="label">
						<i class="edit icon"></i>
					</div>
					<div class="content">
						<div class="summary">
							<i class="user circle icon"></i>
							{% if item.action == import('sstreasury.models').ClaimAction.CREATE.value %}
								<a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> created the claim
							{% elif item.action == import('sstreasury.models').ClaimAction.EDIT.value %}
								<a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> edited the claim
							{% elif item.action == import('sstreasury.models').ClaimAction.UPDATE_STATE.value %}
								<a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> changed the state to: {{ item.get_state_display() }}
							{% else %}
								<a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> modified the claim
							{% endif %}
							<div class="date">
								{{ localtime(item.time) }}
							</div>
						</div>
					</div>
				</div>
			{% endif %}
		{% endfor %}
	</div>
{% endblock %}

{% block head %}
	{{ super() }}
	
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.css" integrity="sha256-a/jNbtm7jpeKiXCShJ8YC+eNL9Abh7CBiYXHgaofUVs=" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid-theme.min.css" integrity="sha256-0rD7ZUV4NLK6VtGhEim14ZUZGC45Kcikjdcr4N03ddA=" crossorigin="anonymous">
	
	<style>
		/* Fix the CSS */
		
		.ui.mydefinition.table > tbody > tr > td:first-child:not(.ignored) {
			background: rgba(0,0,0,.03);
			font-weight: 700;
			color: rgba(0,0,0,.95);
		}
		
		.jsgrid-align-right, .jsgrid-align-right input, .jsgrid-align-right select, .jsgrid-align-right textarea {
			text-align: right !important;
		}
		.jsgrid-cell {
			padding: .5em !important;
		}
		.jsgrid-header-row .jsgrid-header-cell {
			text-align: center !important;
		}
	</style>
{% endblock %}

{% block script %}
	{{ super() }}
	
	<script src="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.js" integrity="sha256-lzjMTpg04xOdI+MJdjBst98bVI6qHToLyVodu3EywFU=" crossorigin="anonymous"></script>
	
	<script src="{{ static('sstreasury/claim.js') }}"></script>
	
	<script>
		var items_data = JSON.parse({{ import('json').dumps(import('json').dumps(claim.items))|safe }});
		for (var row of items_data) {
			row['Unit price\n(incl GST)'] = row['Unit price'];
		}
		var editing = false;
		makeGrid();
	</script>
{% endblock %}