<style>
    .history .tab {color: #9a9eb0; font-weight: 700; letter-spacing: -.5px;}
    .history .tab.on {color: #1b264a; box-shadow: inset 0 -8px 0 #caf3c9;}
    .historySwiper {
        width: 100%;
        height: 40px;
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
    }

    .historySwiper .swiper-slide {
        display: block !important;
        justify-content: center;
        align-items: center;
        width: auto !important;
        background: none
    }
</style>

<div class="swiper historySwiper history">
    <div class="swiper-wrapper history">
    </div>
</div>
<ul class="recent"></ul>

<script id="template_history_swiper" type="text/html">
    <div class="swiper-slide">
        <a href="javascript:" class="tab" data-id="{{id}}" data-file="{{filepath}}">{{name}}</a>
    </div>
</script>
<script id="li_call_history_template" type="text/template">
    <li>
        <div class="accordion-title">
            <!-- <div class="stat {{calltype}}"></div> -->
            <div class="thumb" style="{{user_photo}}"></div>
            <div class="who">
                <div class="cont">
                    <p class="name">{{name}}</p>											
                    <p class="num"> {{number}} <span class="date">{{date_time}}</span></p> <!--out/in/out_not/in_not-->
                    <p class="role">{{role1}} {{role2}}</p>
                </div>
            </div>
        </div>
        <a href="javascript:" class="call" data-to="{{nomalizedNumber}}"></a>
    </li>
</script>

