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

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

{% block head_extra %}
<style>
    .cover   {float:left; width:412px; margin-right:10px; padding-bottom:15px;}
    .image-wrapper { contain: content; }
    .caption {
        position: fixed;
        top: 15px;
        left: 30px;
        padding: 5px;
        font-size: 110%;
        font-weight: bold;
        color:white;
        background:rgba(0,0,0,0.4);
    }
    .caption-footer {
        position: fixed;
        bottom: 30px;
        left: 30px;
        padding: 5px;
        font-size: 110%;
        font-weight: bold;
        color:white;
        background:rgba(0,0,0,0.4);
    }
    .summary {
        float: left;
        width: 600px;
        margin-left: 10px;
    }
</style>
{% endblock %}

{% block lists %}

<div class="row">
    {% if object.primary_image_url %}
    <div class="cover image-wrapper">
        {% if object.rating %}<div class="caption">{{object.rating}}</div>{% endif %}
        <img src="{{object.primary_image_url}}" />
        <div class="caption-footer">{{object.release_year}}</div>
    </div>
    {% endif %}
    <div class="summary">
        {% if object.summary %}
        <p>{{object.summary|safe|linebreaks|truncatewords:160}}</p>
        <hr />
        {% endif %}
        <p style="float:right;">
            <a href="{{object.igdb_link}}"><img src="{% static "images/igdb-logo.png" %}" width=35></a>
            <a href="{{object.hltb_link}}"><img style="background: black;" src="{% static "images/hltb.webp" %}" width=35></a>
        </p>
    </div>
</div>
<div class="row">
    <p>
        {{scrobbles.count}} scrobbles
        {% if long_play_total_seconds %} | Total time: {{ long_play_total_seconds|natural_duration }}{% endif %}
        {% if long_play_finished_date %} | Finished: {{ long_play_finished_date|date:"M d, Y" }}{% endif %}
    </p>
    <p>
        <a href="">Play again</a>
    </p>
</div>
<div class="row">
    <div class="col-md">
        <h3>Last scrobbles</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Date</th>
                        <th scope="col">Completed</th>
                        <th scope="col">Duration</th>
                        <th scope="col">Platforms</th>
                        <th scope="col">State file</th>
                    </tr>
                </thead>
                <tbody>
                    {% for scrobble in scrobbles.all|dictsortreversed:"timestamp" %}
                    <tr>

                        <td><a href="{{scrobble.get_absolute_url}}">{{scrobble.local_timestamp}}</a></td>
                        <td>{% if scrobble.long_play_complete == True %}Yes <small><a href="{% url 'scrobbles:longplay-finish' media_uuid=scrobble.uuid %}">(not complete?)</a></small>{% else %}<a href="{% url 'scrobbles:longplay-finish' media_uuid=scrobble.uuid %}">Not yet</a>{% endif %}</td>
                        <td>{% if scrobble.in_progress %}Now playing{% else %}{{scrobble.playback_position_seconds|natural_duration}}{% endif %}</td>
                        <td>{% for platform in scrobble.video_game.platforms.all %}<a href="{{platform.get_absolute_url}}">{{platform}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}</td>
                        <td>{% if scrobble.videogame_save_data %}<a href="{{scrobble.videogame_save_data.url}}">Save data</a>{% else %}Not yet{% endif %}</td>
                        <td>{% if scrobble.screenshot%}<img src="{{scrobble.screenshot.url}}" width=250 />{% endif %}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}