{% if playlists|length > 0 %}
    {% for playlist in playlists %}

        {% if(playlist.has_pass) %}
        <li style="font-size:12px!important;height:100%;" class="splide__slide playlist_item slide_image_wrapper" onclick="$('#suggest-videos').blur();clearTimeout(window.previewplaylist);window.previewplaylist = setTimeout(function(){loadSongsLikePlaylist({{playlist.id}},false,false,false,true);},500);window.suggestion_info=true;$('.suggestion_info').show();" >
            {% else %}
                <li style="font-size:12px!important;height:100%;" class="splide__slide playlist_item slide_image_wrapper" onclick="$('#suggest-videos').blur();clearTimeout(window.previewplaylist);window.previewplaylist = setTimeout(function(){window.pass_price={{ playlist.access_price }}; window.pass_playlist_id={{ playlist.id }};$('#pass_modal').css('display','block');});" >
                {% endif %}
            <span onclick="if(!window.authed){getAuthCode();}else{showShareModal();$('#group_name').html('{{playlist.name}}').trigger('keyup');$('#shareGroupId').val({{playlist.id}});$('.paytoshare').css('display','none');}" style="cursor:pointer;display:none;text-align:center;font-weight:bold;font-size:12px!important;width:100%;color:#fff;"><i class="fas fa-share-alt-square"></i> Add a Song to This Playlist</span>

            <div id="post-167" class=" post-167 page type-page status-publish has-post-thumbnail hentry entry clearfix entry-grid entry-columns-default entry-page-module-layout-standard thumbnail-color-tone-dark is-vimeo has-video entry-page entry-page-grid" data-post-id="{{playlist.id}}" style="font-size:12px!important;width:100%;position: absolute; top: 20px;"> <a target="_blank" class="entry-link" > <span class="entry-inner"> <img style="height:45%;" src="{{ playlist.picture  }}" class="slide_image attachment-medium size-medium wp-post-image" alt="" decoding="async" > </span> </a> <a class="entry-link internal-link" ><h3 style="display:none;" class="entry-title username">{{ playlist.name|slice(0, 30) }}
                    </h3> </a>

                {%  if(playlist.has_pass == true) %}

                    {% if (playlist.access_price > 0) %}

                    <h5 class="mh dh" style="font-size:12px!important;width:100%;text-align:center;">1st Month Free!</h5>
                {%  endif %}
                {%  endif %}


                {%   if(playlist.has_pass != true)  %}
                {%   if(playlist.has_pass != false)  %}
                {%   if(playlist.has_pass_empty)  %}

                    <h5 class="mh dh" style="font-size:12px!important;width:100%;text-align:center;">Paid {{playlist.days_remaining}} Days Remaining</h5>
                {%  endif %}
                {%  endif %}
                {%  endif %}



                {% if(playlist.has_pass  == false)   %}
                    <h3 class="mh dh" style="font-size:12px!important;width:100%;text-align:center;">$ {{ playlist.access_price }}  </h3>
                {%  endif %}



            </div>

                            <h6 class="fsp button-30" style="    top: 60%;
    position: relative;
    color: #000 !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 50%;
    font-size: 14px;
    line-height: 45px;" onclick="$('#suggest-videos').val('{{playlist.name}}').trigger('keyup');" ><i class="fas fa-search"></i></h6>




        </li>


    {% endfor %}
{% else %}
    <li class="splide__slide slide_image_wrapper" onclick="window.suggestion_info=true;$('.suggestion_info').show();">
        <div style="cursor:pointer;">No Playlists Found.</div>
    </li>
{% endif %}