<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Automatic interface for Mopidy">

    <title>Mopidy Auto</title>

    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="icon.png">

    <link rel="stylesheet" href="vendor/pure-min.css" type="text/css">
    <link rel="stylesheet" href="vendor/grids-responsive-min.css" type="text/css">
    <link rel="stylesheet" href="css/auto.css" type="text/css">
</head>
<body>
<div id="track-time">
    <span id="track-position">0:00</span> / <span id="track-length">0:00</span>
</div>
<div id="layout" class="pure-g">
    <div class="pure-u-1">
        <h1 id="current-track">Track</h1>
        <div>by <span class="artist" id="current-artist">Artist</span></div>
        <div>on <span class="album" id="current-album">Album</span></div>
    </div>

    <div class="pure-u-1-3">
        <div id="play-div">
            <img class="action" id="play" src="images/ic_play_arrow_black_48px.svg"><br>
            <span class="description">Play</span>
        </div>
        <div id="pause-div" class="initial-hidden">
            <img class="action" id="pause" src="images/ic_pause_black_48px.svg"><br>
            <span class="description">Pause</span>
        </div>
    </div>
    <div class="pure-u-1-3 next-button disabled">
        <img class="action" id="next-track" src="images/ic_fast_forward_black_48px.svg"><br>
        <span class="description">Next track</span>
    </div>
    <div class="pure-u-1-3 next-button disabled">
        <img class="action" id="next-album" src="images/ic_skip_next_black_48px.svg"><br>
        <span class="description">Next album</span>
    </div>

    <div class="pure-u-1">
        <input type="range" min="0" max="100" step="5" id="volume" class="slider">
    </div>

    {% if authed %}
    {% include 'admin.html' %}
    {% else %}
        <div id="admin" class="pure-u-1">
            <div id="admin-unlock">
                <form id="unlock-form" class="pure-form pure-g" method="post">
                    <div class="pure-u-1-2">
                        <input name="password" type="password" placeholder="Key" class="pure-input-1">
                    </div>
                    <div class="pure-u-1-2">
                        <input type="submit" value="Unlock" class="pure-button pure-input-1">
                    </div>
                </form>
            </div>
        </div>
    {% end %}
</div>

<script type="text/javascript" src="/mopidy/mopidy.min.js"></script>
<script type="text/javascript" src="vendor/zepto.js"></script>
<script type="text/javascript" src="js/auto.js"></script>
</body>
</html>