<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Dashboards</title>

    <link rel="stylesheet" href="/lib/pmdynaform/libs/bootstrap-3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/sb-admin-2.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">

    <link href="/css/gridstack.css" rel="stylesheet">
    <link href="/css/general.css" rel="stylesheet">
    <link href="/css/dashboardStylesForIE.css" rel="stylesheet">

    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Chivo:400,400italic' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery-ui-1.11.2.min.js" ></script>
    <script src="/lib/pmdynaform/libs/bootstrap-3.1.1/js/bootstrap.min.js"></script>
    <script src="/lib/pmdynaform/libs/underscore/underscore-1.8.3.js"></script>
    <script type="text/javascript" >
        var urlProxy = '{$urlProxy}';
        var pageUserId = '{$usrId}';
        var token = '{$credentials.access_token}';
        var G_STRING = [];
        {foreach from=$translation key=index item=option}
            G_STRING['{$index}'] = "{$option}";
        {/foreach}
    </script>

    <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardHelper.js"></script>
    <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardModel.js"></script>
    <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardPresenter.js"></script>
    <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardViewIE.js"></script>

	<script type="text/template" class="specialIndicatorButtonTemplate">
		<div class="col-lg-3 col-md-6 dashPro ind-button-selector"
			 id="indicatorButton-<%- indicator.id %>"
			 data-indicator-id="<%- indicator.id %>"
			 data-indicator-type="<%- indicator.type %>"
			 data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">
			<div class="ind-container-selector panel panel-green grid-stack-item-content" style="min-width:200px;">
				<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
					<div class="panel-heading" >
						<div class="row">
							<div class="col-xs-3">
								<div class="huge ind-value-selector"><%- indicator.value %></div>
							</div>
							<div class="col-xs-9 text-right"><i class="ind-symbol-selector fa fa-chevron-up fa-3x"></i>
								<div class="small ind-comparative-selector">
									<%- indicator.comparative %> (<%- indicator.percentComparative %> %)
								</div>
							</div>
						</div>
					</div>
					<div class="panel-footer text-center ind-title-selector">
						<%- indicator.title %>
					</div>
				</a>
			</div>
		</div>
	</script>

	<script type="text/template" class="statusIndicatorButtonTemplate">
		<div class="col-lg-3 col-md-6 dashPro ind-button-selector"
			 id="indicatorButton-<%- indicator.id %>"
			 data-indicator-id="<%- indicator.id %>"
			 data-indicator-type="<%- indicator.type %>"
			 data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">
			<div class="ind-container-selector panel grid-stack-item-content" style="min-width:200px;">
				<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
					<div class="panel-heading status-indicator-low"
						 style=" width:<%- indicator.percentageOverdue %>%;
						 		visibility: <%- indicator.overdueVisibility %>" >
						<div class="row">
							<div class="col-xs-12">
								<div class="small ind-comparative-selector"><%- indicator.percentageOverdue %>%</div>
							</div>
						</div>
					</div>
					<div class="panel-heading status-indicator-medium"
						 style=" width:<%- indicator.percentageAtRisk %>%;
						 		visibility: <%- indicator.atRiskVisibility %>;" >
						<div class="row">
							<div class="col-xs-12">
								<div class="small ind-comparative-selector"><%- indicator.percentageAtRisk %>%</div>
							</div>
						</div>
					</div>
					<div class="panel-heading status-indicator-high"
						 style=" width:<%- indicator.percentageOnTime %>%;
						 		visibility: <%- indicator.onTimeVisibility %>;">
						<div class="row">
							<div class="col-xs-12">
								<div class="small ind-comparative-selector"><%- indicator.percentageOnTime %>%</div>
							</div>
						</div>
					</div>
					<div class="panel-footer text-center ind-title-selector" style="clear:both;">
						<%- indicator.title %>
					</div>
				</a>
			</div>
		</div>
	</script>

	<script type="text/template" class="indicatorButtonTemplate">
		<div class="col-lg-3 col-md-6 ind-button-selector" id="generalLowItem"
					id="indicatorButton-<%- indicator.id %>"
					data-indicator-id="<%- indicator.id %>"
					data-indicator-type="<%- indicator.type %>"
					data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2" >
			<div class="panel ie-panel panel-low grid-stack-item-content ind-container-selector" style="min-width: 200px;">
				<a data-toggle="collapse" href="#completedcases" aria-expanded="false" aria-controls="completedcases">
					<div class="panel-heading"> <div class="row"> <div class="col-xs-3">
								<div class="huge ind-value-selector">X</div>
							</div>
							<div class="col-xs-9 text-right"><i class="fa fa-file-text-o fa-3x"></i>
								<div class="small ind-comparative-selector ellipsis"><%- indicator.comparative %></div>
							</div>
						</div>
					</div>
					<div class="progress progress-xs progress-dark-base ie-progress-dark-base mar-no">
						<div role="progressbar"
							aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
							class="progress-bar progress-bar-light ind-progress-selector"
							style="width: 0%">
						</div>
					</div>
					<div class="panel-footer text-center ind-title-selector">
						<span>
						<%- indicator.title %>
						</span>
					</div>
				</a>
			</div>
		</div>
	</script>

	<script type="text/template" class="specialIndicatorMainPanel">
		<div class="process-div well" id="specialIndicatorMainPanel"
			data-gs-no-resize="true"
			style="clear:both;position:relative;height:auto;">

            <div class="panel-heading bluebg sind-title-selector"">
                <ol class="breadcrumb">
                </ol>
            </div>

			<div class="text-center huge">
				<div class="col-xs-3 vcenter">
					<div class="green"><%- indicator.efficiencyIndexToShow %></div>
					<div class="small grey sind-index-selector ellipsis"></div>
				</div>
				<div class="col-xs-3 vcenter" style="margin-right:40px">
					<div class="red sind-cost-number-selector"><%- indicator.inefficiencyCostToShow %></div>
					<div class="small grey sind-cost-selector ellipsis"></div>
				</div>
				<div class="col-xs-6" id="specialIndicatorGraph" style="width:540px;height:300px;"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</script>

	<script type="text/template" class="specialIndicatorDetail">
		<div  class="process-div well hideme  detail-button-selector" data-gs-no-resize="true"
			  id="detailData-<%- detailData.uid %>"
			  data-indicator-id="<%- detailData.indicatorId %>"
			  data-detail-id="<%- detailData.uid %>"
			  data-detail-index="<%- detailData.efficiencyIndexToShow %>"
			  data-detail-cost-to-show="<%- detailData.inefficiencyCostToShow %>"
			  data-detail-cost="<%- detailData.inefficiencyCost%>"
			  data-detail-name="<%- detailData.name %>"
            >
			<div class="col-lg-12 vcenter-task">
				<a href="#" class="process-button">
					<div class="col-xs-5 text-left title-process">
						<div  class="small grey detail-title-selector"> <%- detailData.name %></div>
					</div>
					<div class="col-xs-3 text-center ">
						<div class="blue"><%- detailData.efficiencyIndexToShow%></div>
						<div class="small grey detail-efficiency-selector ellipsis"></div>
					</div>
					<div class="col-xs-3 text-center ">
						<div class="red detail-cost-number-selector"><%- detailData.inefficiencyCostToShow %></div>
						<div class="small grey detail-cost-selector ellipsis"></div>
					</div>
					<div class="col-xs-1 text-right arrow"><i class="fa fa-chevron-right fa-fw"></i></div>
				</a>
			</div>
			<div class="clearfix"></div>
		</div>
	</script>

	<script type="text/template" class="specialIndicatorSencondViewDetailUei">
		<div class="process-div well hideme detail-button-selector" data-gs-no-resize="true"
			 id="detailData-<%- detailData.uid %>"
			 data-indicator-id="<%- detailData.indicatorId %>"
			 data-detail-id="<%- detailData.uid %>">
			<div class="panel-heading greenbg">
				<div class="col-xs-12 text-center detail-title-selector">
					<i class="fa fa-tasks fa-fw"></i> 
					<span id="usrName"><%- detailData.name %> </span>
					<span>(<%- detailData.rankToShow %>)</span>
				 </div>
				<div class="clearfix"></div>
			</div>
			<div class="text-center huge">
				<div class="col-xs-12 vcenter-task">
					<div class="col-xs-6 ">
						<div class="blue small"><%- detailData.efficiencyIndexToShow%></div>
						<div class="smallB grey detail-efficiency-selector ellipsis"></div>
					</div>
					<div class="col-xs-6 ">
						<div class="small detail-cost-number-selector"><%- detailData.inefficiencyCostToShow%></div>
						<div class="smallB grey detail-cost-selector ellipsis"></div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</script>

	<script type="text/template" class="specialIndicatorSencondViewDetailPei">
		<div class="process-div well hideme detail-button-selector" data-gs-no-resize="true"
			 id="detailData-<%- detailData.uid %>"
			 data-indicator-id="<%- detailData.indicatorId %>"
			 data-detail-id="<%- detailData.uid %>">
			<div class="panel-heading greenbg">
				<div class="col-xs-12 text-center detail-title-selector">
					<i class="fa fa-tasks fa-fw"></i> 
					<span id="usrName"><%- detailData.name %> </span>
				 </div>
				<div class="clearfix"></div>
			</div>
			<div class="text-center huge">
				<div class="col-xs-12 vcenter-task">
					<div class="col-xs-6 ">
						<div class="blue small"><%- detailData.efficiencyIndexToShow%></div>
						<div class="smallB grey detail-efficiency-selector ellipsis"></div>
					</div>
					<div class="col-xs-6 ">
						<div class="small detail-cost-number-selector"><%- detailData.inefficiencyCostToShow%></div>
						<div class="smallB grey detail-cost-selector ellipsis"></div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</script>

	<script type="text/template" class="statusDetail">
		<div class="process-div well hideme detail-button-selector" data-gs-no-resize="true"
			 id="detailData-<%- detailData.uid %>"
			 data-indicator-id="<%- detailData.indicatorId %>"
			 data-detail-id="<%- detailData.uid %>">
			<div class="panel-heading greenbg">
				<div class="col-xs-12 text-center detail-title-selector"><i class="fa fa-tasks fa-fw"></i> <span id="usrName"><%- detailData.taskTitle %></span> </div>
				<div class="clearfix"></div>
			</div>
			<div class="text-center huge">
				<div class="col-xs-12 vcenter-task">
					<div class="col-xs-4 ">
						<div  class="blue small"><%- detailData.percentageOverdue%> %</div>
						<div class="smallB grey fontMedium detail-efficiency-selector">Overdue</div>
					</div>
					<div class="col-xs-4">
						<div  class="blue small"><%- detailData.percentageAtRisk%> %</div>
						<div class="smallB grey fontMedium detail-efficiency-selector">At Risk</div>
					</div>
					<div class="col-xs-4 ">
						<div  class="blue small"><%- detailData.percentageOnTime%> %</div>
						<div class="smallB grey fontMedium detail-efficiency-selector">On Time</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</script>

	<script type="text/template" class="dashboardButtonTemplate">
		<div id="dashboardButton-<%- dashboard.id %>" class="btn-group pull-left"
			data-dashboard-id="<%- dashboard.id %>" >
			<button  type="button" class="btn btn-success das-icon-selector">
				<i class="fa fa-star fa-1x"></i>
			</button>
			<button   type="button" class="btn btn-success das-title-selector" >
				<%- dashboard.title %>
			</button>
		</div>
	</script>

	<script type="text/template" class="generalIndicatorMainPanel">
        <div class="process-div well" data-gs-no-resize="true" style="clear:both;position:relative;height:auto;">
            <div class="panel-heading bluebg">
                <ol class="breadcrumb">
                    <li class="ind-title-selector"></li>
                </ol>
            </div>
            <div class="text-center huge">
                <div class="col-xs-6" id="generalGraph1" style="width:600px; height:300px;"><img src="../dist/img/graph.png" /></div>
                <div class="col-xs-6" id="generalGraph2" style="width:600px; height:300px;margin-left:60px;"><img src="../dist/img/graph.png" /></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </script>

	<script type="text/template" class="statusIndicatorMainPanel">
		<div class="process-div well" data-gs-no-resize="true" style="clear:both;position:relative;height:auto;">
			<div class="panel-heading bluebg">
				<ol class="breadcrumb">
					<li class="ind-title-selector"></li>
				</ol>
			</div>
			<div class="text-center huge" style="margin:0 auto; width:98%;">
				<div class="col-xs-4" style="width:auto;">
					<div class="status-graph-title-low">Overdue:</div>
					<div id="graph1" style="width:400px; height:300px;"></div>	
				</div>
				<div class="col-xs-4" style="width:auto;">
					<div class="status-graph-title-medium">At Risk:</div>
					<div id="graph2" style="width:400px; height:300px;"></div>	
				</div>
				<div class="col-xs-4" style="width:auto;">
					<div class="status-graph-title-high">On Time:</div>
					<div id="graph3" style="width:400px; height:300px;"></div>	
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</script>
	
