{{define "content" -}}
<div class="wrap">
  {{with .Data}}
  <h1 class="admin-title">Asset types</h1>
  <p class="card-loc match-intro">Editable content type &mdash; the kinds of asset a listing can be. This is what makes it a CMS: the taxonomy is data you manage here, not hard-coded.</p>
  <div class="detail-grid">
    <table class="data">
      <thead><tr><th>Icon</th><th>Name</th><th>Slug</th><th>Category</th><th></th></tr></thead>
      <tbody>
      {{range .Types}}
      <tr>
        <td class="type-emoji">{{.Icon}}</td>
        <td>{{.Name}}</td>
        <td><code>{{.Slug}}</code></td>
        <td>{{.Category}}</td>
        <td><form method="post" action="/admin/types/{{.ID}}/delete" onsubmit="return confirm('Delete this asset type?')"><button class="btn btn-danger btn-sm">Delete</button></form></td>
      </tr>
      {{end}}
      </tbody>
    </table>
    <aside class="panel">
      <h3>Add a type</h3>
      <form method="post" action="/admin/types">
        <div class="form-row"><label for="name">Name</label><input type="text" id="name" name="name" required></div>
        <div class="form-row"><label for="slug">Slug</label><input type="text" id="slug" name="slug" required placeholder="e.g. pontoon-boat"></div>
        <div class="form-row"><label for="category">Category</label>
          <select id="category" name="category"><option value="rv">RV</option><option value="marine">Marine</option><option value="cabin">Cabin</option></select></div>
        <div class="form-row"><label for="icon">Icon (emoji)</label><input type="text" id="icon" name="icon" placeholder="&#128676;"></div>
        <button class="btn btn-primary btn-block" type="submit">Add type</button>
      </form>
    </aside>
  </div>
  {{end}}
</div>
{{- end}}