{% extends 'base.html' %}

{% block title %}spotify{% endblock %}

{% block content %}

	{% with messages = get_flashed_messages() %}
		{% if messages %}
			{% for message in messages %}
				<div class="row card pad-12">
					<p class="center-text" style="color: red">{{ message }}</p>
				</div>
			{% endfor %}
		{% endif %}
	{% endwith %}

	<div class="row">
		<div class="pad-9 card">
			<h1>Spotify Playlist Manager</h1>

			<p class="center-text">create "super-playlists" of smaller modular playlists</p>

			<a class="button full-width" href="/app">launch</a>
		</div>
		<div class="pad-3 card">
			<h1 class="sectiontitle">login</h1>

			<form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()">
				<p class="center-text">username<br><input type="text" name="username" class="full-width"></p>
				<p class="center-text">password<br><input type="password" name="password" class="full-width"></p>
				<p id="status" style="display: none; color: red" class="center-text"></p>

				<button class="full-width" onclick="handleLogin()" type="submit">go</button>
			</form>
			<script src="{{ url_for('static', filename='js/login.bundle.js') }}"></script>
		</div>
	</div>
{% endblock %}