{% extends "base_list.html" %}
{% block title %}Videos{% endblock %}
{% block head_extra %}
<style>
  dl {
    width: 210px;
    float: left;
    margin-right: 10px;
  }
  dt a {
    color: white;
    text-decoration: none;
    font-size: smaller;
  }
  img {
    height: 200px;
    width: 200px;
    object-fit: cover;
  }
  dd .right {
    float: right;
  }
</style>
{% endblock %}

{% block lists %}
{% if videos_this_week or videos_this_month or channels_this_week or channels_this_month %}
<div class="row">
    {% if videos_this_week or videos_this_month %}
    <div class="col-md">
        <h2>Movies Watched</h2>

        {% if videos_this_week %}
        <h3>This Week</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <tbody>
                    {% for scrobble in videos_this_week %}
                    <tr>
                        <td><a href="{{scrobble.video.get_absolute_url}}">{{scrobble.video}}</a></td>
                        <td>{{scrobble.timestamp|date:"N d"}}</td>
                    </tr>
                    {% empty %}
                    <tr><td>No movies watched this week</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}

        {% if videos_this_month %}
        <h3>This Month</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <tbody>
                    {% for scrobble in videos_this_month %}
                    <tr>
                        <td><a href="{{scrobble.video.get_absolute_url}}">{{scrobble.video}}</a></td>
                        <td>{{scrobble.timestamp|date:"N d"}}</td>
                    </tr>
                    {% empty %}
                    <tr><td>No movies watched this month</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
    {% endif %}

    {% if channels_this_week or channels_this_month %}
    <div class="col-md">
        <h2>YouTube Channels</h2>

        {% if channels_this_week %}
        <h3>This Week</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <tbody>
                    {% for item in channels_this_week %}
                    <tr>
                        <td>{{item.channel}}</td>
                        <td>{{item.count}} videos</td>
                    </tr>
                    {% empty %}
                    <tr><td>No YouTube videos watched this week</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}

        {% if channels_this_month %}
        <h3>This Month</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <tbody>
                    {% for item in channels_this_month %}
                    <tr>
                        <td>{{item.channel}}</td>
                        <td>{{item.count}} videos</td>
                    </tr>
                    {% empty %}
                    <tr><td>No YouTube videos watched this month</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endif %}

<div class="row">
  <div class="col-md">
    <div class="table-responsive">{% include "_scrobblable_list.html" %}</div>
  </div>
</div>
{% endblock %}