{% extends 'layouts/mobile.jinja2' %}
{% block title %}My Call List{% endblock %}
{% block refresh %} <meta http-equiv="refresh" content="180"/>{% endblock %}
{% block heading %}{% endblock %}
{% block body %}
<div class="body-layout">
    <div class="inner-body-content inner-body-voicemail inner-body-voicemail-ios">
        <div class="recent-number-block">
            <p>Recent voicemail messages are listed below for your business phone number:</p>
            <h4>{{ phone_number }}</h4>
        </div>
        {% if vm %}
        {% if vm_recent %}
        <div>
            <p class="recent-title">Recent</p>
        </div>
        {% for c in vm_recent %}
        <div class="voicemail-list-outer">
            <div class="voicemail-card">
                <div class="number-content-wrapper d-flex">
                    <div class="icon-block">
                        <div class="icon">
                            <img src="{{ asset_url_for('images/mobile/voicemail-blue.svg') }}" alt="">
                        </div>
                    </div>
                    <div class="details-block">
                        <h4>{{ c.contact_match }}</h4>
                        <p>{{ c.created_on }}</p>
                    </div>
                </div>
                <div class="details-row">
                    <div class="title-section">
                        <p class="sub-title">Transcription</p>
                        {% if c.transcription_text %}
                        <p>{{ c.transcription_text }}</p>
                        {% else %}
                        <p>There's no transcription available.</p>
                        {% endif %}
                    </div>
                    <div class="voicemail-audio-wrapper">
                        <div class="audio-cover">
                            <audio class="mediaplayer" src="{{ c.recording_url }}" type="audio/mpeg" preload
                                controls>Your device does not support Audio!</audio>
                        </div>
                    </div>
                    <div class="contact-wrapper d-flex">
                        <div class="contact-block">
                            <a href="{{ call_uri }}:{{ c.action_number }}?dialAction=voiceCall">
                                <p><img src="{{ asset_url_for('images/mobile/return-call-blue.svg') }}" alt=""></p>
                                <p>Return Call</p>
                            </a>
                        </div>
                        <div class="contact-block">
                            <a href="{{ call_uri }}:{{ c.action_number }}?dialAction=text">
                                <p><img src="{{ asset_url_for('images/mobile/chat-fill-blue.png') }}" alt=""></p>
                                <p>Send Message</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        {% endif %}
        {% if vm_older %}
        <div>
            <p class="recent-title">Older</p>
        </div>
        {% for b in vm_older %}
        <div class="voicemail-list-outer">
            <div class="voicemail-card">
                <div class="number-content-wrapper d-flex">
                    <div class="icon-block">
                        <div class="icon">
                            <img src="{{ asset_url_for('images/mobile/voicemail-blue.svg') }}" alt="">
                        </div>
                    </div>
                    <div class="details-block">
                        <h4>{{ b.contact_match }}</h4>
                        <p>{{ b.created_on }}</p>
                    </div>
                </div>
                <div class="details-row">
                    <div class="title-section">
                        <p class="sub-title">Transcription</p>
                        {% if b.transcription_text %}
                        <p>{{ b.transcription_text }}</p>
                        {% else %}
                        <p>There's no transcription available.</p>
                        {% endif %}
                    </div>
                    <div class="voicemail-audio-wrapper">
                        <div class="audio-cover">
                            <audio class="mediaplayer" src="{{ b.recording_url }}" type="audio/mpeg" preload
                                controls>Your device does not support Audio!</audio>
                        </div>
                    </div>
                    <div class="contact-wrapper d-flex">
                        <div class="contact-block">
                            <a href="{{ call_uri }}:{{ b.action_number }}?dialAction=voiceCall">
                                <p><img src="{{ asset_url_for('images/mobile/return-call-blue.svg') }}" alt=""></p>
                                <p>Return Call</p>
                            </a>
                        </div>
                        <div class="contact-block">
                            <a href="{{ call_uri }}:{{ b.action_number }}?dialAction=text">
                                <p><img src="{{ asset_url_for('images/mobile/chat-fill-blue.png') }}" alt=""></p>
                                <p>Send Message</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        {% endif %}
        {% else %}
        <div class="col-xs-12 text-center no-vm-available">
            <br /><br /><br /><br />
            No Voicemails to Display
            <br /><br />
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
{% block scripts %}
{{ javascript_tag('voicemail_js') | safe }}
{% endblock %}