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

{{ define "content" }}
    <div class="row">
        <form class="form-inline" action="/comic/comics">
            <input type="text" placeholder="Search" name="query">
            <label>
                <input type="checkbox" name="completed" {{ if .completed }}checked{{ end }}>Completed
            </label>
            <label>
                <input type="checkbox" name="order" {{ if .order }}checked{{ end }}>Order
            </label>
            <button type="submit">Search</button>
            <div class="pill-nav"><a href="/comic/comic/add">Add Comic</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="/comic/comics/{{.ID}}">{{.Title}}</a></th>
                    {{ if .Publisher }}
                    <td><a href="/comic/publishers/{{.Publisher.ID}}">{{.Publisher.Name}}</a></td>
                    {{ else }}
                    <td>Publisher not set</td>
                    {{ end }}
                    <td>
		                {{ if .Completed }}
		                <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="/comic/comics/edit/{{.ID}}" class="btn btn-outline-primary btn-sm active" role="button" aria-pressed="true">Edit</a></td>
                    <td><a href="/comic/comics/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 }}