{% extends 'layouts/mobile.jinja2' %}

{% block title %}My Call List{% endblock %}
{% block heading %}{% endblock %}
{% block body %}
<div class="row vm-intro-row">
    <div class="col-xs-12 text-center vm-intro-card">
        <p> The most recent voicemail messages are listed below for your business phone number:
        </p>
        <span class="vm-app-number">{{ phone_number }}</span>
    </div>
</div>
{% if vm %}
{% if vm_recent %}
<small>RECENT</small>
{% for c in vm_recent %}
<div>
<hr class="vm-hr" />
</div>
<div class="">
    <a data-toggle="collapse" href="#{{ c.id }}" aria-expanded="false" aria-controls="{{ c.id }}">
        <div class="row">
            <div class="col-xs-2 vm-icon">
            <i class="material-icons">
                voicemail
            </i>
            </div>
            <div class="col-xs-10">
                <p class="vm-number-title">{{ c.contact_match }}</p>
                <p class="text-muted"><small>{{ c.created_on }}</small></p>
            </div>

        </div>
    </a>
    <div class="collapse vm-card" id="{{ c.id }}">
        <p class="vm-transcribe-text">
        {% if c.transcription_text %}
            <small>
            <b>Transcription:</b><br />
            {{ c.transcription_text }}
            </small>
        {% else %}
            <small>
            <b>Transcription:</b><br />
            There's no transcription available.
            </small>
        {% endif %}
        <br />
        <br />
        <audio controls preload="metadata" style=" width:325px;">
	        <source src="{{ c.recording_url }}" type="audio/mpeg">
            Your browser does not support the audio element.
            </audio>
        <br />
        <br />
         <div class="row">
            <div class="col-xs-6 vm-icon-action">
                <a href="{{ call_uri }}:{{ c.action_number }}?dialAction=voiceCall" class="vm-action-link">
                    <i class="material-icons">
                        phone_callback
                    </i>
                    <br />
                    <p class="vm-action-text">
                        <small>Return Call</small>
                    </p>
                </a>
            </div>
            <div class="col-xs-6 vm-icon-action">
                <a href="{{ call_uri }}:{{ c.action_number }}?dialAction=text" class="vm-action-link">
                    <i class="material-icons">
                        textsms
                    </i>
                    <br />
                    <p class="vm-action-text">
                        <small>Send Message</small>
                    </p>
                </a>
            </div>
        </div>
        </p>
    </div>
</div>
{% endfor %}
{% endif %}
{% if vm_older %}
<small>OLDER</small>
{% for b in vm_older %}
<div>
<hr class="vm-hr" />
</div>
<div class="">
    <a data-toggle="collapse" href="#{{ b.id }}" aria-expanded="false" aria-controls="{{ b.id }}">
        <div class="row">
            <div class="col-xs-2 vm-icon">
            <i class="material-icons">
                voicemail
            </i>
            </div>
            <div class="col-xs-10">
                <p class="vm-number-title">{{ b.contact_match }}</p>
                <p class="text-muted"><small>{{ b.created_on }}</small></p>
            </div>

        </div>
    </a>
    <div class="collapse vm-card" id="{{ b.id }}">
        <p class="vm-transcribe-text">
        {% if b.transcription_text %}
            <small>
            <b>Transcription:</b><br />
            {{ b.transcription_text }}
            </small>
        {% else %}
            <small>
            <b>Transcription:</b><br />
            There's no transcription available.
            </small>
        {% endif %}
        <br />
        <br />
        <audio controls preload="metadata" style=" width:325px;">
	        <source src="{{ b.recording_url }}" type="audio/mpeg">
	        Your browser does not support the audio element.
        </audio>
        <br />
        <br />
        <div class="row">
            <div class="col-xs-6 vm-icon-action">
                <a href="{{ call_uri }}:{{ b.action_number }}?dialAction=voiceCall" class="vm-action-link">
                    <i class="material-icons">
                        phone_callback
                    </i>
                    <br />
                    <p class="vm-action-text">
                        <small>Return Call</small>
                    </p>
                </a>
            </div>
            <div class="col-xs-6 vm-icon-action">
                <a href="{{ call_uri }}:{{ b.action_number }}?dialAction=text" class="vm-action-link">
                    <i class="material-icons">
                        textsms
                    </i>
                    <br />
                    <p class="vm-action-text">
                        <small>Send Message</small>
                    </p>
                </a>
            </div>
        </div>
        </p>
    </div>
</div>
{% endfor %}
{% endif %}
{% else %}
<div class="col-xs-12 text-center no-vm-available">
<br /><br /><br /><br />
No voicemail to display
<br />
<br />
</div>
{% endif %}
{% endblock %}