{% extends "ezybaas/layout.html" %}

{% block head %}
{{ block.super }}



{% endblock head %}

{% block topbarheader %}
<span class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block">
	<a class="h4 mb-0 text-white d-none d-lg-inline-block" href="{% url 'index' %}">Home</a>&nbsp;>&nbsp;About
</span>
{% endblock %}
{% block bodycontent %}



<div class="row">
	<!-- mt--8 Gives a Preset -->
	<div class="container-fluid mt--8">
		<div class="container" id="app">
			<div class="row">

				<div class="col-md-8 col-sm-12">
					<div class="card shadow">
						<div class="card-header border-0">
							<div class="row">
								<div class="col">

									<h3 class="mb-0"><i class="fas fa-table"> </i> Ezybaas Info</h3>

								</div>

							</div>


						</div>
						<div class="table-responsive">
							<div>

								<table class="table align-items-center table-flush" id="myTable">
									<thead class="thead-light">
										<tr>
											<th scope="col"> Name</th>
											<th scope="col"> Value</th>

										</tr>
									</thead>
									<tbody>
										<tr v-for="(value, name) in ezybaasInfo">
											<td>
												{[{name}]}
											</td>


											<td>
												{[{value}]}
											</td>

										</tr>


									</tbody>
								</table>
							</div>
						</div>
					</div>
					<br />
				</div>




			</div>

		</div>
	</div>
	<div class="alert alert-warning" role="alert" id="err_div" style="display:none;">
		<strong>Error!</strong>
	</div>

</div>
{% endblock bodycontent %}



{% block footscripts %}
{{ block.super }}

<script>

	new Vue({
		el: '#app',
		data: {
			ezybaasInfo: {
				name: null,
				author: null,
				version: null,
				releasenotes: null,
				releasedate: null,
				standalone: null,
				license: null,
			},
		},
		methods: {
			init() {
				var self = this;
				var root = window.location.href;
				root = root.replace('/about/', "");
				var axiosInst = axios.create({
					baseURL: root
				})

				axiosInst.get('api/ezybaas/version/')
					.then(function (response) {
						self.ezybaasInfo = response.data;
						console.log(response.data);
					}),
					error => {
						console.error(error);
						document.getElementById("err_div").style.display = 'block';
						document.getElementById("err_div").innerHTML = error;
					};
			}

		},
		delimiters: ['{[{', '}]}'],
		mounted() {
			this.init();
		}

	})
</script>

{% endblock footscripts %}