{{define "content"}}
<div class="row">
    <div class="col s12 m4">
        <h5 class="center">Find top-quality Captures</h5>
    </div>
</div>

<div class="row">
    <div class="col s6">
        <table>
            <thead>
                <td>Most downloaded</td>
            </thead>
            <tbody>
                {{range .MostDownloaded}}
                <tr>
                    <td>
                        <span class="truncate"><a href="#" hx-get="/captures/{{.ID}}" hx-target="#main-section"
                                hx-push-url="true">{{.Name}}</a></span>
                    </td>
                </tr>
            </tbody>
            {{end}}
        </table>
    </div>
    <div class="col s6">
        <table>
            <thead>
                <td>Most recent</td>
            </thead>
            <tbody>
                {{range .MostRecent}}
                <tr>
                    <td>
                        <span class="truncate"><a href="#" hx-get="/captures/{{.ID}}" hx-target="#main-section"
                                hx-push-url="true">{{.Name}}</a></span>
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</div>

<div class="row">
    <form hx-get="/captures" hx-target="#main-section">
        <input type="hidden" name="offset" value="0">
        <input type="hidden" name="limit" value="10">
        <div class="row">
            <div class="input-field col s6">
                <select id="orderBy" name="orderBy">
                    <option value="1" selected>Most downloaded</option>
                    <option value="2">Most recent</option>                    
                </select>
                <label for="" orderBy>Order By</label>
            </div>
        
            <div class="input-field col s6">
                <label class="label-icon" for="search"><i class="material-icons">search</i></label>
                <input id="search" name="arg" type="search" placeholder="Filter all captures">
            </div>
        </div>
        <div class="row">
            <button class="btn waves-effect waves-light" type="submit" name="action">Search
                <i class="material-icons right">search</i>
            </button>
        </div>
    </form>
</div>
{{end}}