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


{% block content %}

{% block filter %}
{% endblock filter %}

    <table id="objectTable" class="table" data-selection-mode=
            {% block selection %}
             "single"
            {% endblock selection%}>
        <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="checkbox" 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 id="toggleSelectAllBtn" class="btn btn-secondary" style="display: none;">Select All</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 %}
                            <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 %}
                        </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>

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