<!DOCTYPE html>
<html>
<head>
  <title> Ansible Linux Automation Report </title>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="css/new.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</head>
<body>
<div class="wrapper">
  {% include 'header.j2' %}
<section>
<center>
<h1>Ansible Automation Reports</h1>
<h3><input type="search" placeholder="Search..." class="form-control search-input" data-table="main_net_table"/>
</center>
<table class="table table-striped mt32 main_net_table">
<tbody>
{% for report in reports.files %}
        {% set page = report.path.split('/')[-1] %}
        <tr>
            <td class="summary_info">
              <div id="hostname">
                <p class="hostname"> <img class="router_image" src="report.png"></p>
              </div>
            </td>
            <td>
              <a href="{{ reports_dir }}/{{ page }}"> {{ page }} <a>
            </td>
{% endfor %}
</tbody>
</table>
<center><p>Created with</p><br><img src="webpage_logo.png" width="300">
</center>
</section>
</div>
</body>
</html>
