{% extends "abstracts/base.jinja" %}
{% block title %}Maloja - {{ info.album.albumtitle }}{% endblock %}

{% import 'snippets/links.jinja' as links %}

{% block scripts %}
	<script src="/rangeselect.js"></script>
	<script src="/edit.js"></script>
{% endblock %}

{% set album = filterkeys.album %}
{% set info = dbc.album_info({'album':album}) %}

{% set initialrange ='month' %}


{% set encodedalbum = mlj_uri.uriencode({'album':album}) %}


{% block icon_bar %}
	{% if adminmode %}
		{% include 'icons/edit.jinja' %}
		{% include 'icons/merge.jinja' %}
		{% include 'icons/merge_mark.jinja' %}
		{% include 'icons/merge_cancel.jinja' %}
		<script>showValidMergeIcons();</script>
	{% endif %}
{% endblock %}

{% block content %}

<script>
	const entity_id = {{ info.id }};
	const entity_type = 'album';
	const entity_name = {{ album.albumtitle | tojson }};
</script>


{% import 'partials/awards_album.jinja' as awards %}


<table class="top_info">
	<tr>
		<td class="image">
			{% if adminmode %}
			<div
				class="changeable-image" data-uploader="b64=>upload('{{ encodedalbum }}',b64)"
				style="background-image:url('{{ images.get_album_image(info.album) }}');"
				title="Drag & Drop to upload new image"
			></div>
			{% else %}
			<div style="background-image:url('{{ images.get_album_image(info.album) }}');">
			</div>
			{% endif %}
		</td>
		<td class="text">
			<span>{{ links.links(album.artists) }}</span><br/>
			<h1 id="main_entity_name" class="headerwithextra">{{ info.album.albumtitle | e }}</h1>
				{# awards.certs(album) #}
				<span class="rank"><a href="/charts_albums?max=100">#{{ info.position }}</a></span>
				<br/>

			<p class="stats">
				<a href="{{ mlj_uri.create_uri("/scrobbles",filterkeys) }}">{{ info['scrobbles'] }} Scrobbles</a>
			</p>





			{{ awards.medals(info) }}
			{{ awards.topweeks(info) }}


		</td>
	</tr>
</table>

<h2><a href='{{ mlj_uri.create_uri("/charts_tracks",filterkeys) }}'>Top Tracks</a></h2>


{% with amountkeys={"perpage":16,"page":0} %}
{% include 'partials/charts_tracks.jinja' %}
{% endwith %}

<br/>


<table class="twopart">

	<tr>
		<td>
			<h2 class="headerwithextra"><a href='{{ mlj_uri.create_uri("/pulse",filterkeys) }}'>Pulse</a></h2>
			<br/>
			{% for r in xranges %}
			<span
				onclick="showRangeManual('pulse','{{ r.identifier }}')"
				class="stat_selector_pulse selector_pulse_{{ r.identifier }}"
				style="{{ 'opacity:0.5;' if initialrange==r.identifier else '' }}">
				{{ r.localisation }}
			</span>
			{% if not loop.last %}|{% endif %}
			{% endfor %}

      		<br/><br/>

			{% for r in xranges %}

			<span
				class="stat_module_pulse pulse_{{ r.identifier }}"
				style="{{ 'display:none;' if initialrange!=r.identifier else '' }}"
				>

			{% with limitkeys={"since":r.firstrange},delimitkeys={'step':r.identifier,'trail':1} %}
			{% include 'partials/pulse.jinja' %}
			{% endwith %}
			</span>

			{% endfor %}
		</td>
		<td>
			<!-- We use the same classes / function calls here because we want it to switch together with pulse -->
			<h2 class="headerwithextra"><a href='{{ mlj_uri.create_uri("/performance",filterkeys) }}'>Performance</a></h2>
			<br/>
			{% for r in xranges %}
				<span
					onclick="showRangeManual('pulse','{{ r.identifier }}')"
					class="stat_selector_pulse selector_pulse_{{ r.identifier }}"
					style="{{ 'opacity:0.5;' if initialrange==r.identifier else '' }}">
					{{ r.localisation }}
				</span>
				{% if not loop.last %}|{% endif %}
			{% endfor %}

      		<br/><br/>

			{% for r in xranges %}

			<span
				class="stat_module_pulse pulse_{{ r.identifier }}"
				style="{{ 'display:none;' if initialrange!=r.identifier else '' }}"
				>

			{% with limitkeys={"since":r.firstrange},delimitkeys={'step':r.identifier,'trail':1} %}
			{% include 'partials/performance.jinja' %}
			{% endwith %}
			</span>

			{% endfor %}

		</td>
	</tr>
</table>


<h2><a href='{{ mlj_uri.create_uri("/scrobbles",filterkeys) }}'>Last Scrobbles</a></h2>

{% with amountkeys = {"perpage":16,"page":0} %}
{% include 'partials/scrobbles.jinja' %}
{% endwith %}


{% endblock %}
