<!DOCTYPE html>
<html>
    <head>
        <title>beets</title>

        <link rel="stylesheet"
        href="{{ url_for('static', filename='beets.css') }}" type="text/css">

        <script src="{{ url_for('static', filename='jquery.js') }}"></script>
        <script src="{{ url_for('static', filename='underscore.js') }}">
        </script>
        <script src="{{ url_for('static', filename='backbone.js') }}"></script>
        <script src="{{ url_for('static', filename='beets.js') }}"></script>
    </head>
    <body>
        <div id="header">
            <h1>beets</h1>
            <div id="player">
                <audio></audio>

                <button class="disabled">&#9654;</button>
                <button class="play">&#9654;</button>
                <button class="pause" style="letter-spacing: 1px;">&#10073;&#10073;</button>

                <span class="times">
                    <span class="currentTime">
                    </span>
                </span>
            </div>
        </div>

        <div id="entities">
            <form id="queryForm">
                <input type="search" id="query" placeholder="Query">
            </form>
            <ul id="results">
            </ul>
        </div>

        <div id="main-detail">
        </div>

        <div id="extra-detail">
        </div>

        <!-- Templates. -->
        <script type="text/template" id="item-entry-template">
            <%= title %>
            <span class="playing">&#9654;</span>
        </script>
        <script type="text/template" id="item-main-detail-template">
            <span class="artist"><%= artist %></span>
            <span class="album">
                <span class="albumtitle"><%= album %></span>
                <span class="year">(<%= year %>)</span>
            </span>
            <span class="title"><%= title %></span>

            <button class="play">&#9654;</button>

            
        </script>
        <script type="text/template" id="item-extra-detail-template">
            <dl>
                <dt>Track</dt>
                <dd><%= track %>/<%= tracktotal %></dd>
                <% if (disc) { %>
                    <dt>Disc</dt>
                    <dd><%= disc %>/<%= disctotal %></dd>
                <% } %>
                <dt>Length</dt>
                <dd><%= timeFormat(length) %></dd>
                <dt>Format</dt>
                <dd><%= format %></dd>
                <dt>Bitrate</dt>
                <dd><%= Math.round(bitrate/1000) %> kbps</dd>
                <% if (mb_trackid) { %>
                    <dt>MusicBrainz entry</dt>
                    <dd>
                        <a target="_blank" href="http://musicbrainz.org/recording/<%= mb_trackid %>">view</a>
                    </dd>
                <% } %>
                <dt>File</dt>
                <dd>
                    <a target="_blank" class="download" href="item/<%= id %>/file">download</a>
                </dd>
                <% if (lyrics) { %>
                    <dt>Lyrics</dt>
                    <dd class="lyrics"><%= lyrics %></dd>
                <% } %>
                <% if (comments) { %>
                    <dt>Comments</dt>
                    <dd><%= comments %></dd>
                <% } %>
            </dl>
        </script>
    </body>
</html>
