{{ attach_library('budvue/snapshot-script') }} 
{{ attach_library('ajax_link/ajaxLink') }}
<div class="store-details__playlist">{{ drupal_view('store_location_details', 'block_3') }}</div>
<div class="location-playlist__wrap">
{# Loader element #}
{# <div id="loader-snapshot" class="loader-snapshot" style="display: none;"><div class="loader-text">Generating Live Snapshot<p>This can take up to 2 minutes</p><div class="spinner"></div><button id="cancel-snapshot-process">Cancel</a></div></div> #}
<div id="loader-snapshot" class="loader-snapshot" style="display: none;"><div class="loader-text">Generating Live Snapshot<p>This can take up to 2 minutes</p><div class="loader"><img src="/modules/custom/cstv_main/images/loader.gif"></div><button id="cancel-snapshot-process">Cancel</button></div></div>
{% for playlistTitle, slides in slide_data %}
  {% set playlistSlug = playlistTitle|replace({' ': ''})|lower %}
  {% set slideBlock = datas[loop.index0] %}
  {% set currentRatio = ratio_data[loop.index0] %}
  <div class="{{ playlistSlug }} user-playlist__wrapper">
    <div class="user-playlist-wrap">
        <div class="user-playlist-title">
            {{ playlistTitle }} <span class="arrow-right-icon">{{' ▶'}}</span><span class="arrow-down-icon">{{' ▼'}}</span>
            {# <span class="arrow-down"></span> #}
        </div>
        <div class="playlist-edit-popup"><a class="use-ajax customAjax" data-dialog-options='{"width": 800}' data-dialog-type="modal" href="/node/{{ currentRatio.playlistId }}/edit?destination={{ path('<current>') }}" data-once="ajax">Edit Playlist Title</a></div>
    </div>
    {% if slides is empty %}
      <div class="no-slides-message display-none">
        <div class"noslidesText">There is no content in this playlist.</div>
        <div class"contentLibrary"><a href="/budvue-public-library">Content Library</a></div>
      </div>
    {% else %}
    <div class="location-ratio__block">
            {% if currentRatio is defined %}
            {% if currentRatio.androidDeviceId is not null %}
            <div class="device-details__wrap display-none">
                <div class="device-image">
                    <a class="live-snapshot" href="https://api3-w.budvue.com/api/v3/devices/{{ currentRatio.androidDeviceId }}/screenshots/new.png" target="_Blank">Live snapshot</a>
                    {# <a href="https://api3-w.budvue.com/api/v3/devices/{{ currentRatio.androidDeviceId }}/screenshots/new.png" target="_Blank"><img src="/modules/custom/cstv_main/images/D9 Buttons_camera-white.png"></a>
                    <div class="playlist-edit-popup"><a class="use-ajax customAjax" data-dialog-options='{"width": 800}' data-dialog-type="modal" href="/node/{{ currentRatio.playlistId }}/edit?destination={{ path('<current>') }}" data-once="ajax"><img src="/modules/custom/cstv_main/images/D9 Buttons_pencil-white.png"></a></div> #}
                </div>
                
                <div class="device-details">
                    <span class="device-android__device-id"><strong>Android Device ID: </strong>{{ currentRatio.androidDeviceId }}</span>  
                    <span class="device-drupal-version"><strong>Drupal version:</strong> D{{ currentRatio.drupalVersion|slice(6, 1) }}</span>
                </div>
            </div>
            {% endif %}
            <div class="playlist-tv__breakdown display-none">TV Breakdown</div>
            {% set totalValue = currentRatio.promotionRatio + currentRatio.socialRatio + currentRatio.entRatio %}
            {% set prmotionRatioWid = 25 + ((currentRatio.promotionRatio / totalValue) * 25) %}
            {% set socialRatioWid = 25 + ((currentRatio.socialRatio / totalValue) * 25) %}
            {% set entRatioWid = 25 + ((currentRatio.entRatio / totalValue) * 25) %}
            {% set prmotionRatioValue = (currentRatio.promotionRatio / totalValue) * 100 %}
            {% set socialRatioValue = (currentRatio.socialRatio / totalValue) * 100 %}
            {% set entRatioValue = (currentRatio.entRatio / totalValue) * 100 %}

            {% set maxA = (prmotionRatioValue + socialRatioValue)|round %}
            {% set valA = prmotionRatioValue|round %}
            {% set minA = 0 %}
            {% set widA = "calc(" ~ (maxA / 2) ~ "% - 4px + 9px)" %}
            {% set minB = prmotionRatioValue|round %}
            {% set maxB = 100 %}
            {% set valB = (prmotionRatioValue|round + socialRatioValue)|round %}
            {% set widB = "calc(" ~ ((maxB - minB) / 2) ~ "% - 4px + 9px)" %}
            {% if maxB - minB == 0 %}
            {% set widB = "calc(4px + 9px + 5px)" %}
            {% endif %}
            
            <div class="block-location-ratio display-none" id="{{ currentRatio.playlistId }}">
                <table id="golf-sliders" class="golf-sliders">
                    <tbody>

                    <tr class="percentage-views-table percentage-text">
                    <td class="percentage-field-promotion-ratio-value show-percentage__values">{{ prmotionRatioValue|round ~ '%' }}</td>
                    <td class="percentage-field-social-ratio-value show-percentage__values">{{ socialRatioValue|round ~ '%' }}</td>
                    <td class="percentage-field-ent-ratio-value show-percentage__values">{{ entRatioValue|round ~ '%' }}</td>
                    </tr>

                    <tr class="percentage-views-table">
                    <td class="percentage-field-promotion-ratio-value">{{ prmotionRatioValue|round ~ '%' }}</td>
                    <td class="percentage-field-social-ratio-value">{{ socialRatioValue|round ~ '%' }}</td>
                    <td class="percentage-field-ent-ratio-value">{{ entRatioValue|round ~ '%' }}</td>
                    </tr>

                    <tr class="label-views-table">
                    <td class="label-field-promotion-ratio-value" style="width: {{ prmotionRatioWid ~ '%' }}">Promotional</td>
                    <td class="label-field-social-ratio-value" style="width: {{ socialRatioWid ~ '%' }}">Social Media</td>
                    <td class="label-field-ent-ratio-value" style="width: {{ entRatioWid ~ '%' }}">Entertainment</td>
                    </tr>
                    </tbody>
                </table>
                <div id="golf-range-container" class="golf-range-container">
                    <input type="range" id="golf-range-1" class="golf-range-1 major-slider" min="{{ minA }}" max="{{ maxA }}" step="1" value="{{ valA }}" style="width: {{ widA }};">
                    <input type="range" id="golf-range-2" class="golf-range-2 major-slider" min="{{ minB }}" max="{{ maxB }}" step="1" value="{{ valB }}" style="width: {{ widB }};">
                </div>
                <div id="contentTop" class="contentTop"></div>
            </div>
        {% endif %}

        {# {{ slide_block }} #}
    </div>
    <div id="playlist" class="display-none playlist">
        {% for slideClass, slideItems in slides %}
        {% set slide_type = slideClass|replace({' ': ''})|lower %}
        <div class="{{ slide_type|lower }}">
            <div class="slide-class"><span class="arrow-down"></span>{{ slideClass }}</div>
            {% for item in slideItems %}
                <div class="playlist-wrapper {{ item['access'] }} {{ item['spiritleafAccess'] }}">
                    <div class="item playlist-thumbnail">
                        {# {% if item['thumbnail'] %}
                            <img src="{{ item['thumbnail'] }}"  alt="thumbnail">
                        {% else %}
                            <div class="playlist-empty-thumbnail"></div>
                        {% endif %} #}
                        {% if item['thumbnail'] %}
                            <img src="{{ item['thumbnail'] }}" alt="thumbnail">
                        {% elseif item['video'] %}
                                <video><source src="{{ item['video'] }}#t=5" type="video/mp4"></video>
                        {% else %}
                            <div class="playlist-empty-thumbnail"></div>
                        {% endif %}
                        
                        <a href="{{ path('cstv_main.preview', {nid: item['id']}) }}"
                            class="preview use-ajax text-decoration-none {{ item['disabled'] }} "
                            data-dialog-type="modal"
                            data-dialog-options="{&quot;dialogClass&quot;:&quot;manage-page&quot;,&quot;width&quot;:700,&quot;title&quot;: &quot;REQUEST VIRTUAL CPD&quot;}">
                            {{ "Preview" | t }}
                        </a>
                    </div>
                    <div class="item playlist-title__wrap">
                        <div class="item playlist-title">
                            <span class="title">
                                <span>
                                    {{ item['title'] }}
                                </span>
                                <span class="float-right slide-duration-value" data-duration="{{ item['duration_count'] }}"
                                    style="font-weight: bold; font-size: 12px; float: right">
                                    {{ item['duration'] }}
                                </span>
                            </span>
                            {% if item['playlist_count'] > 1 and (slide_type != 'sponsored' or allowed_to_alter_slide) %}
                                <div class="dropdown">
                                    <span class="dropdown-toggle" role="button"
                                            id="dropdownMenuLink-{{ item['id'] }}"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="arrow-down"></span>
                                        {{ "Running in" }} {{ item['playlist_count'] }} {{ "playlist" }}
                                    </span>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink-{{ item['id'] }}">
                                        {% if item['access'] == 'allowed' %}
                                        <a class="dropdown-item location"
                                        href="/manage/edit/{{ item['id'] }}?location">{{ "edit locations" |t }}</a>
                                        {% endif %}
                                        <hr>
                                        <div class="dropdown-item">
                                            {% for location_title in item['location_title'] %}
                                                <span class="d-block">{{ location_title }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                        {% if slide_type == 'sponsored' %}
                            <div class="item paid-plays-per-hour-value only-text {{ item['id'] }}" data-paidpph="{{ item['paid_pph'] }}">
                                plays {{ item['paid_pph'] }} times per hour
                            </div>
                        {% elseif slide_type == 'prescheduled' %}
                            <div class="item slide-ratio-value only-text {{ item['id'] }}">
                                {{ item['presched_string'] }}
                            </div>
                        {% elseif slide_type == 'self-scheduled' %}
                            <div class="item slide-ratio-value only-text {{ item['id'] }}">
                                {{ 'plays itself when needed'|t }}
                            </div>
                        {% else %}
                        <div class="item slide-ratio-value">
                            <div class="item slide-ratio-value-top__wrap">
                                <input type="range" id="minor-slider-{{ item['id'] }}" class="minor-slider value-slider-{{ item['id'] }} {{ item['id'] }} value-int-{{ item['field_slide_ratio'] * 100 }}"  data-nid="{{ item['id'] }}" min="0" max="1" step="0.04" value="{{ item['field_slide_ratio'] }}">
                                <span class="pph {{ item['id'] }}"><span class="pph-value">1.0</span></span>
                            </div>
                            <span class="plays-per-hour__text">Plays / hour</span>
                        </div>
                        {% endif %}
                    </div>
                    {% if slide_type == 'sponsored' %}

                    {% elseif slide_type == 'prescheduled' %}

                    {% elseif slide_type == 'self-scheduled' %}

                    {% else %}
                    <div class="item playlist-schedule-tab">
                        <div class="slide-duration__wrapper">
                            <span class="duration-title">Playtime:</span>
                            <span class="float-right slide-duration-value" data-duration="{{ item['duration_count'] }}"
                                    style="font-weight: bold; font-size: 17px; float: right">
                                {{ item['duration'] }}
                            </span>
                        </div>
                        <div class="slide-schedule__table-title">Weekly Programming:</div>
                        <input type="text" data-val="{{ item['hours'] }}" value="{{ item['hours'] }}"
                                id="schedule-{{ item['id'] }}" class="d-none binary">
                        {% if item['access'] == 'allowed' %}
                        <a href="/manage/edit/{{ item['id'] }}?schedule" class="schedule-cta">
                        {% endif %} 

                        {# {% if item['access'] == 'allowed' or item['locked'] == 1 %}
                            <div class="locked"><span class="strong">Editing Locked</span><br>This slide is running in playlists you don't have access to.</div>                            
                        {% endif %}
                        {% if item['access'] == 'blocked' and item['locked'] == 1 %}
                            <div class="locked"><span class="strong">Editing is locked on Menu screens</span><br>If you would like to update these settings and run promo slides or Smart Tag menus, please contact our support team.</div>                            
                        {% endif %} #}
                        {% if item['access'] == 'blocked' and item['locked']  == 'allowed' %}
                            <div class="locked"><span class="strong">Editing Locked</span><br>This slide is running in playlists you don't have access to.</div>                            
                        {% elseif item['access'] == 'blocked' and item['locked'] == 'blocked' %}
                            <div class="locked"><span class="strong">Editing is locked on Menu screens</span><br>If you would like to update these settings and run promo slides or Smart Tag menus, please contact our support team.</div>  
                        {% elseif item['access'] == 'allowed' and item['locked'] == 'blocked' %}
                            <div class="locked"><span class="strong">Editing is locked on Menu screens</span><br>If you would like to update these settings and run promo slides or Smart Tag menus, please contact our support team.</div>                         
                        {% endif %}
                            <table cellpadding="0" cellspacing="0" id="form-sched-168">
                                <tbody>
                                {# <tr>
                                    <td class="sched-table-top active col1">S</td>
                                    <td class="sched-table-top active col2">M</td>
                                    <td class="sched-table-top active col3">T</td>
                                    <td class="sched-table-top active col4">W</td>
                                    <td class="sched-table-top active col5">T</td>
                                    <td class="sched-table-top active col6">F</td>
                                    <td class="sched-table-top active col7">S</td>
                                </tr> #}
                                <tr>
                                    <td class="sched-table-cell active col1 row1"></td>
                                    <td class="sched-table-cell active col2 row1"></td>
                                    <td class="sched-table-cell active col3 row1"></td>
                                    <td class="sched-table-cell active col4 row1"></td>
                                    <td class="sched-table-cell active col5 row1"></td>
                                    <td class="sched-table-cell active col6 row1"></td>
                                    <td class="sched-table-cell active col7 row1"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row2"></td>
                                    <td class="sched-table-cell active col2 row2"></td>
                                    <td class="sched-table-cell active col3 row2"></td>
                                    <td class="sched-table-cell active col4 row2"></td>
                                    <td class="sched-table-cell active col5 row2"></td>
                                    <td class="sched-table-cell active col6 row2"></td>
                                    <td class="sched-table-cell active col7 row2"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row3"></td>
                                    <td class="sched-table-cell active col2 row3"></td>
                                    <td class="sched-table-cell active col3 row3"></td>
                                    <td class="sched-table-cell active col4 row3"></td>
                                    <td class="sched-table-cell active col5 row3"></td>
                                    <td class="sched-table-cell active col6 row3"></td>
                                    <td class="sched-table-cell active col7 row3"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row4"></td>
                                    <td class="sched-table-cell active col2 row4"></td>
                                    <td class="sched-table-cell active col3 row4"></td>
                                    <td class="sched-table-cell active col4 row4"></td>
                                    <td class="sched-table-cell active col5 row4"></td>
                                    <td class="sched-table-cell active col6 row4"></td>
                                    <td class="sched-table-cell active col7 row4"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row5"></td>
                                    <td class="sched-table-cell active col2 row5"></td>
                                    <td class="sched-table-cell active col3 row5"></td>
                                    <td class="sched-table-cell active col4 row5"></td>
                                    <td class="sched-table-cell active col5 row5"></td>
                                    <td class="sched-table-cell active col6 row5"></td>
                                    <td class="sched-table-cell active col7 row5"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row6"></td>
                                    <td class="sched-table-cell active col2 row6"></td>
                                    <td class="sched-table-cell active col3 row6"></td>
                                    <td class="sched-table-cell active col4 row6"></td>
                                    <td class="sched-table-cell active col5 row6"></td>
                                    <td class="sched-table-cell active col6 row6"></td>
                                    <td class="sched-table-cell active col7 row6"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row7"></td>
                                    <td class="sched-table-cell active col2 row7"></td>
                                    <td class="sched-table-cell active col3 row7"></td>
                                    <td class="sched-table-cell active col4 row7"></td>
                                    <td class="sched-table-cell active col5 row7"></td>
                                    <td class="sched-table-cell active col6 row7"></td>
                                    <td class="sched-table-cell active col7 row7"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row8"></td>
                                    <td class="sched-table-cell active col2 row8"></td>
                                    <td class="sched-table-cell active col3 row8"></td>
                                    <td class="sched-table-cell active col4 row8"></td>
                                    <td class="sched-table-cell active col5 row8"></td>
                                    <td class="sched-table-cell active col6 row8"></td>
                                    <td class="sched-table-cell active col7 row8"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row9"></td>
                                    <td class="sched-table-cell active col2 row9"></td>
                                    <td class="sched-table-cell active col3 row9"></td>
                                    <td class="sched-table-cell active col4 row9"></td>
                                    <td class="sched-table-cell active col5 row9"></td>
                                    <td class="sched-table-cell active col6 row9"></td>
                                    <td class="sched-table-cell active col7 row9"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row10"></td>
                                    <td class="sched-table-cell active col2 row10"></td>
                                    <td class="sched-table-cell active col3 row10"></td>
                                    <td class="sched-table-cell active col4 row10"></td>
                                    <td class="sched-table-cell active col5 row10"></td>
                                    <td class="sched-table-cell active col6 row10"></td>
                                    <td class="sched-table-cell active col7 row10"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row11"></td>
                                    <td class="sched-table-cell active col2 row11"></td>
                                    <td class="sched-table-cell active col3 row11"></td>
                                    <td class="sched-table-cell active col4 row11"></td>
                                    <td class="sched-table-cell active col5 row11"></td>
                                    <td class="sched-table-cell active col6 row11"></td>
                                    <td class="sched-table-cell active col7 row11"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row12"></td>
                                    <td class="sched-table-cell active col2 row12"></td>
                                    <td class="sched-table-cell active col3 row12"></td>
                                    <td class="sched-table-cell active col4 row12"></td>
                                    <td class="sched-table-cell active col5 row12"></td>
                                    <td class="sched-table-cell active col6 row12"></td>
                                    <td class="sched-table-cell active col7 row12"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row13"></td>
                                    <td class="sched-table-cell active col2 row13"></td>
                                    <td class="sched-table-cell active col3 row13"></td>
                                    <td class="sched-table-cell active col4 row13"></td>
                                    <td class="sched-table-cell active col5 row13"></td>
                                    <td class="sched-table-cell active col6 row13"></td>
                                    <td class="sched-table-cell active col7 row13"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row14"></td>
                                    <td class="sched-table-cell active col2 row14"></td>
                                    <td class="sched-table-cell active col3 row14"></td>
                                    <td class="sched-table-cell active col4 row14"></td>
                                    <td class="sched-table-cell active col5 row14"></td>
                                    <td class="sched-table-cell active col6 row14"></td>
                                    <td class="sched-table-cell active col7 row14"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row15"></td>
                                    <td class="sched-table-cell active col2 row15"></td>
                                    <td class="sched-table-cell active col3 row15"></td>
                                    <td class="sched-table-cell active col4 row15"></td>
                                    <td class="sched-table-cell active col5 row15"></td>
                                    <td class="sched-table-cell active col6 row15"></td>
                                    <td class="sched-table-cell active col7 row15"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row16"></td>
                                    <td class="sched-table-cell active col2 row16"></td>
                                    <td class="sched-table-cell active col3 row16"></td>
                                    <td class="sched-table-cell active col4 row16"></td>
                                    <td class="sched-table-cell active col5 row16"></td>
                                    <td class="sched-table-cell active col6 row16"></td>
                                    <td class="sched-table-cell active col7 row16"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row17"></td>
                                    <td class="sched-table-cell active col2 row17"></td>
                                    <td class="sched-table-cell active col3 row17"></td>
                                    <td class="sched-table-cell active col4 row17"></td>
                                    <td class="sched-table-cell active col5 row17"></td>
                                    <td class="sched-table-cell active col6 row17"></td>
                                    <td class="sched-table-cell active col7 row17"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row18"></td>
                                    <td class="sched-table-cell active col2 row18"></td>
                                    <td class="sched-table-cell active col3 row18"></td>
                                    <td class="sched-table-cell active col4 row18"></td>
                                    <td class="sched-table-cell active col5 row18"></td>
                                    <td class="sched-table-cell active col6 row18"></td>
                                    <td class="sched-table-cell active col7 row18"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row19"></td>
                                    <td class="sched-table-cell active col2 row19"></td>
                                    <td class="sched-table-cell active col3 row19"></td>
                                    <td class="sched-table-cell active col4 row19"></td>
                                    <td class="sched-table-cell active col5 row19"></td>
                                    <td class="sched-table-cell active col6 row19"></td>
                                    <td class="sched-table-cell active col7 row19"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row20"></td>
                                    <td class="sched-table-cell active col2 row20"></td>
                                    <td class="sched-table-cell active col3 row20"></td>
                                    <td class="sched-table-cell active col4 row20"></td>
                                    <td class="sched-table-cell active col5 row20"></td>
                                    <td class="sched-table-cell active col6 row20"></td>
                                    <td class="sched-table-cell active col7 row20"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row21"></td>
                                    <td class="sched-table-cell active col2 row21"></td>
                                    <td class="sched-table-cell active col3 row21"></td>
                                    <td class="sched-table-cell active col4 row21"></td>
                                    <td class="sched-table-cell active col5 row21"></td>
                                    <td class="sched-table-cell active col6 row21"></td>
                                    <td class="sched-table-cell active col7 row21"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row22"></td>
                                    <td class="sched-table-cell active col2 row22"></td>
                                    <td class="sched-table-cell active col3 row22"></td>
                                    <td class="sched-table-cell active col4 row22"></td>
                                    <td class="sched-table-cell active col5 row22"></td>
                                    <td class="sched-table-cell active col6 row22"></td>
                                    <td class="sched-table-cell active col7 row22"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row23"></td>
                                    <td class="sched-table-cell active col2 row23"></td>
                                    <td class="sched-table-cell active col3 row23"></td>
                                    <td class="sched-table-cell active col4 row23"></td>
                                    <td class="sched-table-cell active col5 row23"></td>
                                    <td class="sched-table-cell active col6 row23"></td>
                                    <td class="sched-table-cell active col7 row23"></td>
                                </tr>
                                <tr>
                                    <td class="sched-table-cell active col1 row24"></td>
                                    <td class="sched-table-cell active col2 row24"></td>
                                    <td class="sched-table-cell active col3 row24"></td>
                                    <td class="sched-table-cell active col4 row24"></td>
                                    <td class="sched-table-cell active col5 row24"></td>
                                    <td class="sched-table-cell active col6 row24"></td>
                                    <td class="sched-table-cell active col7 row24"></td>
                                </tr>
                                </tbody>
                            </table>
                        {% if item['access'] == 'allowed' %}    
                        </a>
                        {% endif %}
                    </div>
                    {% endif %}

                    <div class="item playlist-actions">
                    {% if item['access'] == 'allowed' %}
                        <div class="manage-slide mb-1">
                            <a class="btn btn-secondary" href="/manage/edit/{{ item['id'] }}">{{ "Details" | t }}</a>
                        </div>
                    {% endif %}
                    {% if item['locked'] == 'allowed' and slide_type != 'sponsored' %}
                        <button id="btnConfirmation" class="slide-delete-confirmation-btn">Delete</button>
                        <div id="slideConfirmationModal" class="modal slide-delete-confirmation-modal__wrap" style="display: none;">
                        <!-- Modal content -->
                        <div class="modal-content">
                            <div class="confirmation-pop-up">
                                <span class="close confirm-close">×</span>
                                <div class="confirmation-pop-up__wrap">
                                    <div class="remove-slide__confirmation">
                                        <div class="remove-slide__confirmation-statement">Are you sure you want to remove slide "{{ item['title'] }}" from your playlist(s)?</div>
                                            <div class="confirmation-btn__wrap">
                                                <div class="remove-slide__btn-wrap">
                                                {% if item['playlist_count'] > 1 %}
                                                    <a class="remove-slide"
                                                        href="/remove/slide-from-this?playlist={{ item['playlist_single_item'] }}&slide={{ item['id'] }}">
                                                            {{ "remove from this playlist" | t }}                                                        
                                                    </a>
                                                {% else %}
                                                    <a class="remove-slide"
                                                        href="/remove/slide?playlist={{ item['playlist_single_item'] }}&slide={{ item['id'] }}">
                                                        {{ "remove" | t }}
                                                    </a>
                                                {% endif %}
                                                    {% if item['subqueue_ids_count'] > 1 and item['access'] == 'allowed' %}
                                                        <a class="remove-slide"
                                                            href="/remove/slide?playlist={{ item['subqueue_ids'] }}&slide={{ item['id'] }}">{{ "remove from all playlists" | t }}</a>
                                                    {% endif %}
                                                    <span class="cancel btn btn-primary">Cancel</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="dropdown">
                            <a class="btn btn-secondary dropdown-toggle" role="button"
                                id="dropdownMenuLink-{{ item['id'] }}"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="arrow-down"></span>
                                {{ "More" | t }}
                            </a>
                            {% if item['access'] == 'allowed' %}
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink-{{ key }}">
                                <a class="dropdown-item"
                                    href="/manage/edit/{{ item['id'] }}?location">{{ "edit locations" |t }}</a>
                                <a class="dropdown-item"
                                    href="/manage/edit/{{ item['id'] }}?schedule">{{ "edit scheduling" | t }}</a>
                                <a class="dropdown-item"
                                    href="/duplicate/slide?playlist={{ item['playlist_single_item'] }}&slide={{ item['id'] }}">
                                    {% if item['playlist_count'] > 1 %}
                                        {{ "duplicate, this location only" | t }}
                                    {% else %}
                                        {{ "duplicate" | t }}
                                    {% endif %}
                                </a>
                                {% if item['playlist_count'] > 1 %}
                                    <a class="dropdown-item"
                                        href="/duplicate/slide?playlist={{ item['playlist_items'] }}&slide={{ item['id'] }}">{{ "duplicate, including locations" | t }}</a>
                                {% endif %}
                                {% if item['playlist_count'] > 1 %}
                                    <a class="dropdown-item"
                                        href="/remove/slide-from-this?playlist={{ item['playlist_single_item'] }}&slide={{ item['id'] }}">
                                            {{ "remove from this playlist" | t }}                                                        
                                    </a>
                                {% else %}
                                    <a class="remove-slide"
                                        href="/remove/slide?playlist={{ item['playlist_single_item'] }}&slide={{ item['id'] }}">
                                        {{ "remove" | t }}
                                    </a>
                                {% endif %}
                                {% if item['subqueue_ids_count'] > 1 %}
                                    <a class="dropdown-item"
                                        href="/remove/slide?playlist={{ item['subqueue_ids'] }}&slide={{ item['id'] }}">{{ "remove from all playlists" | t }}</a>
                                {% endif %}
                            </div>
                            {% else %}
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink-{{ key }}">
                                <a class="dropdown-item" href="/duplicate/slide?playlist={{ item['playlist_single_item'] }}&slide={{ item['id'] }}">
                                {% if item['playlist_count'] > 1 %}
                                    {{ "duplicate, this location only" | t }}
                                {% else %}
                                    {{ "duplicate" | t }}
                                {% endif %}
                                </a>
                            </div>
                        {% endif %}
                    </div>

                    {% endif %}

                    {% if 'administrator' in user.getroles(TRUE)  %}
                        {% if slide_type == 'sponsored' %}
                        <button id="btnConfirmation" class="slide-delete-confirmation-btn">Delete</button>
                        <div id="slideConfirmationModal" class="modal slide-delete-confirmation-modal__wrap" style="display: none;">
                        <!-- Modal content -->
                        <div class="modal-content">
                            <div class="confirmation-pop-up">
                                <span class="close confirm-close">×</span>
                                <div class="confirmation-pop-up__wrap">
                                    <div class="remove-slide__confirmation">
                                        <div class="remove-slide__confirmation-statement">Are you sure you want to remove slide "{{ item['title'] }}" from your playlist(s)?</div>
                                            <div class="confirmation-btn__wrap">
                                                <div class="remove-slide__btn-wrap">
                                                {% if item['playlist_count'] > 1 %}
                                                    <a class="dropdown-item"
                                                        href="/remove/slide-from-this?playlist={{ item['playlist_single_item'] }}&slide={{ item['id'] }}">
                                                            {{ "remove from this playlist" | t }}                                                        
                                                    </a>
                                                {% else %}
                                                    <a class="remove-slide"
                                                        href="/remove/slide?playlist={{ item['playlist_single_item'] }}&slide={{ item['id'] }}">
                                                        {{ "remove" | t }}
                                                    </a>
                                                {% endif %}
                                                    {# {% if item['subqueue_ids_count'] > 1 and item['access'] == 'allowed' %}
                                                        <a class="remove-slide"
                                                            href="/remove/slide?playlist={{ item['subqueue_ids'] }}&slide={{ item['id'] }}">{{ "remove from all playlists" | t }}</a>
                                                    {% endif %} #}
                                                    <span class="cancel btn btn-primary">Cancel</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    {% endif %}
                    <div class="edit-btn__content">
                        <div class="edit-btn">Edit     </div>
                        <div class="edit-btn__links">
                            <a class="btn-primary original" href="/node/{{ item['id'] }}/edit">Edit Original</a>
                            <a class="btn-primary original-clones" href="/admin/manage-slides?title_op=contains&amp;title={{ item['title'] }}&field_master_template_id_target_id={{ item['field_master_template_id'] }}&nid={{ item['field_master_template_id'] }}">Edit Original and Clones</a>
                        </div>
                    </div>

                    </div>
                </div>
            {% endfor %}
            </div>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endfor %}
</div>