<a class="song-item" href="{{ path('song.detail', {songId: song.id}) }}">
    <div class="song-cover" style="background-image: url({{ asset("uploads/thumbnail/" ~ song.fileReference ~ ".jpg?v=" ~ date().timestamp) }}), url({{ asset("assets/img/defaultAlbumArt.jpg") }});">
        <div class="song-charter-info">
            <div class="song-charter"><i class="mdi mdi-account-circle"></i><span>{{ song.charter|default('Unknown') }}</span></div>
        </div>
    </div>
    <div class="song-metadata">
        <div class="song-title">{{ song.title|default('Untitled') }}</div>
        <div class="song-artist">{{ song.artist|default('Unknown') }}</div>
        <div class="song-difficulties">
            <div class="difficulty {{ song.hasEasyDifficulty ? "active" : "" }}"><span>E</span></div>
            <div class="difficulty {{ song.hasNormalDifficulty ? "active" : "" }}"><span>N</span></div>
            <div class="difficulty {{ song.hasHardDifficulty ? "active" : "" }}"><span>H</span></div>
            <div class="difficulty {{ song.hasExtremeDifficulty ? "active" : "" }}"><span>EX</span></div>
            <div class="difficulty {{ song.hasXDDifficulty ? "active" : "" }}"><span>XD</span></div>
            <!-- <img src="{{ asset('assets/img/difficultyEasy.svg') }}" class="{{ song.hasEasyDifficulty ? "active" : "" }}" alt="Easy Difficulty" />
            <img src="{{ asset('assets/img/difficultyNormal.svg') }}" class="{{ song.hasNormalDifficulty ? "active" : "" }}" alt="Normal Difficulty" />
            <img src="{{ asset('assets/img/difficultyHard.svg') }}" class="{{ song.hasHardDifficulty ? "active" : "" }}" alt="Hard Difficulty" />
            <img src="{{ asset('assets/img/difficultyExtreme.svg') }}" class="{{ song.hasExtremeDifficulty ? "active" : "" }}" alt="Extreme Difficulty" />
            <img src="{{ asset('assets/img/difficultyXD.svg') }}" class="{{ song.hasXDDifficulty ? "active" : "" }}" alt="xD Difficulty" /> -->
        </div>
    </div>
</a>