{% extends "base.html" %}

{% block title %}Conversations{% endblock %}

{% block content %}
<div class="dashboard-box">
    
    <div class="dashboard-title"><i class="fa-solid fa-comments"></i> Conversations</div>
    
    <table>
        <tr>
            <th>Phone</th><th>Call Started</th><th>Duration</th><th>Call Status</th><th>Client Status</th>
        </tr>
        {% for msg in messages %}
        <tr>
            <td>{{ msg.phone_number }}</td>
            <td>{{ msg.call_started_at }}</td>
            <td>{{ msg.call_duration_seconds }}</td>
            <td>{{ msg.call_status }}</td>
            <td>{{ msg.client_status }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="5" style="text-align:center;">No messages found.</td></tr>
        {% endfor %}
    </table>

    <div class="pagination">
        {% if messages.has_previous %}
            <a href="?page=1">First</a>
            <a href="?page={{ messages.previous_page_number }}">Previous</a>
        {% else %}
            <span class="disabled">First</span>
            <span class="disabled">Previous</span>
        {% endif %}
        
        <span class="current">Page {{ messages.number }} of {{ messages.paginator.num_pages }}</span>

        {% if messages.has_next %}
            <a href="?page={{ messages.next_page_number }}">Next</a>
            <a href="?page={{ messages.paginator.num_pages }}">Last</a>
        {% else %}
            <span class="disabled">Next</span>
            <span class="disabled">Last</span>
        {% endif %}
    </div>
</div>
{% endblock %}