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

<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.content"></info-card>

        <artist-breakdown :play_count="playCount"
                            v-if="showArtistBreakdown"></artist-breakdown>

        <play-count-chart-card-comb :data_points="combinedData"
                                    :chart_id="'combined'"
                                    :earliest_date="earliestDate"
                                    v-if="showAlbumChart"></play-count-chart-card-comb>
        <play-count-chart-card :data_points="playCount.trackCountData"
                               :title="trackGraphTitle"
                               :chart_id="'track'"
                               :earliest_date="earliestDate"
                               :latest_date="latestDate"
                               :colour="'#7a99c2'"
                               v-if="showTrackChart"></play-count-chart-card>
        <play-count-chart-card :data_points="playCount.albumCountData"
                               :title="albumGraphTitle"
                               :chart_id="'album'"
                               :earliest_date="earliestDate"
                               :latest_date="latestDate"
                               :colour="'#a34c77'"
                               v-if="showAlbumChart"></play-count-chart-card>
        <play-count-chart-card :data_points="playCount.artistCountData"
                               :title="artistGraphTitle"
                               :chart_id="'artist'"
                               :earliest_date="earliestDate"
                               :latest_date="latestDate"
                               :colour="'#598556'"
                               v-if="showArtistChart"></play-count-chart-card>
    </div>
</div>

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