<div class="container-fluid">
    <div class="row align-items-center mt-3">
        <div class="col-2 text-left">
            <button type="button" 
                class="btn {{ ^isLooping }}btn-outline-secondary{{ /isLooping }} {{ #isLooping }}btn-danger{{ /isLooping }}" 
                onclick="player.loop();">
                <i class="fas fa-retweet"></i>
            </button>
        </div>
        <div class="col-8 text-center">
            {{ metadata.track.title }}
        </div>
        <div class="col-2">

        </div>
    </div>
    <div class="row">
        <div class="col-2 text-left">
            {{ getPosition }}
        </div>
        <div class="col-8 text-center">
            {{ metadata.track.artist }}
        </div>
        <div class="col-2 text-right">
            {{ getDuration }}
        </div>
    </div>
    <div class="row no-gutters">
        <div class="col-12">
            <div class="progress" onclick="player.seek(this, event);">
                <div class="progress-bar" role="progressbar" style="width: {{getPercentage}}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
    <div class="row my-3">
        <div class="col-12 text-center">
            <button type="button" class="btn btn-primary" onclick="player.previous()">
                <i class="fas fa-arrow-left"></i>
            </button>
            {{ #isPlaying }}
                <button type="button" class="btn btn-primary" onclick="player.pause()">
                    <i class="fas fa-pause"></i>
                </button>
            {{ /isPlaying }}
            {{ ^isPlaying }}
                <button type="button" class="btn btn-primary" onclick="player.play()">
                    <i class="fas fa-play"></i>
                </button>
            {{ /isPlaying }}
            <button type="button" class="btn btn-primary" onclick="player.next()">
                <i class="fas fa-arrow-right"></i>
            </button>
        </div>
    </div>
</div>