<div class="py-3">
    <div *ngIf="artists.length==0" class="no-results mx-auto text-center">No music related artist details to show</div>
    <div id="carouselControls" class="carousel slide px-5" data-bs-ride="carousel" *ngIf="artists.length > 0 && detailsLoaded">
        <div class="carousel-inner px-4">
            <div *ngFor="let artist of artistsDetails; let i = index;" >
                <div class="carousel-item" [class.active]="i == 0">
                    <div class="row m-3">
                        <div class="col-sm">
                            <div class="detail-container m-auto">
                                <img *ngIf="artist.artistImgUrl != ''" class="rounded-circle artist-img mx-auto"
                                    src="{{artist.artistImgUrl}}">
                                <div class="detail-label h4 py-2">{{artist.name}}</div>
                            </div>
                        </div>
                        <div class="col-sm" *ngIf="artist.popularity >= 0">
                            <div class="detail-container m-auto mt-5">
                                <div class="detail-label h5">Popularity</div>
                                <div class="mt-3">
                                    <mat-progress-spinner class="mx-auto" [color]="spinnerColor" [mode]="spinnerMode"
                                        [value]="artist.popularity" diameter="50"></mat-progress-spinner>
                                    <div class="detail-content" style="margin-top: -38px;">{{artist.popularity}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm" *ngIf="artist.followers >= 0" style="vertical-align: middle;">
                            <div class="detail-container m-auto mt-5">
                                <div class="detail-label h5">Followers</div>
                                <div class="detail-content mt-3">{{followerNumberFormat(artist.followers)}}</div>
                            </div>
                        </div>
                        <div class="col-sm" *ngIf="artist.link != ''" style="vertical-align: middle;">
                            <div class="detail-container m-auto mt-5">
                                <div class="detail-label h5">Spotify Link</div>
                                <a href="{{artist.link}}" target="_blank" class="mt-3"
                                    style="text-decoration: none; display: block;"><i class="fa-brands fa-spotify fa-2x"
                                        style="color: #1ed760; display: block;"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="detail-label ms-2 mt-4 mb-3 mx-sm-auto" style="font-weight: bold;">Album featuring {{artist.name}}</div>
                        <div class="row">
                            <div class="col-sm p-0 m-2" *ngFor="let imgUrl of artist.albumsImgsUrls"><img class="album-img mx-auto"
                                    src="{{imgUrl}}"></div>
                        </div>
                </div>
            </div>
        </div>
        <div *ngIf="artistsDetails.length > 1">
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselControls" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</div>