<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Search - magneticow</title>

    <link rel="stylesheet" href="/static/styles/reset.css">
    <link rel="stylesheet" href="/static/styles/essential.css">
    <link rel="stylesheet" href="/static/styles/torrents.css">

    <script src="/static/scripts/mustache-v2.3.0.min.js"></script>
    <script src="/static/scripts/common.js"></script>
    <script src="/static/scripts/torrents.js"></script>

    <script id="item-template" type="text/x-handlebars-template">
        <li>
            <div>
                <h3><a href="/torrents/{{infoHash}}">{{name}}</a></h3>
                <a href="magnet:?xt=urn:btih:{{infoHash}}&dn={{name}}">
                    <img src="static/assets/magnet.gif" alt="Magnet link"
                         title="Download this torrent using magnet" /> <small>{{infoHash}}</small></a>
            </div>
            {{size}}, {{discoveredOn}}
        </li>
    </script>
</head>
<body>
<header>
    <div><a href="/"><b>magnetico<sup>w</sup></b></a>&#8203;<sub>(pre-alpha)</sub></div>
    <!-- TODO: why make a GET request again? handle it client-side -->
    <form action="/torrents" method="get" autocomplete="off" role="search">
        <input type="search" name="query" placeholder="Search the BitTorrent DHT">
    </form>
    <div>
        <a href="/feed" id="feed-anchor"><img src="static/assets/feed.png"
                                               alt="feed icon" title="subscribe" /> subscribe</a>
    </div>
</header>
<main>
    <ul>
    </ul>
</main>
<footer>
    <button onclick="load();">
        Load More Results
    </button>
</footer>
</body>
</html>