{% extends "base.html" %}
{% block content %}
{% load static %}
<div class="table-container">
    <div class="table-header">
        <h2>Mou</h2>
        <input type="text" id="searchInput" class="search-box" placeholder="Search records...">
    </div>
    {% if pdf_records %}
    <table class="records-table" aria-label="PDF Records">
        <thead>
            <tr>
                <th>ID</th>
                <th>Type</th>
                <th>First Party</th>
                <th>Second Party</th>
                <th>MoU Date</th>
                <th>MoU</th>
            </tr>
        </thead>
        <tbody>
            {% for record in pdf_records %}
            <tr>
                <td>{{ record.eid }}</td>
                <td>{{ record.pdftype }}</td>
                <td>{{ record.first_party }}</td>
                <td>{{ record.second_party }}</td>
                <td>{{ record.contract_mou_date|date:"d M Y" }}</td>
                <td>
                    {% if record.res_con_mou_file %}
                    <a href="{% url 'file-download' type="resolution" filename=record.res_con_mou_file %}">Download</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Pagination -->
    <div class="pagination">
        <div class="page-links">
            {% if pdf_records.has_previous %}
                <a href="?page={{ pdf_records.previous_page_number }}" class="prev">Previous</a>
            {% endif %}
            
            <span class="current-page">{{ pdf_records.number }}</span>
            <span class="total-pages">/{{ pdf_records.paginator.num_pages }}</span>
            
            {% if pdf_records.has_next %}
                <a href="?page={{ pdf_records.next_page_number }}" class="next">Next</a>
            {% endif %}
        </div>
    </div>
{% else %}
    <p>No records found.</p>
{% endif %}
</div>

<script>
document.getElementById('searchInput').addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    const rows = document.querySelectorAll('tr');
    
    rows.forEach((row, index) => {
        // Skip the header row
        if (index === 0) {
            return;
        }
        const cells = row.cells;
        let match = false;
        
        for (let i = 0; i < cells.length; i++) {
            if (cells[i].textContent.toLowerCase().includes(searchTerm)) {
                match = true;
                break;
            }
        }
        
        row.style.display = match ? 'table-row' : 'none';
    });
});
</script>
{% endblock content %}