<style>
  table{
    text-align: left;
    min-width:50em;
  }
  tbody tr:hover{
    background-color: gray;
  }
  body {
    font-family: monospace;
    background-color: black;
    color: white;
  }
  a:link {
    color: green;
    background-color: transparent;
  }
</style>

<h1>{{ repo.name }}</h1>
<h2>{{ repo.desc }}</h2>
<hr>
<h2>Branches</h2>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Last commit</th>
        <th>Author</th>
      </tr>
    </thead>
    <tbody>
      {% for b in repo.branches %}
      <tr>
        <td>{{ b.name }}</td>
        <td>{{ b.lastcommit }}</td>
        <td>{{ b.author }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <hr>
<h2>File Tree (HEAD)</h2>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Size</th>
      </tr>
    </thead>
    <tbody>
      {% for f in repo.files %}
      <tr>
        <td><a href="{{ repo.name }}/{{ f.id }}">{{ f.path }}</a></td>
        <td>{{ f.size }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
<hr>
<h2>History</h2>
{{ repo.commit_graph|safe }}
<hr>
<h2>Contents of README.md</h2>
{{ repo.readme|safe }}