{% extends "base_list.html" %}
{% load static %}

{% block title %}Maloja Widgets{% endblock %}

{% block head_extra %}
<style>
    .container { margin-bottom: 100px; }
    h2 { padding-top: 20px; }
    .nav-tabs { cursor: pointer; }
    .image-wrapper { contain: content; }
    .image-wrapper :hover { background: rgba(0,0,0,0.3); }
    .caption {
        position: fixed; top: 5px; left: 5px;
        padding: 3px; font-size: 90%;
        color: white; background: rgba(0,0,0,0.4);
    }
    .caption-medium {
        position: fixed; top: 5px; left: 5px;
        padding: 3px; font-size: 75%;
        color: white; background: rgba(0,0,0,0.4);
    }
    .caption-small {
        position: fixed; top: 5px; left: 5px;
        padding: 3px; font-size: 60%;
        color: white; background: rgba(0,0,0,0.4);
    }
</style>
{% endblock %}

{% block lists %}

{% block grid_view_button %}{% endblock %}

<div class="row mb-3">
    <div class="col-12">
        <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">&larr; Full Charts</a>
        <a href="{% url 'charts:spotify-tracks' %}" class="btn btn-sm btn-outline-secondary">🎵 Spotify Tracks</a>
        <a href="{% url 'charts:bandcamp-tracks' %}" class="btn btn-sm btn-outline-secondary">🎵 Bandcamp Tracks</a>
    </div>
</div>

{% include "scrobbles/_top_charts.html" %}

{% endblock %}