{{define "content"}}
{{if not .}}<p>no captures found</p>
{{else}}
<div class="row">
    <div class="input-field">
        <select id="orderBy" name="orderBy" hx-get="/captures?limit=10&offset=0" hx-target="#main-section" hx-push-url="true">
            <option value="1" {{if not (eq "2" (Query "orderBy"))}}selected{{end}}>Most downloaded</option>
            <option value="2" {{if eq "2" (Query "orderBy")}}selected{{end}}>Most recent</option>
        </select>
        <label for="" orderBy>Order By</label>
    </div>
</div>
{{end}}

<ul class="collapsible">
    {{range .}}
    <li>
        <div class="collapsible-header {{if .Favorite}}yellow lighten-4{{end}}"><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"><i
                        class="material-icons">star</i>{{formatRate .Rate}}</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="/captures/{{.ID}}/file" class="waves-effect waves-light btn">
                    <i class="material-icons right">download</i>Download</a>
                {{if User.Logged}}{{if .Favorite}}<a href="#" hx-delete="/users/{{User.ID}}/captures/{{.ID}}"
                    hx-target="#messages" class="waves-effect waves-light btn">
                    <i class="material-icons right">favorite_border</i>Remove from Favorite</a>{{else}}
                <a href="#" hx-post="/users/{{User.ID}}/captures/{{.ID}}" hx-target="#messages"
                    class="waves-effect waves-light btn">
                    <i class="material-icons right">favorite</i>Mark as Favorite</a>
                {{end}}
                <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}}