{% extends 'base/layout.html' %}

{% block content %}

<div class="container">
	<section class="hero is-info welcome is-small">
		<div class="hero-body">
			<div class="container">
				<h1 class="title">
					Hello {{ current_user.username }}
				</h1>
				<h2 class="subtitle">
					Welcome to your home.
				</h2>
			</div>
		</div>
	</section>
	<section class="info-tiles">
		<div class="tile is-ancestor has-text-centered">
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title has-text-black">{{ current_user.workouts.count() }}</p>
					<p class="subtitle has-text-black">Workouts</p>
				</article>
			</div>
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title has-text-black">{{ records.count()  }}</p>
					<p class="subtitle has-text-black">Workouts Completed</p>
				</article>
			</div>
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title has-text-black">0</p>
					<p class="subtitle has-text-black">Sets Completed</p>
				</article>
			</div>
			<!-- Something else?
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title">19</p>
					<p class="subtitle">Exceptions</p>
				</article>
			</div> -->
		</div>
	</section>
	<div class="columns">
		<div class="column is-6">
			<div class="card events-card">
				<header class="card-header">
					<p class="card-header-title">
						My Workouts
					</p>
				</header>
				<div class="card-table">
					<div class="content">
						<table class="table is-fullwidth is-striped">
							<tbody>
								{% for workout in current_user.workouts %}
									<tr>
										<td>{{ workout.name }}</td>
										<td>{{ workout.exercises.count() }} exercises</td>
										<td class="level-right">
											<p class="buttons">
												<a class="button is-small is-primary" href="/workout/record/{{ workout.id }}">Record</a>
												<a class="button is-small is-info" href="/workout/edit/{{ workout.id }}">Edit</a>
												<a class="button is-small is-danger js-modal-trigger" data-target="modal-{{ workout.id }}" href="#">Delete</a>
											</p>
										</td>
									</tr>
									<!-- Confirmation Modal -->
									<div class="modal" id="modal-{{ workout.id }}">
										<div class="modal-background"></div>
										<div class="modal-card">
											<section class="modal-card-body">
												<h1 class="title has-text-black">Are you sure?</h1>
												<p>
													Are you sure you want to delete this workout?
													You will not be able to restore it once you do.
												</p>
											</section>
											<footer class="modal-card-foot">
												<a href="/api/workout/delete?id={{ workout.id }}" class="button is-danger">Confirm</a>
												<button class="button">Cancel</button>
											</footer>
										</div>
									</div>
								{% endfor %}
							</tbody>
						</table>
					</div>
				</div>
				<footer class="card-footer">
					<a href="/workout/create" class="card-footer-item">Create New</a>
				</footer>
			</div>
		</div>
		<div class="column is-6">
			<div class="card events-card">
				<header class="card-header">
					<p class="card-header-title">
						Recent Workouts
					</p>
				</header>
				<div class="card-table">
					<div class="content">
						<table class="table is-fullwidth is-striped">
							<tbody>
								{% for record in records %}
								<tr>
									<td>{{ record.workout.name }}</td>
									<td>{{ record.finished_nice() }}</td>
									<td class="level-right"><a class="button is-small is-primary" href="/workout/history/{{ record.id }}">View</a></td>
								</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
				</div>
				<footer class="card-footer">
					<a href="#" class="card-footer-item">View All</a>
				</footer>
			</div>
		</div>
	</div>
	<div class="columns">
		<div class="column is-4">
			<div class="card">
				<canvas id="chart-1"></canvas>
				<footer class="card-footer">
					<p class="card-footer-item">
						<span>
							Graph #1
						</span>
					</p>
				</footer>
			</div>
		</div>
		<div class="column is-4">
			<div class="card">
				<div class="card-content">
					<p class="title">
						FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER
						FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER
					</p>
				</div>
				<footer class="card-footer">
					<p class="card-footer-item">
						<span>
							Graph #2
						</span>
					</p>
				</footer>
			</div>
		</div>
		<div class="column is-4">
			<div class="card">
				<div class="card-content">
					<p class="title">
						FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER
						FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER FILLER
					</p>
				</div>
				<footer class="card-footer">
					<p class="card-footer-item">
						<span>
							Graph #3
						</span>
					</p>
				</footer>
			</div>
		</div>
	</div>
</div>
<script>

const ctx = document.getElementById('chart-1');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['01/01/22', '01/02/22', '02/01/22', '03/01/22', '04/01/22', '05/01/22', '06/01/22', '07/01/22'],
        datasets: [{
            label: 'Bench Press',
            data: [125, 145, 185, 185, 200, 205, 205],
            borderWidth: 1,
			cubicInterpolationMode: 'monotone',
			tension: 0.4,
			pointStyle: 'circle',
			pointRadius: 5,
			pointHoverRadius: 10
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

</script>
{% endblock %}