<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="the music geek’s media organizer">
        <meta name="keywords"
              content="beets, media, music, library, metadata, player, tagger, grep, transcoder, organizer">
        <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">
            <% if (artist) { %><%- artist %><% } %>
            <% if (artist && album) { %> &ndash; <% } %>
            <% if (album) { %><%- album %><% } %>
            <% if ((artist || album) && title) { %> &ndash; <% } %>
            <%- 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>
