<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MatterLinux | Security</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200">
    <link href="/global.css" rel="stylesheet">
    <link href="/index.css" rel="stylesheet">
  </head>
  <body>
    {{template "parts/bar" .}}
    <main>
      <div class="search">
        <form action="/" method="GET" class="search-header">
          <div>
            <label>Search for...</label>
            <input type="text" name="q" placeholder="libwebp" value="{{.query}}" autofocus>
          </div>
          <div>
            <label>Search in...</label>
            <select name="i">
              <option value="desc">Descriptions</option>
              <option value="status">Status</option>
              <option value="id">IDs</option>
              <option value="pkg">Package names</option>
            </select>
          </div>
        </form>
        <div class="search-footer">
          <p>Listing <strong>{{len .vulns}}</strong> issues</p>
          <p><strong>Page:</strong> {{.current}}/{{.pages}}</p>
        </div>
      </div>
      <div class="vulns">
        {{range .vulns}}
          <div class="vuln">
            <div class="vuln-header">
              <h1>{{.ID}}</h1>
              <h3 class="sev-{{.Severity}}">{{.Severity}}</h3>
            </div>
            <p>{{.Desc}}</p>
            <table>
              <tr>
                <th>Affected package</th>
                <th>Affected versions</th>
              </tr>
              <tr>
                <td><a href="https://tracker.matterlinux.xyz/?e=1&r=all&n={{.Package}}">{{.Package}}</a></td>
                <td>{{.Versions}}</td>
              </tr>
            </table>
            <div class="vuln-footer">
              <p style="color: var(--{{.StatusColor}})"><strong>Status:</strong> {{.Status}}</p>
              <a href="/details/{{.ID}}">View details</a>
            </div>
          </div>
        {{end}}
      </div>
      {{if and (.vulns) (ne .pages 1)}}
        <div class="pages">
          {{if eq .current 1}}
            <a class="invalid">Previous page</a>
          {{else}}
            <a href="/?q={{.query}}&i={{.in}}&p={{.prev}}">Previous page</a>
          {{end}}
          {{if eq .current .pages}}
            <a class="invalid">Next page</a>
          {{else}}
            <a href="/?q={{.query}}&i={{.in}}&p={{.next}}">Next page</a>
          {{end}}
        </div>
      {{end}}
    </main>
  </body>
</html>