{% extends "layout.html" %}
{% import "macros/numbers.html" as numbers %}


{% block body %}
    <div class="panel">
        <table class="list list-calls">
            {% for call in calls.list %}
            <tr>
                <td class="list-icon">
                    <i class="ion-android-call {% if call.status == "completed" %}text-success{% else %}text-error{% endif %}"></i>
                    {% if call.direction == "outbound" %}
                    <i class="ion-android-arrow-forward secondary"></i>
                    {% else %}
                    <i class="ion-android-arrow-back secondary"></i>
                    {% endif %}
                </td>
                <td>
                    {{ numbers.item(call.from) }}
                    {% if call.forwardedFrom %}
                    <p class="help">Forwarded by {{ numbers.item(call.forwardedFrom) }}</p>
                    {% endif %}
                </td>
                <td>{{ numbers.item(call.to) }}</td>
                <td>{{ call.startTime|relativeDate }}</td>
                <td>{{ call.duration }}s</td>
            </tr>
            {% endfor %}
        </table>
    </div>
{% endblock %}
{% extends "layout.html" %}
{% import "macros/numbers.html" as numbers %}


{% block body %}
    <div class="panel">
        <table class="list list-calls">
            {% for call in calls.list %}
            <tr>
                <td class="list-icon">
                    <div class="tooltip" title="{{ call.direction|capitalize }} call, {{ call.status|capitalize }}">
                        <i class="ion-android-call {% if call.status == "completed" %}text-success{% else %}text-error{% endif %}"></i>
                        {% if call.direction == "outbound" %}
                        <i class="ion-android-arrow-forward secondary"></i>
                        {% else %}
                        <i class="ion-android-arrow-back secondary"></i>
                        {% endif %}
                    </div>
                </td>
                <td>
                    {{ numbers.item(call.from) }}
                    {% if call.forwardedFrom %}
                    <p class="help">Forwarded by {{ numbers.item(call.forwardedFrom) }}</p>
                    {% endif %}
                </td>
                <td>{{ numbers.item(call.to) }}</td>
                <td>{{ call.startTime|relativeDate }}</td>
                <td>{{ call.duration }}s</td>
            </tr>
            {% endfor %}
        </table>
    </div>
{% endblock %}
Add tooltip for call status and direction
Add tooltip for call status and direction
