{% extends 'layouts/mobile.jinja2' %}
{% block title %}My Call List{% endblock %}
{% block heading %}{% endblock %}
{% block body %}
<div class="body-layout">
    <div class=" d-flex sub-nav">
        <a href="#" id="nav-details">Details</a>
        <a href="#" id="nav-timeline" class="active">Timeline</a>
        <a href="#" id="nav-notes">Notes</a>
    </div>
    <div class="inner-body-content inner-body-timeline">
        <div class="save-btn-wrapper d-flex justify-content-between">
            <a href="#" id="back-to-contact"><img src="{{ asset_url_for('images/mobile/top-arw-bk.svg') }}" alt=""> <span>Contacts</span></a>
        </div>
        <div class="time-card-list">
            {% if timelines %}
            {% for timeline in timelines %}
            {% if loop.first or timeline.created_on.month != loop.previtem.created_on.month or timeline.created_on.year != loop.previtem.created_on.year %}
            <div class="card-date-wrapper d-flex">
                <div class="date">{{timeline.created_on.astimezone(time_zone).strftime("%b %Y")}}</div>
            </div>
            {% endif %}
            <div class="timeline-card">
                <div class="timeline-card-inner">
                    <div class="timeline-title-wrapper d-flex">
                        <div class="icon">
                            {% if timeline.type == 'call'%}
                            <img src="{{ asset_url_for('images/mobile/call-blue.svg') }}" alt="">
                            {% elif timeline.type in ['note', 'form'] %}
                            <img src="{{ asset_url_for('images/mobile/notes.svg') }}" alt="">
                            {% elif timeline.type in ['message', 'mms'] %}
                            <img src="{{ asset_url_for('images/mobile/chat-blue.svg') }}" alt="">
                            {% endif %}
                        </div>
                        <div class="status">
                            <p>{{timeline.title}}</p>
                            <p class="status-details">{{timeline.user | title}}</p>
                        </div>
                        <div class="msg-status">
                            {% if timeline.status in ['completed', 'received'] %}
                            <span class="answered">{{timeline.status}}</span>
                            {% elif timeline.status == 'missed' %}                        
                            <span class="missed">{{timeline.status}}</span>
                            {% elif timeline.status in ['sent'] %}
                            <span class="sent">{{timeline.status}}</span>
                            {% endif %}
                        </div>
                    </div>
                    {% if timeline.content %}
                    <div class="txt-msg-cover">
						<p> {{timeline.content}}</p>
					</div>
                    {% endif %}
                    {% if timeline.content_url %}
                    {% if timeline.type == 'mms' %}
                    <div class="txt-msg-cover">
                        <div class="msg-img-block">
                            {% for url in timeline.content_url %}
                            <img src="{{url}}" alt="" class="mms-img">
                            {% endfor %}
                        </div>
                    </div>
                    {% else %}
                    <div class="msg-wrapper">
                        <div class="audio-cover">
                            <audio class="mediaplayer" src="{{timeline.content_url}}" type="audio/mpeg" preload controls>Your
                                device does not support Audio!</audio>
                        </div>
                    </div>
                    {% endif %}
                    {% endif %}
                    <div class="time-wrapper d-flex justify-content-between">
                        <div class="date">{{timeline.created_on.astimezone(time_zone).strftime("%d %b %Y")}}</div>
                        <div class="time">{{timeline.created_on.astimezone(time_zone).strftime("%I:%M %p EST")}}</div>
                    </div>
                </div>
            </div>
            {% endfor %}
            {% else %}
            <div class="no-leads-wrapper">
                <p>No Activity to Display</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
<!-- Lighbox modal	-->
<div class="modal fade modal-lightbox" data-backdrop="static" id="lightboxModal" tabindex="-1" role="dialog" aria-labelledby="lightboxModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="lighbox-body">
                    <button class="close-btn" data-dismiss="modal">&times;</button>
                    <img id="mms-modal" class="" src="" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
{{ javascript_tag('contact_timeline_js') | safe }}
{% endblock %}