</head>
	

<body id="page-top" class="index">
  <div id="wrapper">
    <div id="page-wrapper">
		<div class="title-process" style="height:50px;"> </div>
		<div class="title-process" style="margin-top:50px; width:500px; clear:both; border:1px solid #999; margin:0 auto; padding:15px;">
			This is just a basic view of your indexes. For better compatibility with Internet Explorer, a new tab with the KPIs has been opened. Please select this new tab on the tab list above to see all our KPIs functionality. 	
		</div>
          <!--[>Cabezera<]
            <div class="row" style="visibility:hidden;">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                      <div class="panel-body">
                        <a class="btn btn-primary dashboard-button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        <i class="fa fa-bar-chart fa-2x"></i>
                        <i class="fa fa-chevron-down fa-1x"></i>
                        </a>
                        <h4 id="titleH4" class="header-dashboard">{translate label="ID_MANAGERS_DASHBOARDS"}</h4>
                        <div class="pull-right dashboard-right container-fluid">

							<div class="row pull-left">
								<div class="span4 pull-left">
									<h5 class="pull-left">{translate label="ID_DASH_COMPARE_MONTH"}:</h5>
								</div>


								<div class="span4 pull-left">
									<select id="year" class="form-control pull-right ">
									{literal}
									<script>
										now = new Date();
										anio = now.getFullYear();
										for(a=anio;a>=anio-7;a--){
										document.write('<option value="'+a+'">'+a+'</option>');
										}
									</script>
									{/literal}
									</select>

									<select id="month" class="form-control pull-right ">
									  <option value="1">{translate label="ID_MONTH_ABB_1"}</option>
									  <option value="2">{translate label="ID_MONTH_ABB_2"}</option>
									  <option value="3">{translate label="ID_MONTH_ABB_3"}</option>
									  <option value="4">{translate label="ID_MONTH_ABB_4"}</option>
									  <option value="5">{translate label="ID_MONTH_ABB_5"}</option>
									  <option value="6">{translate label="ID_MONTH_ABB_6"}</option>
									  <option value="7">{translate label="ID_MONTH_ABB_7"}</option>
									  <option value="8">{translate label="ID_MONTH_ABB_8"}</option>
									  <option value="9">{translate label="ID_MONTH_ABB_9"}</option>
									  <option value="10">{translate label="ID_MONTH_ABB_10"}</option>
									  <option value="11">{translate label="ID_MONTH_ABB_11"}</option>
									  <option value="12">{translate label="ID_MONTH_ABB_12"}</option>
									</select>
								</div>

								<div class="span4 pull-left">
									<button type="button" class="btn btn-compare btn-success pull-right btn-date">{translate label="ID_DASH_COMPARE"}</button>
								</div>

							</div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="collapse" id="collapseExample">
                          <div class="well">
                            <p class="text-center">{translate label="ID_DASH_CLICK_TO_VIEW"}</p>
                            <p>
                                [> Split button <]
                              <div id="dashboardsList">
                              </div>
                            </p>
                            <div class="clearfix"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                [> /.col-lg-12 <]
            </div>
          [> Indicators <]
          <div class="row">
              <div class="indicators">
                <div id="indicatorsGridStack" class="grid-stack" data-gs-width="12" data-gs-animate="no" >
                  [>Here are added dynamically the Indicators<]
                </div>
              </div>
            [> Details by Indicator <]
              <div class="col-lg-12 col-md-12 bottom">
                  <div id="indicatorsDataGridStack" class="grid-stack" data-gs-width="12" data-gs-animate="no" >
                  [>Here are added dynamically the Dat by indicator<]
                  </div>
              </div>

			  <div id="relatedLabel" style="clear:both; visibility:hidden;">
					<div>
						<center><h3></h3></center>
					</div>
					<div>
						Sort by Cost: &nbsp; &nbsp;<a id="sortListButton" class="fa fa-chevron-up fa-1x" style="color:#000;" href="#"></a>
					</div>
			  </div>

              <div class="col-lg-12 col-md-12">
				  <div id="relatedDetailGridStack" class="grid-stack" data-gs-width="12" 
							data-gs-animate="no" style="clear:both;">
                   </div>
              </div>
            </div>-->
    </div>
  </div>

</body>
</html>

