{% extends 'layout.html' %}


{% block header %}

	<h1>
		{% block title %}
			Statement Details
		{% endblock %}
	</h1>

{% endblock %}


{% block content %}

	<div id="statement-details" class="details-container">

		<div class="details-content">

			<div id="statement-info-container">
				{% include 'credit/statement_info.html' %}
			</div>
			
			<div id="statement-transactions-container">
				{% with transactions = statement_transactions %}
					{% include 'credit/transactions_table/transactions.html' %}
				{% endwith %}
			</div>

		</div>

		<div class="details-menu">

			<div class="button">
				<a class="action" href="{{ url_for('credit.new_transaction', statement_id=statement['id']) }}">
					<img class="icon" src="{{ url_for('static', filename='img/icons/plus.png') }}" />
				</a>
			</div>

		</div>

	</div>

{% endblock %}


{% block javascript %}

	<script>
		const UPDATE_STATEMENT_DUE_DATE_ENDPOINT = "{{ url_for('credit.update_statement_due_date', statement_id=statement['id']) }}";
		const MAKE_PAYMENT_ENDPOINT = "{{ url_for('credit.make_payment', card_id=statement['card_id'], statement_id=statement['id']) }}";
		const TRANSACTION_TAGS_ENDPOINT = "{{ url_for('credit.show_transaction_tags') }}";
	</script>
	<script type="module" src="{{ url_for('static', filename='js/update_statement_due_date.js') }}">
	</script>
	<script type="module" src="{{ url_for('static', filename='js/make_payment.js') }}">
	</script>
	<script type="module" src="{{ url_for('static', filename='js/expand_transaction.js') }}">
	</script>

{% endblock %}
