@page
@model NowModel
@{
    ViewData["Title"] = "Now";
}

<div class="text-center">
    <h1 class="display-4">Now</h1>
    <div id="app" class="app col-12">
        <now-playing-card :track="currentlyPlaying.track" v-if="currentlyPlaying !== null && currentlyPlaying !== undefined" ></now-playing-card>
        <now-playing-card v-else ></now-playing-card>

        <popularity :track="currentlyPlaying.track" v-if="currentlyPlaying !== null && currentlyPlaying !== undefined && currentlyPlaying.track != null && currentlyPlaying.track != undefined" ></popularity>
        <audio-feature-card :feature="trackFeatures" v-if="trackFeatures !== null && trackFeatures !== undefined" /></audio-feature-card>
        <audio-feature-chart-card :feature="trackFeatures" v-if="trackFeatures !== null && trackFeatures !== undefined" /></audio-feature-chart-card>
        <play-count-card :count="playCount" :track="lastfmTrack" :username="playCount.username" v-if="playCount !== null && playCount !== undefined" /></play-count-card>
        <info-card v-for="card in cards" :html="card.html"></info-card>
    </div>
</div>

@section Scripts {
    <script type="module" src="~/js/now.bundle.js"></script>
}