{% extends "base.html" %}
{% load urlreplace %}

{% block content %}
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
    <div
        class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">{% block title %}{% endblock %} </h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            {% if user.is_authenticated %}
            <div class="btn-group me-2">
              <a href="{% url 'admin:index' %}" class="btn btn-sm btn-outline-secondary">Admin</a>
            </div>
            <div class="btn-group me-2">
              <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">Charts</a>
              <a href="{% url 'charts:spotify-tracks' %}" class="btn btn-sm btn-outline-secondary">Spotify Tracks</a>
            </div>
            {% endif %}
            <div class="btn-group me-2">
                {% if view == 'grid' %}
                <button type="button" class="btn btn-sm btn-outline-secondary"><a href="?{% urlreplace view='list' %}">List View</a>
                {% else %}
                <button type="button" class="btn btn-sm btn-outline-secondary"><a href="?{% urlreplace view='grid' %}">Grid View</a>
                {% endif %}
            </div>
            {% block charts_button %}{% endblock %}
        </div>
    </div>

    <div class="container">
        {% block lists %}{% endblock %}
    </div>
</main>
{% endblock %}