{% load humanize %}
{% load naturalduration %}
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" hx-get="{% url 'scrobbles:scrobble-list' %}{% if request.META.QUERY_STRING %}?{{ request.META.QUERY_STRING }}{% endif %}" hx-trigger="every 7s" hx-swap="outerHTML">
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <div>
            <h1 class="h2">All Scrobbles</h1>
            {% if tag_list %}
            <h6 class="text-muted">Tagged {{ tag_list|join:", " }}</h6>
            {% if total_time_seconds %}
            <p class="text-muted small mb-0">Total time: {{ total_time_seconds|natural_duration }}</p>
            {% endif %}
            {% endif %}
            {% if request.GET.visibility %}
            <h6 class="text-muted">Filter: {{ request.GET.visibility|title }} scrobbles only</h6>
            {% endif %}
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-sm">
            <thead>
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Type</th>
                    <th scope="col">Title</th>
                    <th scope="col">Time</th>
                </tr>
            </thead>
            <tbody>
                {% for scrobble in object_list %}
                <tr class="{% if scrobble.id in overlap_map %}{{ overlap_map.scrobble.id }}{% endif %}">
                    <td>
                        {% if scrobble.id in overlap_map %}⏱ {% endif %}
                        <a href="{{scrobble.get_absolute_url}}">{{ scrobble.timestamp|naturaltime }}</a>
                    </td>
                    <td>
                        {% if scrobble.video %}
                        🎬 Video
                        {% elif scrobble.track %}
                        🎵 Track
                        {% elif scrobble.podcast_episode %}
                        🎙️ Podcast episode
                        {% elif scrobble.sport_event %}
                        ⚽ Sport event
                        {% elif scrobble.book %}
                        📖 Book
                        {% elif scrobble.paper %}
                        📄 Paper
                        {% elif scrobble.video_game %}
                        🎮 Video game
                        {% elif scrobble.board_game %}
                        🎲 Board game
                        {% elif scrobble.geo_location %}
                        📍 GeoLocation
                        {% elif scrobble.trail %}
                        🥾 Trail
                        {% elif scrobble.beer %}
                        🍺 Beer
                        {% elif scrobble.puzzle %}
                        🧩 Puzzle
                        {% elif scrobble.food %}
                        🍔 Food
                        {% elif scrobble.task %}
                        ✅ Task
                        {% elif scrobble.web_page %}
                        🌐 Web Page
                        {% elif scrobble.life_event %}
                        🎉 Life event
                        {% elif scrobble.mood %}
                        😊 Mood
                        {% elif scrobble.brick_set %}
                        🧱 Brick set
                        {% elif scrobble.channel %}
                        📺 Channel
                        {% else %}
                        Unknown
                        {% endif %}
                    </td>
                    <td>
                        {% if scrobble.video %}
                        <a href="{% url 'videos:video_detail' scrobble.video.uuid %}">{{ scrobble.video.title }}</a>
                        {% elif scrobble.track %}
                        <a href="{% url 'music:track_detail' scrobble.track.uuid %}">{{ scrobble.track.title }}</a>
                        {% elif scrobble.video_game %}
                        <a href="{% url 'videogames:videogame_detail' scrobble.video_game.uuid %}">{{ scrobble.video_game.title }}</a>
                        {% elif scrobble.book %}
                        <a href="{% url 'books:book_detail' scrobble.book.uuid %}">{{ scrobble.book.title }}</a>
                        {% elif scrobble.food %}
                        <a href="{% url 'foods:food_detail' scrobble.food.uuid %}">{{ scrobble.food.title }}</a>
                        {% elif scrobble.beer %}
                        <a href="{% url 'drinks:beer_detail' scrobble.beer.uuid %}">{{ scrobble.beer.title }}</a>
                        {% elif scrobble.wine %}
                        <a href="{% url 'drinks:wine_detail' scrobble.wine.uuid %}">{{ scrobble.wine.title }}</a>
                        {% elif scrobble.coffee %}
                        <a href="{% url 'drinks:coffee_detail' scrobble.coffee.uuid %}">{{ scrobble.coffee.title }}</a>
                        {% elif scrobble.drink %}
                        <a href="{% url 'drinks:drink_detail' scrobble.drink.uuid %}">{{ scrobble.drink.title }}</a>
                        {% elif scrobble.water %}
                        <a href="{% url 'drinks:water_detail' scrobble.water.uuid %}">{{ scrobble.water.title }}</a>
                        {% elif scrobble.web_page %}
                        <a href="{% url 'webpages:webpage_detail' scrobble.web_page.uuid %}">{{ scrobble.web_page.title }}</a>
                        {% elif scrobble.podcast_episode %}
                        <a href="{% url 'podcasts:podcast_detail' scrobble.podcast_episode.podcast.id %}">{{ scrobble.podcast_episode.title }}</a>
                        {% elif scrobble.board_game %}
                        <a href="{% url 'boardgames:boardgame_detail' scrobble.board_game.uuid %}">{{ scrobble.board_game.title }}</a>
                        {% elif scrobble.trail %}
                        <a href="{% url 'trails:trail_detail' scrobble.trail.uuid %}">{{ scrobble.trail.title }}</a>
                        {% elif scrobble.puzzle %}
                        <a href="{% url 'puzzles:puzzle_detail' scrobble.puzzle.uuid %}">{{ scrobble.puzzle.title }}</a>
                        {% elif scrobble.brick_set %}
                        <a href="{% url 'bricksets:brickset_detail' scrobble.brick_set.uuid %}">{{ scrobble.brick_set.title }}</a>
                        {% elif scrobble.task %}
                        <a href="{% url 'tasks:task_detail' scrobble.task.uuid %}">{{scrobble.media_obj}}{% if scrobble.log.title  %} - {{ scrobble.log.title }}{% endif %}</a>
                        {% elif scrobble.life_event %}
                        <a href="{% url 'lifeevents:lifeevent_detail' scrobble.life_event.uuid %}">{{ scrobble.life_event.title }}</a>
                        {% elif scrobble.mood %}
                        <a href="{% url 'moods:mood_detail' scrobble.mood.uuid %}">{{ scrobble.mood.title}}</a>
                        {% elif scrobble.geo_location %}
                        <a href="{% url 'locations:geolocation_detail' scrobble.geo_location.uuid %}">{{ scrobble.geo_location.title }}</a>
                        {% else %}
                        Unknown
                        {% endif %}
                    </td>
                    <td>
                        {% if scrobble.in_progress and not scrobble.played_to_completion %}
                        In progress ...
                        {% elif scrobble.playback_position_seconds %}
                        {{ scrobble.playback_position_seconds|natural_duration }}
                        {% endif %}
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4">No scrobbles found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if page_obj.has_previous or page_obj.has_next %}
    <nav>
        <ul class="pagination">
            {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if tags_param %}&tags={{ tags_param }}{% endif %}">Previous</a></li>
            {% endif %}
            <li class="page-item"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
            {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% if tags_param %}&tags={{ tags_param }}{% endif %}">Next</a></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</main>
