{% layout 'layout' %}
{% block title %}Metrics Dashboard{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li>App Templates</li>
<li>Blog</li>
<li class="active"><a href="app-blog-comment.html">Metrics Dashboard</a></li>
{% endblock %}

{% block styles %}
{{ "plugins/nvd3/nv.d3.min.css" | asset_url | stylesheet_tag }} 		<!-- nvd3 -->
{% endblock %}

{% block scripts %}
{{ "plugins/d3/d3.min.js" | asset_url | script_tag }}             		<!-- nvd3 dependency -->
{{ "plugins/nvd3/nv.d3.min.js" | asset_url | script_tag }} 				<!-- nvd3 -->
  
{% endblock %}

{% block content %}
<div class="col-sm-4">
	<div class="panel panel-default">
        <div class="panel-heading">
            <h2>Call Center Metrics</h2>
        </div>
        <div class="panel-body">
        	<a class="info-tiles tiles-grape has-footer" href="#">
			    <div class="tiles-body">
			        <div class="pull-left"><i class="fa fa-arrow-down"></i></div>
			        <div class="pull-right">2,497 calls</div>
			    </div>
			    <div class="tiles-footer">
			    	<div class="pull-left">...handled this week, compared with 2,810 calls handled last week</div>
			    </div>
			</a>
			<a class="info-tiles tiles-grape has-footer" href="#">
			    <div class="tiles-body">
			        <div class="pull-left"><i class="fa fa-arrow-up"></i></div>
			        <div class="pull-right">57% FCR</div>
			    </div>
			    <div class="tiles-footer">
			    	<div class="pull-left">... compared with 49% FCR last week</div>
			    </div>
			</a>
        </div>
    </div>
	<a class="info-tiles tiles-sky" href="#">
	    <div class="tiles-heading">
	        <div class="pull-left">Currently Active &amp; Waiting</div>				        
	    </div>
	    <div class="tiles-body">
	        <div class="pull-left"><i class="fa fa-clock-o"></i></div>
	        <div class="pull-right">Active: 60 callers</div> 
	    </div>
	</a>
</div><!-- col-sm-4 -->
<div class="col-sm-8">
	<div class="panel panel-default">
        <div class="panel-heading">
            <h2>Call Resolution</h2>
        </div>
        <div id="demo"> 
			<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-fixed-header m0" id="example">
				<thead>
					<tr>
						<th></th>
						<th>Trend</th>
						<th>MTD</th>
						<th>previous Month</th>
					</tr>
				</thead>
				<tbody>
					<tr class="gradeX">
						<td>First Call</td>
						<td><i class="fa fa-arrow-up"></i></td>
						<td>38%</td>
						<td>35%</td>
					</tr>
					<tr class="gradeX">
						<td>2 or more</td>
						<td><i class="fa fa-arrow-down"></i></td>
						<td>48%</td>
						<td>53%</td>
					</tr>
					<tr class="gradeX">
						<td>Unresolved</td>
						<td><i class="fa fa-level-up"></i></i></td>
						<td>15%</td>
						<td>12%</td>
					</tr>
				</tbody>
			</table>
		</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2>Schedule Adherence Today</h2>
        </div>
        <div id="demo"> 
			<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-fixed-header m0" id="example">
				<thead>
					<tr>
						<th>Agent</th>
						<th>Adherence</th>
						<th>Call Handled</th>
					</tr>
				</thead>
				<tbody>
					<tr class="gradeX">
						<td>Agent 1</td>
						<td>86%</td>
						<td>21</td>
					</tr>
					<tr class="gradeX">
						<td>Agent 2</td>
						<td>81%</td>
						<td>16</td>
					</tr>
					<tr class="gradeX">
						<td>Agent 3</td>
						<td>89%</td>
						<td>17</td>
					</tr>
					<tr class="gradeX">
						<td>Agent 4</td>
						<td>76%</td>
						<td>12</td>
					</tr>
					<tr class="gradeX">
						<td>Agent 5</td>
						<td>83%</td>
						<td>15</td>
					</tr>
					<tr class="gradeX">
						<td>Agent 6</td>
						<td>91%</td>
						<td>24</td>
					</tr>
				</tbody>
			</table>
		</div>
    </div>
</div><!-- col-sm-8 -->
{% endblock %}