<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
    <head>
        <title>EiskaltDC++ Web Frontend</title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <script data-main="js/main.js" src="js/lib/require.js"></script>
    </head>
    <body>
        <div class="section" id="titlediv">
            <h1>
                <img style="margin: 0 3px -3px 0;" height="28px" src="images/eiskaltdcpp.png">
                EiskaltDC++ Web Frontend
            </h1>
            <div id="connectionerror">Not connected yet...</div>
        </div>

        <div id="tab-container" class="tab-container">
            <ul class="tab-header">
                <li class="tab"><a href="#tab-downloads">Downloads</a></li>
                <li class="tab"><a href="#tab-search">Search</a></li>
                <li class="tab"><a href="#tab-status">Status</a></li>
            </ul>

            <div class="section" id="tab-downloads">
                <h2>Download Queue</h2>
                <table class="tablesorter" id="downloadqueue">
                    <thead>
                        <tr>
                            <th>Remove</th>
                            <th width="65%" key="Filename">Filename</th>
                            <th width="5%" key="Size" data-sortinitialorder="desc">Size</th>
                            <th width="15%" key="Downloaded" data-sortinitialorder="desc">Progress</th>
                            <th width="15%" key="Status">Status</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <div class="section" id="tab-search">
                <h2>Search</h2>
                <p>
                    <input name="searchstring" id="searchstring" type="text"/>
                    <select id="searchtype"></select>
                    <input name="search" id="search" type="button" value="Search" /><br>
                </p>
                <table class="tablesorter" id="searchresults">
                    <thead>
                        <tr>
                            <th width="5%" key="UserLink" id="userlink">Web</th>
                            <th width="5%" key="MagnetLink" id="magnetlink">Magnet</th>
                            <th width="5%" key="DownloadLink">Download</th>
                            <th width="5%" key="UserCount" data-sortinitialorder="desc">Count</th>
                            <th width="10%" key="Size" data-sortinitialorder="desc">Size</th>
                            <th key="Filename">Filename</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <div class="section" id="tab-status">

                <h2>Statistics</h2>
                <div id="statisticaldata">Statistics are not yet known...</div>
                <h2>Connected Hubs</h2>
                <table class="tablesorter" id="connectedhubs">
                    <thead>
                        <tr>
                            <th align="center">Connected</th>
                            <th width="15%" key="description">Address</th>
                            <th width="65%" key="hubname">Hub name</th>
                            <th width="5%"  key="users" align="right" data-sortinitialorder="desc">Users</th>
                            <th width="10%" key="totalshare" align="right" data-sortinitialorder="desc">Total share</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <div id="debugdiv">
                <h2>Debug Output</h2>
                <pre id="debugout"></pre>
            </div>
        </div>
    </body>
</html>
