{% extends "base_list.html" %}
{% load form_tags %}
{% load mathfilters %}
{% load naturalduration %}
{% load static %}

{% block title %}{{object.name}}{% endblock %}

{% block lists %}

<div class="row">

<h1>
{% if object.media_type == "Video" %}🎬{% elif object.media_type == "Track" %}🎵{% elif object.media_type == "PodcastEpisode" %}🎙️{% elif object.media_type == "SportEvent" %}⚽{% elif object.media_type == "Book" %}📚{% elif object.media_type == "Paper" %}📄{% elif object.media_type == "VideoGame" %}🎮{% elif object.media_type == "BoardGame" %}🎲{% elif object.media_type == "GeoLocation" %}📍{% elif object.media_type == "Trail" %}🥾{% elif object.media_type == "Beer" %}🍺{% elif object.media_type == "Puzzle" %}🧩{% elif object.media_type == "Food" %}🍔{% elif object.media_type == "Task" %}✅{% elif object.media_type == "WebPage" %}🌐{% elif object.media_type == "LifeEvent" %}🎉{% elif object.media_type == "Mood" %}😊{% elif object.media_type == "BrickSet" %}🧱{% elif object.media_type == "Channel" %}📺{% endif %}
{% if object.media_obj.get_absolute_url %}<a href="{{ object.media_obj.get_absolute_url }}">{% endif %}{{ object.media_obj }}{% if object.media_obj.get_absolute_url %}</a>{% endif %}</h1>
{% if object.media_type == "Task" and object.logdata.title %}
<h2>{{ object.logdata.title }}</h2>
{% endif %}
<h3 class="text-muted">{{ object.local_timestamp }}</h3>
{% if object.media_type == "Task" and object.logdata.description %}
<p>{{ object.logdata.description }}</p>
{% endif %}

<p>
    Tags: 
    {% if object.tags.all %}
    {% for tag in object.tags.all %}
        <a href="{% url 'scrobbles:scrobble-list' %}?tags={{ tag.name }}" class="badge bg-secondary">{{ tag.name }}</a>
    {% endfor %}
    {% else %}
    untagged
    {% endif %}
</p>

{% with notes_html=object.logdata.notes_as_html %}
{% if notes_html %}
<div class="mb-3">
  <h5>Notes</h5>
  <div class="sticky-notes-container">
    {{ notes_html|safe }}
  </div>
</div>
{% endif %}
{% endwith %}

{% if object.logdata.avg_seconds_per_page %}
<p>Rate: {{object.logdata.avg_seconds_per_page}}s per page</p>
{% endif %}

{% if object.media_type == "BoardGame" and object.logdata.as_html %}
<div class="mb-3">
  <h5>Game Details</h5>
  {{ object.logdata.as_html|safe }}
</div>
{% endif %}

<button class="btn btn-secondary mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#editLogForm">
  Edit Log
</button>
<div class="collapse mb-3" id="editLogForm">
  <form method="post" class="needs-validation mt-3" novalidate>
    {% csrf_token %}
    {% for field in log_form %}
      <div class="mb-3">
        <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
        {{ field|add_class:"form-control" }}
        {% if field.help_text %}
          <div class="form-text">{{ field.help_text }}</div>
        {% endif %}
        {% for error in field.errors %}
          <div class="invalid-feedback d-block">{{ error }}</div>
        {% endfor %}
      </div>
    {% endfor %}

    <button type="submit" class="btn btn-primary">Save</button>
  </form>
</div>

<h2 class="mt-4">All scrobbles of this {{ object.media_type|lower }}</h2>
{% if related_scrobbles %}
<p class="text-muted">{{ related_scrobbles.paginator.count }} scrobble{{ related_scrobbles.paginator.count|pluralize }}</p>
<table class="table table-striped table-sm">
    <thead>
        <tr>
            <th scope="col">Date</th>
            <th scope="col">Title</th>
            <th scope="col">Time</th>
        </tr>
    </thead>
    <tbody>
        {% for scrobble in related_scrobbles %}
        <tr{% if scrobble.id == object.id %} class="table-active fw-bold"{% endif %}>
            <td>{% if scrobble.id == object.id %}{{ scrobble.timestamp|date:"M d, Y" }}{% else %}<a href="{% url 'scrobbles:detail' scrobble.uuid %}">{{ scrobble.timestamp|date:"M d, Y" }}</a>{% endif %}</td>
            <td>
                {% if scrobble.media_type == "Task" and scrobble.logdata.title %}{{ scrobble.media_obj.title }}: {{ scrobble.logdata.title }}{% else %}{{ scrobble.media_obj.title|default:scrobble.media_obj }}{% endif %}
            </td>
            <td>
                {% if scrobble.playback_position_seconds %}{{ scrobble.playback_position_seconds|natural_duration }}{% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% if related_scrobbles.has_other_pages %}
<nav>
    <ul class="pagination">
        {% if related_scrobbles.has_previous %}
        <li class="page-item"><a class="page-link" href="?page={{ related_scrobbles.previous_page_number }}">Previous</a></li>
        {% else %}
        <li class="page-item disabled"><span class="page-link">Previous</span></li>
        {% endif %}

        {% for num in related_scrobbles.paginator.page_range %}
            {% if related_scrobbles.number == num %}
            <li class="page-item active"><span class="page-link">{{ num }}</span></li>
            {% elif num > related_scrobbles.number|add:'-3' and num < related_scrobbles.number|add:'3' %}
            <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
            {% endif %}
        {% endfor %}

        {% if related_scrobbles.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ related_scrobbles.next_page_number }}">Next</a></li>
        {% else %}
        <li class="page-item disabled"><span class="page-link">Next</span></li>
        {% endif %}
    </ul>
</nav>
{% endif %}

{% else %}
<p class="text-muted">No other scrobbles of this media.</p>
{% endif %}

</div>

{% endblock %}

{% block extra_js %}{{ block.super }}{{ log_form.media }}{% endblock %}