{{define "templates"}}
<!doctype html>
<html lang="en">
<head>
  <title>{{.Title}}</title>
  {{template "head" .}}
</head>
<body>
  {{template "nav" .}}
  {{if .Msg}}<div class="flash flash-ok">{{.Msg}}</div>{{end}}
  {{if .Err}}<div class="flash flash-err">{{.Err}}</div>{{end}}
  <h1>Templates</h1>
  <form method="post" action="/templates/sync">
    <button type="submit">Sync AI Templates</button>
  </form>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Locale</th>
        <th>AI</th>
        <th>Manifest Status</th>
        <th>Onboarded</th>
        <th>Preview</th>
      </tr>
    </thead>
    <tbody>
      {{range .Templates}}
      <tr>
        <td>{{.ID}}</td>
        <td><a href="/templates/{{.ID}}">{{.Name}}</a></td>
        <td>{{.Locale}}</td>
        <td>{{if .IsAITemplate}}yes{{else}}no{{end}}</td>
        <td>{{.ManifestStatus}}</td>
        <td>{{if .IsOnboarded}}yes{{else}}no{{end}}</td>
        <td>
          {{if .TemplatePreviewURL}}<a href="{{.TemplatePreviewURL}}" target="_blank" rel="noopener">open</a>{{end}}
          {{if .ThumbnailURL}}
          <span class="thumb-hover">
            <a href="{{.ThumbnailURL}}" target="_blank" rel="noopener">thumbnail</a>
            <span class="thumb-preview"><img src="{{.ThumbnailURL}}" alt="Template thumbnail for {{.Name}}" loading="lazy"></span>
          </span>
          {{end}}
        </td>
      </tr>
      {{else}}
      <tr><td colspan="7">No templates available. Run sync.</td></tr>
      {{end}}
    </tbody>
  </table>
</body>
</html>
{{end}}
