<div class="container">
	<div class="row">
		<div class="col site-select">
			@@include("../partials/bot-select.html")
		</div>

		<div class="col time-period">
			@@include("../partials/period-select.html")
		</div> 
	</div>
	<div class="row">
		<div class="col">
			<table class="table table-striped-columns">
			  <tbody>
			  	<tr>
			  		<th>Сайт</th>
			  		<td>Mediceuticals</td>
			  	</tr>
			  	<tr>
			  		<th>Кількість діалогів</th>
			  		<td><strong>28</strong></td>
			  	</tr>
			  	<tr>
			  		<th>Кількість переадресацій</th>
			  		<td><strong>4</strong> (14%)</td>
			  	</tr>
			  	<tr>
			  		<th>Середня оцінка</th>
			  		<td>
			  			<strong>7.5</strong>
							<span class="mdi mdi-star"></span>
							(<span class="mdi mdi-thumb-up"></span> 8 <span class="mdi mdi-thumb-down-outline"></span> 4)
						</td>
			  	</tr>
			  </tbody>
			</table>
		</div>
	</div>
</div>	

<script>
	document.addEventListener("DOMContentLoaded", e => {
		const table = document.querySelector("#pills-analitics .table");
		const tbody = table.querySelector("tbody");
		const siteSelector = document.querySelector("#pills-analitics .site-select select");
		const timePeriod = document.querySelector("#pills-analitics .time-period select");

		table.rendering = function(resp){
			this.querySelector("tbody").innerHTML = "";

			let entry = `
				<tr>
		  		<th>Сайт</th>
		  		<td>${resp.site}</td>
		  	</tr>
		  	<tr>
		  		<th>Кількість діалогів</th>
		  		<td><strong>${resp.total_dialogs}</strong></td>
		  	</tr>
		  	<tr>
		  		<th>Кількість переадресацій</th>
		  		<td><strong>?</strong> (??%)</td>
		  	</tr>
		  	<tr>
		  		<th>Середня оцінка</th>
		  		<td>
		  			<strong>${resp.final_rating}</strong>
						<span class="mdi mdi-star"></span>
						(<span class="mdi mdi-thumb-up"></span> ${resp.total_likes} <span class="mdi mdi-thumb-down-outline"></span> ${resp.total_dislikes})
					</td>
		  	</tr>
			`;

			this.querySelector("tbody").innerHTML = entry;
		}

		table.loadDataFromServer = function() {
			doAction("analitics.get_by_site", {
				"site": siteSelector.value,
				"period": timePeriod.value
			}, resp => {
				table.rendering(resp);
			});
		}

		siteSelector.addEventListener("change", e => {
			table.loadDataFromServer();
		});

		timePeriod.addEventListener("change", e => {
			table.loadDataFromServer();
		});

		table.loadDataFromServer();

	});
</script>