{% extends 'base.html' %}

{% block title %}music{% endblock %}

{% block content %}

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

	<div class="index-article">
		<div class="index-hero-grid">
			<div class="card index-into-card">
				<div>
					<p class="center-text">A set of tools using Spotify and Last.fm to create smart playlists and calculate listening statistics</p>
					<p class="center-text">Playlists are updated multiple times a day to keep tracks up to date</p>

					<p class="center-text">Written in Python and Javascript, based on the <a href="https://github.com/Sarsoo/spotframework">spotframework</a> and <a href="https://github.com/Sarsoo/pyfmframework">fmframework</a> libraries</p>
				</div>

				<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px">
					<a class="button" style="width: 100%" href="https://github.com/Sarsoo/Mixonomer">View Source</a>
					<a class="button" style="width: 100%" href="https://github.com/Sarsoo/Mixonomer-iOS">iOS Client Source</a>
				</div>
			</div>

			{% if not logged_in %}

			{% block form %}{% endblock %}

			{% endif %}
		</div>

		<div class="index-feature-grid">
			<div class="card">
				<h1 class="center-text">Sources</h1>
				<p>Create smart Spotify playlists pulling tracks from</p>
				<ul style="text-align:left" >
					<li style="padding:10px">Spotify Playlists</li>
					<li style="padding:10px">Spotify Library Tracks</li>
					<li style="padding:10px">Mixonomer Playlists</li>
				</ul>
			</div>
			<div class="card">
				<h1 class="center-text">Currents</h1>
				<p>Currents are mix playlists acting as a snapshot of what's being listened to at the moment</p>
				<p>Includes date filtering on playlist sources for recently added tracks</p>
				<p>Optionally search for and include "monthly" playlists for the last two months when named e.g february 20</p>
			</div>
			<div class="card">
				<h1 class="center-text">Last.fm Charts</h1>
				<p>Create playlists including Last.fm track charts of varying length and time range</p>
			</div>
			<div class="card">
				<h1 class="center-text">Recommendations</h1>
				<p>Include Spotify recommendations based on the other tracks of the playlist</p>
			</div>
			<div class="card">
				<h1 class="center-text">Last.fm Integration</h1>
				<p>Create groups of entries for scrobble summing and listening stats</p>
			</div>
			<div class="card">
				<h1 class="center-text">Visualise Data</h1>
				<p>Present listening trends with pie charts</p>
			</div>
		</div>
	</div>

{% endblock %}