{% extends 'base.html' %}

{% block content %}
    <div class="container-fluid">
        <div class="row bg-black justify-content-around py-3">
            <div class="col-3">
                {%  if result is defined %}
                <img class="img-fluid mx-auto d-block" src="{{ result.album.cover_art_url }}" alt="Random Img">
                {% else %}
                <img class="img-fluid mx-auto d-block" src="https://picsum.photos/1000" alt="Random Img">
                {% endif %}
            </div>
            <div class="col-7 d-flex flex-column justify-content-center">
                <div class="text-white">
                    {% if result is defined %}
                        <div class="d-flex">
                            <div class="col">
                                <h1>{{ result.title }}</h1>
                                <h1>{{ result.primary_artist.name }}</h1>
                                <h1>{{ result.album.name }}</h1>
                                <h1>{{ result.release_date_for_display }}</h1>
                                <h1>{{ result.genre }}</h1>
                                <h1>Views:{{ result.views }}</h1>

                            </div>
                            <div class="col">
                                <h1 class="text-end">
                                    {% if result.liked == False %}
{#                                        TODO: Update user id#}
                                    <a href="{{ '/like_song?genius_id='~result.id~'&user_id=1' }}"><i class="bi bi-heart" ></i></a>
                                    {% else %}
                                    <a href="{{ '/dislike_song?genius_id='~result.id~'&user_id=1' }}"><i class="bi bi-heart-fill" ></i></a>
                                    {% endif %}
                                </h1>
                            </div>
                        </div>

                    {% else %}
                    <h1>Song Name</h1>
                    <h1>Song Artist</h1>
                    <h1>Album</h1>
                    <h1>Release Date</h1>
                    <h1>Genre</h1>
                    {% endif %}
                </div>

            </div>
        </div>
    </div>
    <div class="container mt-5">

        <div class="row row-cols-2 mb-3" id="MusicPlayers">
            {% if result.media is defined %}
            <div class="col text-center">
                <a class="text-decoration-none text-black" href="#MusicVideoModel" data-bs-toggle="modal" data-bs-target="#MusicVideoModel">
                    <h1><i class="bi bi-film"></i></h1>
                    <h3>Watch Music Video</h3>
                </a>
            </div>
            {% endif %}
        </div>
        <div id="MusicInfo">
            {% if result is defined %}
                {{ result.description_preview }}
            {% else %}
            {{ lipsum(5) }}
            {% endif %}
        </div>
    </div>
    <div class="d-flex justify-content-center">
        <div class="d-flex col-10 align-items-end">
            <iframe class="w-100 h-50" id="sampleMusic" src="" frameborder="0"></iframe>
        </div>
    </div>

<div class="modal fade" id="MusicVideoModel" tabindex="-1" aria-labelledby="MusicVideoModel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
        <div class="ratio ratio-16x9">
          <iframe src="https://www.youtube.com/embed/{{ result.youtube_id }}" title="YouTube video" allowfullscreen></iframe>
        </div>

    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    $( document ).ready(function() {
        $('#sampleMusic').attr('src','{{ result.apple_music_player_url }}');

    });
</script>
{% endblock %}