{% extends "layout.html" %}
{% block title %} Playlist {% endblock %}
{% block content %}
   <div class="page_content" >
<link href="{{ constant('HTTP_CSS') }}/plugins/dropzone/dropzone.css" rel="stylesheet">
<link href="{{ constant('HTTP_CSS') }}/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">
<link href="{{ constant('HTTP_CSS') }}/plugins/sweetalert/sweetalert.css"" rel="stylesheet">

<input type="hidden" id="id" value="{{ _get.id }}" >
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-2">
                    <div class="ibox  ">
                        <div class="ibox-title">
                            <h5>Playlists</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content  p-3">
                            <div class="file-manager">
                                <h5><strong></strong></h5>
                                <a href='?page={{ page }}' class='file-control {% if _get.type == "" %}   bold{% endif %}' >All</a>

                                {% for key,type in types %}
                                    <a href='?page={{ page }}&type={{ key }}' class='file-control {% if key == _get.type %} active bold{% endif %}'  > {{ type.type }} </a>
                                {% endfor %}

                                <div class="hr-line-dashed"></div>
                                <h5><strong></strong></h5>
                                
                                <div class="playlists-list">
                                   

                                    <ul class="folder-list  list-group clear-list m-t">

                                        {% for key,playlis in playlists %}
                                            <li class="list-group-item {% if loop.first %} fist-item {% endif %} {% if loop.last %} last-item {% endif %} ">
                                                <a href="index.php?page={{ page }}&id={{ key }}"  {% if _get.id == key %} class="bold" {% endif %} ><span class="float-right">
                                                    {{ playlis.duration }}
                                                </span>
                                                <span class="label f-14 label-{{ playlis.color }} mr-0"> <i class="fa {{ playlis.icon}} mr-0"></i></span> {{ playlis.name }}</a>
                                            </li>
                                        {% endfor %}
                                       
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                            </div>


                               <div class="detils-box" style="overflow: hidden; width: auto; ">
                                    <h5><strong>File:</strong></h5>
                                <div class="hr-line-dashed"></div>


                                    <div class="file_details ">

                                        <div class="lightBoxGallery file-type-box" id="file-image" style="display: none;">
                                            <a href="" title="" data-gallery=""><img src="" style="width: 100%;"></a>
                                            <div id="blueimp-gallery" class="blueimp-gallery">
                                                <div class="slides"></div>
                                                <h3 class="title"></h3>
                                                <a class="close">×</a>
                                                <a class="play-pause"></a>
                                                <ol class="indicator"></ol>
                                            </div>
                                        </div>

                                        <div class="file-type-box " id="file-video" style="display: none;">
                                                <video width="290" height="162" controls  id="video" >
                                                    <source src="" type="video/mp4">
                                                    Your browser does not support the video tag.
                                                </video>
                                        </div>

                                        <div class="file-type-box " id="file-music" style="display: none;">
                                                <audio style="width: 100%;" id="audio" controls>
                                                  <source src="" type="" id="audioSource">
                                                Your browser does not support the audio element.
                                                </audio>
                                        </div>
                                </div>

                            </div>
                        </div>


                    </div>
                </div>
                <div class="col-lg-8 animated fadeInRight">
                    <div class="row">
                        <div class="col-lg-12">
                        <div class="ibox">
                            <div class="ibox-title">
                                <h5>All Media in Playlist: <i class="text-uppercase">{{playlist.name}}</i></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                </div>
                            </div>
                            <ul class="ibox-content clear-list connectList connectListCurrent" id="media_palylist" style="display: flow-root;">
                                {% for key,media in medias %}
                                    <li class="list-unstyled file-box ui-sortable-handle file-box-new" id="media-{{ key }}">
                                        <div class="file">
                                            <a class="show_media" d-src="{{media.file_src}}"  d-src-type="{{ media.format }}" d-name="{{ media.name }}" d-date="{{ media.date_added }}" d-size="{{ media.size }}"  d-type="{{media.type}}"   d-duration="{{media.duration}}"   >
                                                <span class="corner"></span>
                                                {% if media.name != '' and curreny_type != 3   and media.id_type != 3 %}
                                                <div class="image">
                                                    <img alt="image" class="img-fluid" src="{{media.file}}">
                                                </div>
                                                {% else %}
                                                <div class="icon">
                                                	{%if curreny_type == 3 or media.id_type==3 %}
                                                    	<i class="fa fa-music"></i>
                                                    	{% else %}
                                                    <i class="fa fa-file"></i>
                                                    {% endif %}
                                                	
                                                </div>
                                                {% endif %}

                                                <div class="file-name media-name">
                                                    {{ media.name }}
                                                    <br/>
                                                    <small>{{ media.date_added }}</small>

                                                    <a href="#" class="d-none btn btn-white btn-sm mb-1 float-right dlt-pl-media" im="{{ key }}" ><i style="font-size: 14px;" class="fa fa-trash "></i>  </a>
                                                </div>

                                            </a>
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                             <ul id="trash-can" class="sortable ">   
                                <div id="trash-can-inner" class="col-md-12" >
                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                    <p class="m-0">Move to Trash</p>
                                </div >
                            </ul>

                        </div>



                        </div>
                    </div>
                 </div>
            



            <div class="col-lg-2">


                <div class="ibox  ">
                        <div class="ibox-title">
                            <h5>Playlist Details:</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content  p-3">
                            <div class="file-manager">
                                <form role="form">
                                    <div class="form-group"><label>Playlist Name</label> <input type="text" name="playlist_name" placeholder="Type the name" class="form-control"></div>
                                    <div class="form-group"><label>Duration</label> <input type="text" name="playlist_duration" placeholder="00:00:00" class="form-control"></div>
                                    <div class="form-group"><label>Screen Type</label>
                                        <select class="form-control m-b" name="screen">
                                            <option value="1" >Horizontal</option>
                                            <option value="2" >Vertical</option>
                                        </select>
                                    </div>
                                    <div><button class="btn btn-sm btn-primary float-right m-t-n-xs mt-2" type="submit"><strong>Save</strong></button></div>
                                </form>
                                
                                
                                <div class="clearfix"></div>
                            </div>

                              
                        </div>


                    </div>





                    <div class="ibox  ">
                        <div class="ibox-title">
                            <h5>Drag Item to Add to Playlist</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content  p-3">
                            <div class="file-manager">
                                <h5><strong></strong></h5>
                                <form method="get" >
                                    <input type="text" placeholder="Search Here" id="search_media_online" class="form-control">
                                </form>
                                <div class="hr-line-dashed"></div>
                                <h5><strong></strong></h5>
                                
                                <div class="playlists-list">
                                   

                                <ul class="folder-list  list-group clear-list m-t " id="all_media">

                                    {% for key,playlis in all_media %}


                        <li class=" list-unstyled file-box file-box-new ui-sortable-handle{% if loop.first %} fist-item {% endif %}{% if loop.last %} last-item {% endif %}" id="new-{{ key }}" >

                                        <div class="file d-none">
                                            <a class="show_media " d-src="{{playlis.file_src}}"  d-src-type="{{ playlis.format }}" d-name="{{ playlis.name }}" d-date="{{ playlis.date_added }}" d-size="{{ playlis.size }}"  d-type="{{playlis.type}}"   d-duration="{{playlis.duration}}"   >
                                                <span class="corner"></span>
                                                {% if playlis.name != '' and curreny_type != 3   and playlis.id_type != 3 %}
                                                <div class="image">
                                                    <img alt="image" class="img-fluid" src="{{playlis.file}}">
                                                </div>
                                                {% else %}
                                                <div class="icon">
                                                    {%if curreny_type == 3 or playlis.id_type==3 %}
                                                        <i class="fa fa-music"></i>
                                                        {% else %}
                                                    <i class="fa fa-file"></i>
                                                    {% endif %}
                                                    
                                                </div>
                                                {% endif %}

                                                <div class="file-name media-name">
                                                    {{ playlis.name }}
                                                    <br/>
                                                    <small>{{ playlis.date_added }}</small>

                                                    <a href="#" class="d-none btn btn-white btn-sm mb-1 float-right dlt-pl-media" im="{{ key }}" ><i style="font-size: 14px;" class="fa fa-trash "></i>  </a>
                                                </div>

                                            </a>
                                        </div>



                                <a  class="show_media second-sec {% if _get.id == key %} bold {% endif %}" d-src="{{playlis.file_src}}"  d-src-type="{{ playlis.format }}" d-name="{{ playlis.name }}" d-date="    {{ playlis.date_added }}" d-size="{{ playlis.size }}"  d-type="{{playlis.type}}"   d-duration="{{playlis.duration}}" >
                                    <span class="float-right"> {{ playlis.duration }}</span>
                                    <span class=""> <i class=" fa fa-arrows-alt mr-0"></i></span> {{ playlis.name }}
                                </a>
                            </li>
                                    {% endfor %}
                                   
                                </ul>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                              
                        </div>


                    </div>
                </div>



            </div>
        </div>
      


    <script src="{{ constant('HTTP_JS') }}/jquery-3.1.1.min.js"></script>


    <!-- blueimp gallery -->
    <script src="{{ constant('HTTP_JS') }}/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>

        <!-- Sweet alert -->
    <script src="{{ constant('HTTP_JS') }}/plugins/sweetalert/sweetalert.min.js"></script>

    <!-- jquery UI -->
    <script src="{{ constant('HTTP_JS') }}/plugins/jquery-ui/jquery-ui.min.js"></script>

    <!-- Touch Punch - Touch Event Support for jQuery UI -->
    <script src="{{ constant('HTTP_JS') }}/plugins/touchpunch/jquery.ui.touch-punch.min.js"></script>




    <!-- DROPZONE -->
    <script src="{{ constant('HTTP_JS') }}/plugins/dropzone/dropzone.js"></script>
    <script>
        Dropzone.options.dropzoneForm = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 2, // MB
            dictDefaultMessage: "<strong>Drop files here or click to upload. </strong></br> (This is just a demo dropzone. Selected files are not actually uploaded.)"
        };

    </script>

</div>
{% endblock %}