{% extends 'templates/default.twig' %}

{% block javascripts %}
  <script type="text/javascript" src="/js/music.js"></script>
{% endblock %}

{% block title %}Music Design #2{% endblock %}

{% block content %}

  <header id="music-header" class="row">
    <h1>Music</h1>
  </header>

  <!-- music player -->
  <section class="row">
    <!-- no javascript warning -->
    <noscript class="card">Woah there, lassy! You will need to enable Javascript to use this page!</noscript>

    <!-- left stuff -->
    <div class="col-sm-5 col-xs-12">
      <!-- now playing -->
      <div class="thumbnail shadow-1">
        <img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
        <div class="caption">
          <h3 id="album-title">{{ albums[0].title }}</h3>
          <h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5>
          {% if albums[0].description %}
            <hr />
            <p id="album-description">{{ albums[0].description }}</p>
          {% endif %}
        </div>
      </div>

      <!-- music player -->
      <article id="music-player-card" class="card">
        <h4 id="track-title">{{ songs[0].title }}</h4>
        <audio id="music-player" controls>
          <source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
          <source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" />
        </audio>
      </article>

      <!-- available songs -->
      <article class="card">
        <ul class="now-playing-list">
          {% for song in songs %}
            <li class="music-track {% if loop.index0 == 0 %}selected{% endif %}" data-trackid="{{ song.id }}" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
              <span>{{ song.track_order }}. {{ song.title }}</span>
            </li>
          {% endfor %}
        </ul>
      </article>
    </div>

    <!-- right stuff -->
    <div class="col-sm-7 col-xs-12">
      <div class="row">
        {% for album in albums %}
          <!-- album details -->
          <div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-xs-6" data-albumid="{{ album.id }}">
            <div class="thumbnail shadow-1">
              <img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
              <div class="caption">
                <h5>{{ album.title }} ({{ album.releaseYear }})</h5>
                {% if album.description %}
                  <hr />
                  <p id="album-description">{{ album.description|length > 50 ? album.description[:50] ~ '...' : album.description }}</p>
                {% endif %}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>

{% endblock %}