{% extends 'layouts/master-page' %}
{% block title %}Host - {{ hostname }}{% endblock %}
{% block head %}
  <!-- css -->
    <style>

    .arc text {
      font: 15px sans-serif;
      text-color: white;
      text-anchor: middle;
    }

    .arc path {
      stroke: #fff;
    }

  </style>
  <!-- javascript -->
  
{% endblock %}
{% block content %}
  <div id='stats' class="well well-small">
    <h3>{{ hostname }} stats</h3>
    <h4 class="text-center">Installed Packages</h4>
    <svg class="center-block" width="430" height="250" ></svg>
    <script type="text/javascript" src="/static/js/vendors/d3.js"></script>
    <script>

        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height"),
            radius = Math.min(width, height) / 2,
            g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        //var color = d3.scaleOrdinal(["#3B993B", "#E0E028", "#D23D3D"]);
        // scaleOrdinal is not available in debian packaged version
        function color(key) {
            if (key == "Up to Date") {
                return "#3B993B";
            }
            else if (key == "Fixed") {
                return "#E0E028";
            }
            else if (key == "Vulnerable") {
                return "#D23D3D";
            }
        }

        // For retrocompatibility
        if (typeof d3.pie !== "undefined") { 
            var pie = d3.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }
        else {
            var pie = d3.layout.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }


        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var path = d3.arc()
                .outerRadius(radius - 10)
                .innerRadius(0);
        }
        else {
            var path = d3.svg.arc()
                .outerRadius(radius - 10)
                .innerRadius(0);
        }
        
        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var label = d3.arc()
                .outerRadius(radius - 40)
                .innerRadius(radius - 40);
        }
        else {
            var label = d3.svg.arc()
                .outerRadius(radius - 40)
                .innerRadius(radius - 40);
        }
                    
        var data = [{type:"Up to Date",number:{{stats['up_packages']}}},
                    {type:"Fixed",number:{{stats['fixed_packages']}}},
                    {type:"Vulnerable",number:{{stats['vuln_packages']}}}];


          var arc = g.selectAll(".arc")
            .data(pie(data))
            .enter().append("g")
              .attr("class", "arc");

          arc.append("path")
              .attr("d", path)
              .attr("fill", function(d) { return color(d.data.type); });

          arc.append("text")
              .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
              .attr("dy", "0.35em")
              .text(function(d) { return d.data.type; });
        //~ });

    </script>
    
    <button class="btn btn-primary btn-xs center-block" onclick="calcstats('{{ hostname }}');">Update Stats</button>
    
    <table id="datas" class="table table-hover table-striped">
      <thead>
        <tr class="warning">
          <td>Total</td><td>Up to Date</td><td>Fixed</td><td>Vulnerable</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{stats['up_packages'] + stats['fixed_packages'] + stats['vuln_packages'] }}</td><td>{{stats['up_packages']}}</a></td><td>{{ stats['fixed_packages'] }}</td><td>{{stats['vuln_packages']}}</td>
        </tr>
      </tbody>
    </table>
  </div>
    
  <div id='host' class="well well-small">
    <table id="datas" class="table table-hover table-striped">
      <thead>
        <tr class="warning">
          <td></td><td>Link</td><td>Number</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Vulns</td><td><a href="vulns/{{ hostname }}">{{ hostname }} Vulns</a></td><td>{{ stats['nb_vulns'] }}</td>
        </tr>
        <tr>
          <td>Fixes</td><td><a href="fixes/{{ hostname }}">{{ hostname }} Fixes</a></td><td>{{ stats['fixed_packages'] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  
{% endblock %}
