{% extends "base.html" %}
{% load humanize %}
{% load naturalduration %}

{% block page_title %}{{ blog_user.username }}'s blog{% endblock %}

{% 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">{{ blog_user.username }}'s Blog</h1>
    </div>

    {% if not object_list %}
    <p class="text-muted">No blog entries yet.</p>
    {% endif %}

    <div class="blog-entries">
        {% for scrobble in object_list %}
        <article class="blog-entry mb-5 pb-4 border-bottom">
            <header class="blog-entry-header mb-3">
                <small class="text-muted">{{ scrobble.local_timestamp|date:"F j, Y, g:i a" }}</small>
                <h3 class="mb-1">
                    {% if scrobble.video %}
                    🎬
                    {% elif scrobble.track %}
                    🎵
                    {% elif scrobble.podcast_episode %}
                    🎙️
                    {% elif scrobble.sport_event %}
                    ⚽
                    {% elif scrobble.book %}
                    📖
                    {% elif scrobble.paper %}
                    📄
                    {% elif scrobble.video_game %}
                    🎮
                    {% elif scrobble.board_game %}
                    🎲
                    {% elif scrobble.geo_location %}
                    📍
                    {% elif scrobble.trail %}
                    🥾
                    {% elif scrobble.beer %}
                    🍺
                    {% elif scrobble.wine %}
                    🍷
                    {% elif scrobble.coffee %}
                    ☕
                    {% elif scrobble.puzzle %}
                    🧩
                    {% elif scrobble.food %}
                    🍔
                    {% elif scrobble.task %}
                    ✅
                    {% elif scrobble.web_page %}
                    🌐
                    {% elif scrobble.life_event %}
                    🎉
                    {% elif scrobble.mood %}
                    😊
                    {% elif scrobble.brick_set %}
                    🧱
                    {% else %}
                    📌
                    {% endif %}
                    <a href="{{ scrobble.get_absolute_url }}">{{ scrobble.media_obj }}</a>
                </h3>
                <small class="text-muted">
                    {% if scrobble.media_type == "Video" %}
                    Video
                    {% elif scrobble.media_type == "Track" %}
                    Track{% if scrobble.track.artist_fk %} by {{ scrobble.track.artist_fk }}{% endif %}
                    {% elif scrobble.media_type == "PodcastEpisode" %}
                    Podcast
                    {% elif scrobble.media_type == "Book" %}
                    Book{% if scrobble.book.author %} by {{ scrobble.book.author }}{% endif %}
                    {% elif scrobble.media_type == "VideoGame" %}
                    Video Game
                    {% elif scrobble.media_type == "BoardGame" %}
                    Board Game
                    {% elif scrobble.media_type == "Beer" %}
                    Beer{% if scrobble.beer.producer %} by {{ scrobble.beer.producer }}{% endif %}
                    {% elif scrobble.media_type == "Wine" %}
                    Wine{% if scrobble.wine.producer %} by {{ scrobble.wine.producer }}{% endif %}
                    {% elif scrobble.media_type == "Coffee" %}
                    Coffee{% if scrobble.coffee.roaster %} by {{ scrobble.coffee.roaster }}{% endif %}
                    {% elif scrobble.media_type == "Food" %}
                    Food
                    {% elif scrobble.media_type == "Trail" %}
                    Trail
                    {% elif scrobble.media_type == "GeoLocation" %}
                    Location
                    {% elif scrobble.media_type == "SportEvent" %}
                    Sport
                    {% elif scrobble.media_type == "LifeEvent" %}
                    Life Event
                    {% elif scrobble.media_type == "Mood" %}
                    Mood
                    {% elif scrobble.media_type == "Task" %}
                    Task
                    {% elif scrobble.media_type == "WebPage" %}
                    Web Page
                    {% elif scrobble.media_type == "Puzzle" %}
                    Puzzle
                    {% elif scrobble.media_type == "BrickSet" %}
                    Brick Set
                    {% elif scrobble.media_type == "Paper" %}
                    Paper
                    {% else %}
                    {{ scrobble.media_type }}
                    {% endif %}
                </small>
            </header>
            <div class="blog-entry-content">
                {% with notes_html=scrobble.logdata.notes_as_html %}
                {% if notes_html %}
                {{ notes_html|safe }}
                {% endif %}
                {% endwith %}
            </div>
        </article>
        {% empty %}
        <p class="text-muted">No blog entries yet.</p>
        {% endfor %}
    </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 }}">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 }}">Next</a></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</main>

<style>
.blog-entry-content h1,
.blog-entry-content h2,
.blog-entry-content h3,
.blog-entry-content h4,
.blog-entry-content h5,
.blog-entry-content h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.blog-entry-content p {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}
.blog-entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.blog-entry-content blockquote {
    border-left: 3px solid #dee2e6;
    padding-left: 1rem;
    color: #6c757d;
}
.blog-entry-content hr.note-divider {
    margin: 0.5rem 0;
}
</style>
{% endblock %}