{% extends base_template %}
{% load static %}

{% block content %}
{#    <div class="pagination">#}
{#        <span class="step-links">#}
{#            {% if page_obj.has_previous %}#}
{#                <a href="?page=1">&laquo; first</a>#}
{#                <a href="?page={{ page_obj.previous_page_number }}">previous</a>#}
{#            {% endif %}#}
{##}
{#            <span class="current">#}
{#                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.#}
{#            </span>#}
{##}
{#            {% if page_obj.has_next %}#}
{#                <a href="?page={{ page_obj.next_page_number }}">next</a>#}
{#                <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>#}
{#            {% endif %}#}
{#        </span>#}
{#    </div>#}
    <table id="objectTable" class="table">
        <thead>
            <tr>
                {% block table_header %}
                {% endblock table_header %}
            </tr>
        </thead>
        <tbody>
            {% for object in objects %}
                <tr class="selectable-row" data-id="{{ object.id }}">
                    <td style="display: none;"><input type="radio" name="object_select" value="{{ object.id }}"></td>
                {% block table_data %}
                {% endblock table_data %}
                </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td id="footerCell">
                    <div class="footer-container">
                        <div class="footer-left">
                            {% block buttons %}
                            {% endblock buttons %}
{#                            <button>Добави</button>#}
{#                            <button>Изтрий</button>#}
{#                            <button>Редактирай</button>#}
                        </div>
                        <div class="footer-right">
                            {% if page_obj.has_previous %}
                                <a href="?page=1">&laquo; first</a>
                                <a href="?page={{ page_obj.previous_page_number }}">previous</a>
                            {% endif %}
{#                            <button>&laquo; Назад</button>#}
                            <span class="page-number">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.</span>
                            {% if page_obj.has_next %}
                                <a href="?page={{ page_obj.next_page_number }}">next</a>
                                <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
                            {% endif %}
{#                            <button>Напред &raquo;</button>#}
                        </div>
                    </div>
                </td>
            </tr>
        </tfoot>

    </table>

    <script>
      const table = document.getElementById('objectTable');
      const headerCells = table.querySelector('thead tr').children.length;
      const footerCell = document.getElementById('footerCell');
      footerCell.colSpan = headerCells;
      {#footerCell.style.textAlign = 'center';#}
    </script>

{#    <div class="buttons-container">#}
{#        {% block buttons %}#}
{#        {% endblock buttons %}#}
{#    </div>#}

    {% block custom_styles %}
    <style>
        .selectable-row {
            cursor: pointer;
        }
        .selected-row {
            background-color: #e6f3ff;
        }
        .btn[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
    {% endblock custom_styles %}
    {% block extra_js %}
        <script src="{% static 'js/crud-list.js' %}"></script>
    {% endblock extra_js %}
    {% block custom_js %}{% endblock custom_js %}
{% endblock content %}