{% extends 'layouts/master-page' %}
{% set page = "hosts" %}
{% block title %}Hosts{% endblock %}
{% block head %}
  <!-- css -->
   <style>

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

    .arc path {
      stroke: #fff;
    }

  </style>
  <!-- javascript -->
  <script type="text/javascript" src="/static/js/custom/pager.js"></script>

{% endblock %}
{% block content %}
  <span class="row">
      <button id="stats-toggle" type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#statsdiv">
        Hide/Show stats
      </button>
  </span>

  <div id='statsdiv' class="collapse in well well-small">
    <h3>Global hosts stats</h3>
    <h4 class="text-center">Fixable Hosts</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 data = new Array({{ stats['names_stats']|length }});
        
        {% for name_stats in stats['names_stats'] %}
          data[{{ loop.index - 1 }}] = {hostgroup: "{{ name_stats['name'] }}", number: {{ name_stats['nb'] }}}
        {% endfor %}
        
        // scaleOrdinal is not available in debian packaged version
        function color(key) {
        {% for name_stats in stats['names_stats'] %}
        if (key == "{{ name_stats['name'] }}") {
                return "{{ name_stats['color'] }}";
            }
        {% endfor %}
        }

        // 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 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.hostgroup); });

          arc.append("text")
              .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
              .attr("dy", "0.35em")
              .text(function(d) { if (d.data.number != 0) return d.data.hostgroup; });

    </script>
    
    <table id="datas" class="table table-hover table-striped">
      <thead>
        <tr class="warning">
          <td>Fixable Hosts</td>
        {% for name_stats in stats['names_stats'] %}
          <td>{{ name_stats['name'] }}</td>
        {% endfor %}
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ stats['names_stats']|sum(attribute='nb') }}</td>
        {% for name_stats in stats['names_stats'] %}
          <td>{{ name_stats['nb'] }}</td>
        {% endfor %}
        </tr>
      </tbody>
    </table>
  </div>

  <span class="row">
      <button id="filter-toggle" type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#filterdiv">
        Hide/Show filter
      </button>
  </span>
  
  <div id="filterdiv" class="collapse well well-small">  
    <form method="POST" id="filter" class="nav form-search">
        <!--
      {{ form.csrf_token }}
-->
    
      {{ form.r }}
      {{ form.pageLentgh }}
      
      <table class="searchTable">
        <tr>
          <td class="text">{{ form.hostname.label }}</td><td>{{ form.hostname(size=30) }}</td>
          <td class="text">{{ form.os_version.label }}</td><td>{{ form.os_version() }}</td>

          <td class="text">{{ form.submit.label }}</td><td>{{ form.submit() }}</td>
        </tr>
      </table>
        
        
<!--
      <input name="r" id="r" type="hidden" value=0 />
      <input name="pageLength" id="pageLength" type="hidden" value= {% if filters is defined and filters['pageLength'] is defined %}"{{filters['pageLength']}}"{% else %}"50"{% endif %}/>   
      <table class="searchTable">
        <tr>
          <td class="text">Host</td>
          <td>
            <input name="hostname" id="hostname" type="text" value={% if filters is defined and filters['hostname'] != "all" %}"{{filters['hostname']}}"{% else %}"all"{% endif %}/>
          </td>
          <td class="text">OS Version</td>
          <td>
              <select name="os_version" id="os_version">
                  <option value="all">all</option>
                  {% for v in os_versions %}
                  <option value="{{v}}" {% if filters is defined and filters['os_version'] == v %}selected{% endif %}>{{v}}</option>
                  {% endfor %}
              </select>
          </td>
        </tr>
    </table>
    <input type="submit" value="Search"/>
-->
  </form>
</div>
      
  <!-- Pager -->
  {% include 'subpages/pager.html' %}
  <!-- Search results -->
  {% include 'subpages/hosts_table.html' %}
  <!-- Pager -->
  {% include 'subpages/pager.html' %}
  
{% endblock %}
