{% 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' %}">

<form action="{% url 'homepage' %}" class="form-inline my-2 mb-3 search-form">
    <div style="display: flex;">
        <input name="search" type="text" class="form-control search-input" placeholder="Search" value="{{search}}">
        <button class="btn btn-outline-success my-2 my-sm-0 ml-2" type="submit">Search</button>
    </div>
    <br>
    {% if type == "all" %}
        <input id="all" name="type" type="radio" value="all" checked>
    {% else %}
        <input id="all" name="type" type="radio" value="all">
    {% endif %}
        <label for="all" style="margin-right: 1.5rem;">All</label>
    {% if type == "watched" %}
        <input id="watched" name="type" type="radio" value="watched" checked>
    {% else %}
        <input id="watched" name="type" type="radio" value="watched">
    {% endif %}
        <label for="watched" style="margin-right: 1.5rem;">Watched</label>
    {% if type == "unwatched" %}
        <input id="unwatched" name="type" type="radio" value="unwatched" checked>
    {% else %}
        <input id="unwatched" name="type" type="radio" value="unwatched">
    {% endif %}
        <label for="unwatched">Unwatched</label>
</form>

<table class="table">
    <thead>
        <tr>
            <th scope="col">Title ({{series.paginator.count}})</th>
            <th scope="col">Watched</th>
            <th scope="col">Last</th>
            <th scope="col">Unwatched</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.watched_season}}" style="text-decoration: none;" target="_blank">
                        {{s.watched_season}} - {{s.watched_episode}}
                    </a>
                </td>
                <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>
                    {{s.new_episodes_count}}
                </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="margin-bottom: 11rem;">
    <div class="btn-new-episode">
        <button type="button" class="btn btn-outline-primary">
            <a href="/series/new-episodes/" style="text-decoration: none; color: inherit;">Update All</a>
        </button>
    </div>

    <div class="pages">
        <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&{{kwargs}}"><<</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{series.previous_page_number}}&{{kwargs}}"><</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}}&{{kwargs}}">></a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{series.paginator.num_pages}}&{{kwargs}}">>></a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

{% endblock content %}