<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MatterLinux | Packages</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200">
    <link href="/style.css" rel="stylesheet">
  </head>
  <body>
    {{template "parts/bar" .}}
    <main>
      <form action="/" method="GET">
        <div class="options">
          <select name="pools">
            <option value="">Select pool</option>
            {{range .pools}}
              <option value="{{.ID}}">{{.Display}}</option>
            {{end}}
          </select>
          <div class="checkbox">
            <input type="checkbox" name="exact" value="1">
            <label>Only show exact matches</label>
          </div>
          <div class="checkbox">
            <input type="checkbox" name="json" value="1">
            <label>Show results as JSON</label>
          </div>
        </div>
        <div class="search">
          {{if .query}}
            <input placeholder="Hit enter to search" type="text" name="q" value="{{.query}}">
          {{else}}
            <input placeholder="Hit enter to search" type="text" name="q" autofocus>
          {{end}}
          <div class="status">
            <p>Listing {{len .list}} packages</p>
            <p>Last updated: {{.last}}</p>
          </div>
        </div>
      </form>
      <table class="list">
        <tr>
          <th>Name</th>
          <th>Pool</th>
          <th>Version</th>
          <th>Size</th>
          <th>Description</th>
          <th>Dependencies</th>
        </tr>
        {{range .list}}
          <tr>
            <td><a href="/p/{{.Name}}/{{.Version}}?p={{.Pool.ID}}">{{.Name}}</a></td>
            {{if .Pool}}
              <td>{{.Pool.Display}}</td>
            {{else}}
              <td></td>
            {{end}}
            <td>{{.Version }}</td>
            <td>{{.Size}}</td>
            <td>{{.Desc}}</td>
            <td>{{.DependsToStr}}</td>
          </tr>
        {{end}}
      </table>
    </main>
  </body>
</html>