{% macro facts_table(facts, autofocus=False, condensed=False, show_node=False, show_value=True, link_facts=False, margin_top=20, margin_bottom=20) -%}
<div class="ui fluid icon input hide" style="margin-bottom:20px">
  <input {% if autofocus %} autofocus="autofocus" {% endif %} class="filter-table" placeholder="Type here to filter...">
</div>
<table class="filter-table facts ui compact basic table facts {% if condensed %}compact{% endif%}" style="table-layout: fixed;">
  <thead>
    <tr>
      {% if show_node %}
      <th>Node</th>
      {% else %}
      <th>Fact</th>
      {% endif %}
      {% if show_value %}
      <th>Value</th>
      {% endif %}
    </tr>
  </thead>
  <tbody class="searchable">
    {% for fact in facts %}
    <tr>
      {% if show_node %}
        <td><a href="{{url_for('node', node_name=fact.node)}}">{{fact.node}}</a></td>
      {% else %}
        <td><a href="{{url_for('fact', fact=fact.name)}}">{{fact.name}}</a></td>
      {% endif %}
      {% if show_value %}
      <td style="word-wrap:break-word">
        {% if link_facts %}
          <a href="{{url_for('fact_value', fact=fact.name, value=fact.value)}}">{{fact.value}}</a>
        {% else %}
          {{fact.value}}
        {% endif %}
      </td>
      {% endif %}
    </tr>
    {% endfor %}
  </tbody>
</table>
{%- endmacro %}
{% macro facts_graph(facts, autofocus=False, condensed=False, show_node=False, margin_top=20, margin_bottom=20) -%}
<script src="{{url_for('static', filename='js/d3.min.js')}}"></script>
<script src="{{url_for('static', filename='js/c3.min.js')}}"></script>
<div id="factChart" width="300" height="300"></div>
<script type="text/javascript">
  var data = [
{% for fact in facts|groupby('value') %}
    {
    label: '{{ fact.grouper.replace("\n", " ") }}',
    value: {{ fact.list|length }}
    },
{% endfor %}
    {
    value: 0,
    }
  ]
  var fact_values = data.map(function(item) { return [item.label, item.value]; }).filter(function(item){return item[0];}).sort(function(a,b){return a[1] - b[1];});
  var realdata = fact_values.slice(0, 15);
  var otherdata = fact_values.slice(15);
  if (otherdata.length > 0) {
    realdata.push(["other", otherdata.reduce(function(a,b){return a + b[1];},0)]);
  }
  var chart = c3.generate({
      bindto: '#factChart',
      data: {
          columns: realdata,
          type : 'pie',
      }
  });

</script>
{%- endmacro %}

{% macro reports_table(reports, nodename, reports_count, condensed=False, hash_truncate=False, show_conf_col=True, show_agent_col=True, show_host_col=True) -%}
<div class="ui info message">

  Only showing the last {{reports_count}} reports.

</div>
<table class='ui table basic {% if condensed %}compact{% endif %}'>
  <thead>
    <tr>
      <th>Start time</th>
      <th>Run time</th>
      <th>Full report</th>
      {% if show_conf_col %}
        <th>Configuration version</th>
      {% endif %}
      {% if show_agent_col %}
        <th>Agent version</th>
      {% endif %}
      {% if show_host_col %}
        <th>Hostname</th>
      {% endif %}
    <tr>
  </thead>
  <tbody>
  {% for report in reports %}
    {% if hash_truncate %}
    {% set rep_hash = "%s&hellip;"|format(report.hash_[0:10])|safe %}
    {% else %}
    {% set rep_hash = report.hash_ %}
    {% endif %}
    {% if report.failed %}
    <tr class="error">
    {% else %}
    <tr>
    {% endif %}
    <td rel="utctimestamp">{{report.start}}</td>
      <td>{{report.run_time}}</td>

      <td><a href="{{url_for('report', node_name=nodename, report_id=report.hash_)}}">{{rep_hash}}</a></td>
      {% if show_conf_col %}
        <td>{{report.version}}</td>
      {% endif %}
      {% if show_agent_col %}
        <td>{{report.agent_version}}</td>
      {% endif %}
      {% if show_host_col %}
        <td><a href="{{url_for('node', node_name=report.node)}}">{{ report.node }}</a></td>
      {% endif %}
    </tr>
    {% endfor %}
  </tbody>
</table>
{%- endmacro %}
