#############################################################################
# Copyright (c) 2017 Rajesh Kudaka
#
# Author: Rajesh Kudaka 4k.rajesh@gmail.com
# All rights reserved. This program and the accompanying materials
# are made available under the terms of the Apache License, Version 2.0
# which accompanies this distribution, and is available at
# http://www.apache.org/licenses/LICENSE-2.0
#############################################################################
# vnftest comment: this is a modified copy of
# yardstick/common/html_template.py

template = """
<html>
<body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7\
/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1\
/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7\
/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
</head>
<style>

table{
  overflow-y: scroll;
  height: 360px;
  display: block;
  }

 header,h3{
    font-family:Frutiger;
    clear: left;
    text-align: center;
}
</style>
<header class="jumbotron text-center">
  <h1>Vnftest User Interface</h1>
  <h4>Report of {{task_id}} Generated</h4>
</header>

<div class="container">
  <div class="row">
    <div class="col-md-4">
        <div class="table-responsive" >
        <table  class="table table-hover" > </table>
        </div>
    </div>
    <div class="col-md-8" >
    <div id="container" ></div>
   </div>
  </div>
</div>
<script>
  var arr, tab, th, tr, td, tn, row, col, thead, tbody;
  arr={{table|safe}}
  tab = document.getElementsByTagName('table')[0];
  thead=document.createElement('thead');
  tr = document.createElement('tr');
  for(row=0;row<Object.keys(arr).length;row++)
  {
      th = document.createElement('th');
      tn = document.createTextNode(Object.keys(arr).sort()[row]);
      th.appendChild(tn);
      tr.appendChild(th);
          thead.appendChild(tr);
  }
  tab.appendChild(thead);
  tbody=document.createElement('tbody');

  for (col = 0; col < arr[Object.keys(arr)[0]].length; col++){
  tr = document.createElement('tr');
  for(row=0;row<Object.keys(arr).length;row++)
  {
      td = document.createElement('td');
      tn = document.createTextNode(arr[Object.keys(arr).sort()[row]][col]);
      td.appendChild(tn);
      tr.appendChild(td);
  }
    tbody.appendChild(tr);
        }
tab.appendChild(tbody);

</script>

<script language="JavaScript">

$(function() {
  $('#container').highcharts({
    title: {
      text: 'Vnftest test results',
      x: -20 //center
    },
    subtitle: {
      text: 'Report of {{task_id}} Task Generated',
      x: -20
    },
    xAxis: {
      title: {
        text: 'Timestamp'
      },
      categories:{{Timestamp|safe}}
    },
    yAxis: {

      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      valueSuffix: ''
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: {{series|safe}}
  });
});

</script>


</body>
</html>"""

report_template = """
<html>
    <head>
        <title>Vnftest Report</title>
        <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css\
/bootstrap.min.css" rel="stylesheet">
    </head>
    <div class="content">
        <h3>Vnftest Report </h3>
        <hr/>
        <div>

            <div>Task ID : {{result.task_id}} </div>
            <div style="margin-top:5px;">Criteria :
                <font> {{result.criteria}}</font>
            </div>
            <hr/>

            <caption>Information</caption>
            <table class="table table-striped">
                <tr>
                    <th>#</th>
                    <th>key</th>
                    <th>value</th>
                </tr>
                <tbody>
                    {% for key, value in result.info.items() %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{key}}</td>
                        <td>{{value}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <hr/>

            <caption>Test Cases</caption>
            <table class="table table-striped">
                <tr>
                    <th>#</th>
                    <th>key</th>
                    <th>value</th>
                </tr>
                <tbody>
                    {% for key, value in result.testcases.items() %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{key}}</td>
                        <td>{{value.criteria}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

        </div>
    </div>
</html>
"""