{% set uniqueId = random(50, 1000) %}
                <label id="video-list-{{item.media_id}}-{{uniqueId}}" onclick="(function () { 
                                                
                    appendRangeSelectedItem(`#selected-box-{{item.media_id}}-{{uniqueId}}`, 'station')
                                                
                    })()  " role="button" class="text-slate-800 flex gap-2 w-full items-center rounded-md p-3 transition-all dark:hover:bg-gray-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100">
                    <div class="mr-4 grid place-items-center"><img alt="candice" src="{{item.picture}}" class="relative inline-block h-12 w-12 !rounded-full object-cover object-center"></div>
                    <div style="max-width:78%" >
                        <h6 class="truncate text-slate-800 dark:text-gray-300 font-medium">{{item.name}}</h6>
                        <p class="text-slate-500 dark:text-gray-300 text-sm">{{item.artist.name}}</p>
                    </div>
                </label>
                <div id="selected-box-{{item.media_id}}-{{uniqueId}}" class="hidden"> 
                    <div class="range-selected-media w-full  flex gap-2  py-4" id="selected-box-frame-{{item.media_id}}-{{uniqueId}}" data-duration="{{item.field.duration}}" data-unique-id="{{uniqueId}}" data-id="{{item.media_id}}" >
                        <img onclick="(function() {return removeRangeSelectedItem(`#selected-box-frame-{{item.media_id}}-{{uniqueId}}`, 'station');})()" class="cursor-pointer dark:brightness-200 w-5" src="/src/front_assets/svg/delete-white.svg" />
                        <div class="panel panel-info w-full" >
                            <input type="hidden" name="params[selected][media_id][]" value="{{item.media_id}}" />
                            <input type="hidden" name="params[selected][title][]" value="{{item.name}}" />
                            <input type="hidden" name="params[selected][media_path][]" value="{{item.main_file.path}}" />
                            <input type="hidden" name="params[selected][duration][]" value="{{item.field.duration}}" / >
                            <input type="hidden" name="params[selected][bitrate][]" value="{{item.field.bitrate}}" / >
                            <input type="hidden" name="params[selected][filesize][]" value="{{item.field.filesize}}" / >
                            <input type="hidden" name="params[selected][start_at][]" id="selected-start-at-{{item.media_id}}-{{uniqueId}}" />
                            <div class="panel-body text-gray-500 dark:text-gray-300 truncate">
                                {{item.name}}
                            </div>
                            <div class="panel-body text-gray-500 dark:text-gray-300 text-sm" id="selected-playing-duration-{{item.media_id}}-{{uniqueId}}">{{item.field.duration}}</div>
                        </div>
                    </div>
                </div>