{% extends 'assets/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block extra_css %}
{% endblock extra_css %}

{% block assets_block %}
	<div class="card">
		<div id="card-assets">
			<div class="panel panel-default panel-tabs">
				<div class="panel-body">
					<div class="card-body bg-secondary tab-content rounded-bottom">
						{% include 'assets/assets.html' %}
						{% include 'assets/requests.html' %}
					</div>
				</div>
			</div>
    	</div>
	</div>
{% endblock %}

{% block extra_javascript %}
<script type="application/javascript">
	let requestSettings = {
		inProgressRequest: '{% url "assets:request_in_progress" request_id=1337 %}',
		cancelRequestUrl: '{% url "assets:request_canceled" request_id=1337 %}',
		inProgressRequestUrl: '{% url "assets:request_in_progress" request_id=1337 %}',
		openRequestUrl: '{% url "assets:request_in_progress" request_id=1337 %}',
		completeRequestUrl: '{% url "assets:request_in_progress" request_id=1337 %}',

		csrfToken: '{% csrf_token %}',

		markRequestCancelledText: '{% translate "Mark Request as Cancelled" %}',
		markRequestCompletedText: '{% translate "Mark Request as Complete" %}',
		markRequestInProgressText: '{% translate "Mark Request as In Progress" %}',
		markRequestOpenText: '{% translate "Mark Request as Open" %}',
	};
</script>

{% include 'bundles/datatables-js-bs5.html' %}
{% include "bundles/moment-js.html" with locale=True %}
{% include "bundles/filterdropdown-js.html" %}

{% include 'assets/js/assets-js.html' %}
{% include 'assets/js/requests-js.html' %}
<script type="application/javascript">
	// Bootstrap Nav Active System
	// Save the latest tab and load it on page load
    document.addEventListener('DOMContentLoaded', function () {
        var activeTab = localStorage.getItem('activeTab');
        if (activeTab) {
            var storedTab = document.querySelector('a[href="' + activeTab + '"]');
            if (storedTab) {
                var tab = new bootstrap.Tab(storedTab);
                tab.show();
            }
        } else {
            var firstTab = document.querySelector('#aa-assets-tabs a[data-bs-toggle="tab"]');
            if (firstTab) {
                var tab = new bootstrap.Tab(firstTab);
                tab.show();
            }
        }

        document.querySelectorAll('#aa-assets-tabs a[data-bs-toggle="tab"]').forEach(function (tabLink) {
            tabLink.addEventListener('click', function (e) {
                e.preventDefault();
                var tabName = this.getAttribute('href');
                localStorage.setItem('activeTab', tabName);
                if (history.pushState) {
                    history.pushState(null, null, tabName);
                }
            });
        });
    });
</script>
{% endblock %}

{% block extra_script %}
{% endblock extra_script %}
