{% extends 'base.html' %}

{% block head %}

{% with vue=True plotly=True leaflet=True axios=True fontawesome=True %}
{{ block.super }}
{% endwith %}

{% endblock %}


{% block body %}
<div class="d-flex flex-column bg-body" id='egsim-vue' style="height: 100vh;"></div>
{% endblock %}

{% block after-body %}

{{ block.super }}

<script>
axios.interceptors.request.use(config => {
	if (!('headers' in config)){
		config.headers = {};
	}
	config.headers["X-CSRFToken"] = "{{ csrf_token }}";
	return config;
});
</script>

<!-- VUE.JS: -->
<script type='text/javascript' src = "{% static 'js/egsim.js' %}"></script>
<!-- Components and dependencies of the EGISM app: -->
<script type='text/javascript' src="{% static 'js/v-components/base/field-input.js' %}"></script>
<script type='text/javascript' src="{% static 'js/v-components/base/gsim-select.js' %}"></script>
<script type='text/javascript' src="{% static 'js/v-components/base/egsim-form.js' %}"></script>
<script type='text/javascript' src="{% static 'js/v-components/base/plots-div.js' %}"></script>
<script type='text/javascript' src="{% static 'js/v-components/' %}flatfile.js"></script>
<script type='text/javascript' src="{% static 'js/v-components/' %}trellis.js"></script>
<script type='text/javascript' src="{% static 'js/v-components/' %}residuals.js"></script>
<script type='text/javascript' src="{% static 'js/v-components/' %}testing.js"></script>
<script>
/* mount the Vue App EGSIM. The function below returns an App instance (not used for the moment): */
EGSIM.mount('#egsim-vue');
</script>
{% endblock %}