{% extends 'booru/base.html' %}

{% block css %}
    {% load staticfiles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
            <h1>Tag: <a href="{% url 'booru:tag_detail' tag.id %}">{{tag}}</a></h1>
        </div>

        <div class="row mt-3 mb-3">            
            <form class="col" method="get" action="{% url 'booru:tag_revision_diff' tag.id %}" enctype="multipart/form-data">
                <div id="table">
                    <table class="table table-striped text-center">
                        <thead>
                            <tr>
                                <th scope="col"> </th>
                                <th scope="col">Version</th>
                                <th scope="col">Last edited</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for version in page.object_list %}
                            <tr>
                                <th scope="row">
                                    diff
                                    <input class="" type="radio" name="oldRevision" id="oldRevisionOption{{version.history_id}}" value="{{version.history_id}}" checked>
                                    <input class="" type="radio" name="newRevision" id="newRevisionOption{{version.history_id}}" value="{{version.history_id}}" checked>
                                </th>
                                <td>
                                    <a href="{% url 'booru:tag_revision_diff' tag.id %}?oldRevision={{version.history_id}}&newRevision={{version.history_id}}">
                                        {{version.name}}
                                    </a>
                                </td>
                                <td>
                                    {{version.history_date}} by
                                    <a href="{% url 'booru:profile' version.history_user %}">{{version.history_user}}</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <button type="submit" class="btn btn-primary">See differences</button>
            </form>
        </div>

        <nav aria-label="..." class="mt-5">
            <ul class="pagination">
                {% if page.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="{% url 'booru:tag_history' tag.id page.previous_page_number %}" tabindex="-1">Previous</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">Previous</a>
                    </li>
                {% endif %}
                {% for i in page.paginator.page_range %}
                    {% if page.number == i %}
                    <li class="page-item active">
                        <a class="page-link" href="{% url 'booru:tag_history' tag.id i %}">{{i}} <span class="sr-only">(current)</span></a>
                    </li>
                    {% elif i > page.number|add:'-3' and i < page.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="{% url 'booru:tag_history' tag.id i %}">{{i}}</a>
                    </li>
                    {% endif %}
                {% endfor %}
                {% if page.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{% url 'booru:tag_history' tag.id page.next_page_number %}">Next</a>
                    </li>
                {% else %}                        
                    <li class="page-item disabled">
                        <a class="page-link" href="#">Next</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
{% endblock %}