{% extends 'base.html' %}
{% load static %}

{% block title %} Home Page {% endblock title %}

{% block content %}

{% include 'components/message.html' %}
<link rel="stylesheet" href="{% static 'css/homepage.css' %}">

<table class="table" style="margin-bottom: 1.5rem;">
    <thead>
        <tr>
            <th scope="col">Title ({{series.paginator.count}})</th>
            <th scope="col">Season - Episode</th>
            <th scope="col">Show</th>
        </tr>
    </thead>
    <tbody>
        {% for s in series %}
            <tr>
                <th scope="row">
                    <a href="https://www.imdb.com/title/{{s.imdb_id}}/" style="text-decoration: none;" target="_blank">
                        {{s.title}}
                    </a>
                    <br>
                    <a class="btn mr-1 update-btn" style="padding: 0;" href="{% url 'update-series' s.slug %}">
                        <img class="edit-icon" src="{% static 'icons/edit.png' %}" width="21px" height="21px">
                    </a>
                    <a class="btn delete-btn" href="{% url 'delete-series' s.slug %}">
                        <img class="trash-icon" src="{% static 'icons/trash.png' %}" width="24px" height="24px">
                    </a>
                </th>
                <td>
                    <a href="https://www.imdb.com/title/{{s.imdb_id}}/episodes?season={{s.last_season}}" style="text-decoration: none;" target="_blank">
                        {{s.last_season}} - {{s.last_episode}}
                    </a>
                </td>
                <td>
                    {% if s.show %}
                        <img src="{% static 'icons/true-check-button.png' %}" width="22px" height="22px">
                    {% else %}
                        <img src="{% static 'icons/false-check-button.png' %}" width="22px" height="22px">
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

<div style="float: left;">
    <button type="button" class="btn btn-outline-primary">
        <a href="/series/new-episodes/" style="text-decoration: none; color: inherit;">New Episodes</a>
    </button>
</div>

<div style="float: right;">
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
            {% if series.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1"><<</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{series.previous_page_number}}"><</a>
                </li>
            {% endif %}

            {% if series.paginator.count > 5 %}
                <li class="page-item"><a class="page-link" href="#">{{series.number}}</a></li>
            {% endif %}

            {% if series.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{series.next_page_number}}">></a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{series.paginator.num_pages}}">>></a>
                </li>
            {% endif %}
        </ul>
    </nav>
</div>

{% endblock content %}