{% extends 'ccc/campaigns/base.html' %}
{% load staticfiles %}
{% block title %}Click to call{% endblock title %}

{% block css %}
<link rel="stylesheet" href="{% static 'home/assets/css/main.css' %}" />
<link rel="stylesheet" href="{% static 'home/assets/css/bootstrap.min.css' %}" />
<style>
    .gridStyle {
        border: 1px solid rgb(212,212,212);
        width: 400px;
        height: 300px
    }
</style>

<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css' %}">
{% endblock css %}

{% block scripts %}
<script type="text/javascript" src="{% static 'js/twilio.min.js' %}"></script>

<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js' %}"></script>
<script type="text/javascript" src="{% static 'angular_apps/click_to_call/auto_dialer.js' %}"></script>
<script type="text/javascript" src="{% static 'js/browser-calls.js' %}"></script>
{% endblock scripts %}

{% block content %}

<!-- BEGIN PAGE HEADER-->
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title"> Browser Call </h3>

        <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
</div>
<!-- END PAGE HEADER-->

<div class="row" ng-app="DialerApp">
    <div class="col-md-12" ng-controller="DialerController">
        <!-- BEGIN INLINE NOTIFICATIONS PORTLET-->
        <div class="portlet">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-cogs"></i>Upload Number List
                </div>
            </div>
            <div class="row portlet-body" ng-init="fetch_dailer_with_list()">
                <div class="col-md-12" >
                    <table class="table" show-filter="false" >
                        <th> Uploaded List </th>
                        <th> Uploaded Date </th>
                        <th> Action </th>
                        <tr ng-repeat="obj in results.items">
                            <td title="{$ obj.name $}" > {$ obj.name $}</td>
                            <td title="{$ obj.created_at $}" > {$ obj.created_at $}</td>
                            <td>
                            <a href="/click-to-call/uploaded-list/{$ obj.id $}/">Select</a>
                        </tr>
                    </table>
                    <uib-pagination
                    ng-model="results.currentPage"
                    total-items="results.count"
                    max-size="10"
                    ng-change="results.nextPage(results.currentPage, true)"
                    boundary-links="true"></uib-pagination>
                </div>

            </div>
        </div>
        <!-- END INLINE NOTIFICATIONS PORTLET-->
    </div>

</div>

{% endblock content %}