{% extends request.is_ajax|yesno:'nullcont.htm,ext.html' %}
{% load i18n telephone_filters %}
{% block content %}
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>{% trans 'Play' %}</th>
                <th>{% trans 'calldate' %}</th>
                <th>{% trans 'src' %}</th>
                <th>{% trans 'dst' %}</th>
                <th>{% trans 'duration' %}</th>
                <th>{% trans 'start' %}</th>
                <th>{% trans 'answer' %}</th>
                <th>{% trans 'end' %}</th>
                <th>{% trans 'disposition' %}</th>
            </tr>
            <tr>
                <th colspan="9">
                    <form class="form-inline" action="{% url 'dialapp:vfilter' %}" method="get">
                        <div class="form-group">
                            <label class="sr-only" for="dialsearch">{% trans 'Find dials' %}</label>
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control" id="dialsearch" placeholder="{% trans 'Telephone' %}" name="s"{% if s %} value="{{ s }}"{% endif %}>
                                <div class="input-group-btn">
                                    <button class="btn btn-default" type="submit">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="dialtime">{% trans 'Find by dates' %}</label>
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control" id="dialtime" placeholder="{% trans 'calldate' %}" name="sd"{% if sd %} value="{{ sd }}"{% endif %}>
                                <script type="text/javascript">
                                    $(function () {
                                        $('#dialtime').datetimepicker({
                                            format: 'YYYY-MM-DD'
                                        });
                                    });
                                </script>
                                <div class="input-group-btn">
                                    <button class="btn btn-default" type="submit">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </th>
            </tr>
            </thead>
            <tbody>
            {% for log in logs %}
            <tr>
                {% with lurl=log.url %}
                    <td class="btn-group btn-group-xs btn-group-justify">
                        <button class="btn btn-default player-btn disabled">
                            <span class="glyphicon glyphicon-play"></span>
                            <audio preload="metadata" src="{{ lurl|default:'#' }}"></audio>
                        </button>
                        <a href="{{ lurl|default:'#' }}" class="btn btn-default disabled" target="_blank" title="{% trans 'Download' %}">
                            <span class="glyphicon glyphicon-download-alt"></span>
                        </a>
                    </td>
                    <td>{{ log.calldate|date:'d M, H:i:s' }}</td>
                    <td>{{ log.src|abon_if_telephone|safe }}</td>
                    <td>{{ log.dst|abon_if_telephone|safe }}</td>
                    <td>{{ log.duration }}</td>
                    <td>{{ log.start|date:'d M, H:i:s' }}</td>
                    <td>{{ log.answer|date:'d M, H:i:s' }}</td>
                    <td>{{ log.end|date:'d M, H:i:s' }}</td>
                    <td>{{ log.locate_disposition }}</td>
                {% endwith %}
            </tr>
            {% empty %}
                <tr>
                    <td colspan="9">{% trans 'Calls was not found' %}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}