<!DOCTYPE html>
<html>
<head>
	<title>Meal planned for {{meal_date}} - KUKAPP</title>
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
	<script src="{{ url_for('static', filename='script.js') }}"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<script src="https://use.fontawesome.com/2fef7be393.js"></script>
	<style type="text/css">
		html {
			background-image: url({{url_for('static', filename='burger.jpg')}});
			background-position: left top;
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-color: #aeaeac;
			background-attachment: fixed;
		}
	</style>
</head>
<body>
	<div class="leaderboard">
		<h1 style="text-align: center">Leaderboard</h1>
		{% for person in leaderboard %}
		<div class="lb-entry">
			<img src="{{url_for('static', filename=person.name + '.png')}}">
			<span class="name">{{ person.name }}</span>
			<span class="score">{{ person.score }}</span>
		</div>
		{% endfor %}
	</div>
	<div class="right-pane">
		<h1>When: {{date}}</h1>
		<h2>Cook</h2>
		<div class="flex-card">
			{% if cook.confirmed == "no" %}
			<img src="{{url_for('static', filename='question.png')}}">
			<p>If nobody volunteers,<br><img class="flex-small-thumb" src="{{url_for('static', filename=cook.name + '.png')}}" title="{{current_user.name}}" align="middle"> will cook.</p>
			<div class="rect-button" onclick="location.href='/volunteer';" style="background-color: #EE7500;">VOLUNTEER</div>
			{% else %}
			<img src="{{url_for('static', filename= cook.name + '.png')}}">
			<span>{{ cook.name }}</span>
			<div class="rect-button" style="background-color: #8faf38; cursor: default;">CONFIRMED</div>
			{% endif %}
		</div>
		<h2>Eaters</h2>
			{% for eater in eaters %}
				<div class="flex-card">
				<img src="{{url_for('static', filename=eater + '.png')}}">
				<span>{{ eater }}</span>
			</div>
			{% endfor %}
				{% if not current_user.name in eaters %}
				<div class="flex-card" style="background: none; box-shadow: none">
					<div class="round-button" onclick="location.href='/addme';"><i class="fa fa-plus" aria-hidden="true"></i></div>
					<span>Add me</span>
				</div>
				{% else %}
				<div class="flex-card" style="background: none; box-shadow: none">
					<div class="round-button" onclick="location.href='/removeme';"><i class="fa fa-minus" aria-hidden="true"></i></div>
					<span>Remove me</span>
				</div>
				{% endif %}
		<div class="user-card">
			<img src="{{url_for('static', filename=current_user.name + '.png')}}">
			<div class="user-info">
				<span>{{current_user.name}}</span>
				<div class="rect-button" onclick="location.href='/logout';" style="background-color: #EE7500;">LOGOUT</div>
			</div>
		</div>
	</div>
</body>
</html>