{{define "content"}}
{{if not .}}<p>no captures found</p>{{end}}
<ul class="collapsible">
    {{range .}}
    <li>
        <div class="collapsible-header"><i class="material-icons">
                {{if eq .Type "CLEAN"}}volume_mute{{else if eq .Type "CRUNCH"}}volume_down{{else}}volume_up{{end}}
            </i><a href="#" hx-get="/captures/{{.ID}}" hx-target="#main-section" hx-push-url="true">{{.Name}}</a>
            {{if .HasCab}}(IR){{end}}<span class="badge"><a href="#" hx-get="/captures/{{.ID}}#reviews" hx-target="#main-section" hx-push-url="true"></a>&nbsp;&nbsp;<a href="/captures/{{.ID}}/file">
                    <i class="material-icons">download</i></a>{{.Downloads}}</span>
        </div>
        <div class="collapsible-body"><span>{{.Description}}</span>
            <p><a href="/users/{{.UserID}}/captures">User Favorites</a></p> 
            <p><a href="/captures/{{.ID}}/file" class="waves-effect waves-light btn">
                    <i class="material-icons right">download</i>Download</a> 
                    {{if User.Logged}}
                        <a href="#" hx-get="/captures/{{.ID}}#reviews" hx-target="#main-section" hx-push-url="true" class="waves-effect waves-light btn">
                        <i class="material-icons right">star</i>Add Review</a>{{end}}</p>
            {{if EmbedFrame .DemoLink}}
            <div class="video-container">
                <iframe id="player_{{.ID}}" type="text/html" width="640" height="360" src="{{.DemoLink}}"
                    frameborder="0"></iframe>
            </div>
            {{else if .DemoLink}}
            <p>Demonstration: <a href="{{.DemoLink}}" target="_blank">{{.DemoLink}}</a></p>
            {{end}}
        </div>
    </li>
    {{end}}
</ul>
{{if and Pagination (gt Pagination.TotalPages 1)}}
<ul class="pagination">
    <li class="{{if gt Pagination.CurrentPage 1}}waves-effect{{else}}disabled{{end}}"><a href="#" {{if gt
            Pagination.CurrentPage 1}}hx-get="{{Pagination.URL Pagination.Limit Pagination.Prev}}"
            hx-target="#main-section" hx-push-url="true" {{end}}>
            <i class="material-icons">chevron_left</i></a></li>
    {{range Pagination.PageNumbers}}
    {{if eq . 0}}<li>...</li>{{else}}
    <li class="{{if eq . Pagination.CurrentPage}}active{{else}}waves-effect{{end}}"><a href="#"
            hx-get="{{Pagination.URLPage .}}" hx-target="#main-section" hx-push-url="true">{{.}}</a></li>{{end}}
    {{end}}
    <li class="{{if lt Pagination.CurrentPage Pagination.TotalPages}}waves-effect{{else}}disabled{{end}}">
        <a href="#" {{if lt Pagination.CurrentPage Pagination.TotalPages}}
            hx-get="{{Pagination.URL Pagination.Limit Pagination.Next}}" hx-target="#main-section" hx-push-url="true"
            {{end}}><i class="material-icons">chevron_right</i></a>
    </li>
</ul>
{{end}}
{{end}}