{{ define "media_lofi.html" }}
{{ template "main" . }}
{{ end }}

{{ define "content" }}
    <div class="row">
        <form class="form-inline" action="/media/lofi">
            <input type="text" placeholder="Search" name="query">
            <label>
                <input type="checkbox" name="review" {{ if .Review }}checked{{ end }}>Completed
            </label>
            <label>
                <input type="checkbox" name="should_download" {{ if .ShouldDownload }}checked{{ end }}>Order
            </label>
            <button type="submit">Search</button>
            <div class="pill-nav"><a href="/media/lofi/add">Add Lofi</a></div>
        </form>
    </div>
    <div class="row">
        <div class="maincolumn">
            <table class="table table-hover">
                <thead><tr>
                    <th scope="col">Title</th>
                    <th scope="col">Publisher</th>
                    <th scope="col">Completed</th>
                    <th colspan="2">Actions</th>
                </tr></thead>
                <tbody>
                {{ range .comics }}
                <tr>
                    <th scope="row"><a href="/media/lofi/{{.ID}}">{{.Title}}</a></th>
                    {{ if .WebLink }}
                    <td><a href="{{.WebLink}}">{{.Title}}</a></td>
                    {{ else }}
                    <td>WebLink not set</td>
                    {{ end }}
                    <td>
		            {{ if .Review }}
		            <img src="/tick.png" alt="true" width="24" height="24">
		            {{ else }}
		            <img src="/cross.png" alt="true" width="24" height="24">
                    {{ end }}
		            </td>
                    <td><a href="/media/lofi/edit/{{.ID}}" class="btn btn-outline-primary btn-sm active" role="button" aria-pressed="true">Edit</a></td>
                    <td><a href="/media/lofi/delete/{{.ID}}" class="btn btn-outline-danger btn-sm active" role="button" aria-pressed="true">Delete</a></td>
                </tr>
                {{ end }}
            </tbody>
        </table>
      </div>
    </div>
{{ end }}