{% extends 'common/base.html' %}
{% 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>
            {% empty %}
                <tr>
                    <td colspan="100%">No data to display</td>
                </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 crud_js %}
    <script src="{% static 'js/crud-list.js' %}"></script>
{% endblock crud_js %}


<div id="deleteModal" class="modal" style="display: none;">
    <div class="modal-content">
        <h3>Confirm Delete</h3>
        <p>Are you sure you want to delete this item?</p>
        <div class="modal-buttons">
            <button class="btn btn-secondary" id="cancelDelete">Cancel</button>
            <button class="btn btn-danger" id="confirmDelete">Delete</button>
        </div>
    </div>
</div>

{% block modal_styles %}
<style>
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .modal-content {
        position: relative;
        background-color: #EDDECB;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #a57d52;
        border-radius: 8px;
        width: 80%;
        max-width: 500px;
    }

    .modal-buttons {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }
</style>
{% endblock modal_styles %}

{% endblock content %}