{% load sizify  %}
{% load mediafy %}
{% load colorefy %}
{% load static %}


<!--begin::Table-->
<table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4" id="kt_media_table">
    <!--begin::Table head-->
    <thead>
        <tr class="fw-bolder text-muted">
            <th class="min-w-125px"> New Video </th>
            <th class="min-w-5px"> Status </th>
            <th class="min-w-60px"> Upload date </th>
            <th class="min-w-30px max-w-45px text-end"> Actions </th>
        </tr>
    </thead>
    <!--end::Table head-->
    <!--begin::Table body-->
    <tbody>
        <!-- begin::For Loop ON lATEST Files Uploaded -->
        {% for video in Videos %}
        <tr class="odd">
            <td>
                <div class="d-flex align-items-center">
                    <div class="col-md-5 mb-1 mb-md-0 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to view generated media">
                        <!--begin::Overlay-->
                        <a class="{% if  video.status != 'Completed' %} d-block overlay m-3 unselectable {% else %} d-block overlay m-3 {% endif %}" data-fslightbox="lightbox-hot-sales" href="#"  data-bs-toggle="modal" data-bs-target="#streamModal" onclick='init_video("{{video.video_path }}")'>
                            <!--begin::Image-->
                            <div class="overlay-wrapper bgi-position-center bgi-no-repeat bgi-size-cover h-50px card-rounded mb-3" style="background-image:url('{{ video.media.thumbnail.url }}')"></div>
                            <!--end::Image-->
                            <!--begin::Action-->
                            <div class="overlay-layer card-rounded bg-dark bg-opacity-50">
                                <!--begin::Svg Icon | path: /images/icons/duotune/arrows/arr027.svg-->
                                <span class="svg-icon svg-icon-muted svg-icon-2hx">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16.9 10.7L7 5V19L16.9 13.3C17.9 12.7 17.9 11.3 16.9 10.7Z" fill="currentColor"/>
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Action-->
                        </a>
                        <!--end::Overlay-->
                    </div>
                    <div class="d-flex flex-column flex-grow-1" data-bs-toggle="tooltip" data-bs-trigger="hover" title="{{ video.media.original_file.name }}">
                        <a class="text-gray-800 fw-bolder text-hover-primary mb-1 fs-6">{{ video.media.title|truncatewords:5 }}</a>
                        <span class="text-muted font-size-sm text-gray-400 fw-semibold d-block fs-7">
                            <span class="text-dark-75 font-weight-bolder"> Size: </span>
                            <span class="text-muted font-weight-bolder"> {{ video.media.size|sizify}} </span>
                        </span>
                    </div>
                </div>
            </td>
            <td>
                <span class="text-success fw-bold  d-block mb-1 fs-6 mt-5" style="color:{{video.status|colorefy}} !important;"> {{ video.status }} </span>
            </td>
            <td>
                <span class="text-muted d-block mb-1 fs-6 mt-5">
                    <!-- <span class="text-gray-600 font-weight-bolder">Modified:</span> -->
                    <span class="text-muted font-weight-bolder"> {{ video.converted_time|date:"Y-m-d H:s" }} </span>
                </span>
            </td>
            <td class="text-end" data-kt-filemanager-table="action_dropdown">
                <div class="d-flex justify-content-end">
                    <!--begin::Show Parts Time List -->
                    <div class="ms-2 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to view parts list ">
                        <button type="button" class="btn btn-sm btn-light btn-active-light-primary"  data-bs-toggle="modal" data-bs-target="#kt_parts_time_list_media" onclick='load_parts("{{ video.parts }}")'>
                            <span class="fas fa-clock svg-icon svg-icon-2x m-0"></span>
                        </button>
                    </div>
                    <!--end::Show Parts Time List -->

                    <!--begin::Show New File -->
                    <div class="ms-2 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to view the original media ">
                        <button type="button" class="btn btn-sm btn-light btn-active-light-primary"  data-bs-toggle="modal" data-bs-target="#streamModal" onclick='init_video("{{ video.media.original_file.existingPath }}")' >
                            <span class="fs-7" >View Original Video </span>
                            <span class="fas fa-eye svg-icon svg-icon-5 m-0"></span>
                        </button>
                    </div>
                    <!--end::Show New File-->
                    
                    <!--begin::Show New File -->
                    <div class="ms-2" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Click here to upload this media to your channel.">
                        <a href="{% url 'dashboard:authorize' video.id %}" class="{% if  video.status != 'Completed' %} btn btn-sm btn-icon btn-light btn-active-light-danger unselectable {% else %} btn btn-sm btn-icon btn-light btn-active-light-danger {% endif %}" >
                            <!--begin::Svg Icon | path: assets/media/icons/duotune/social/soc007.svg-->
                            <span class="svg-icon svg-icon-muted svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M21 6.30005C20.5 5.30005 19.9 5.19998 18.7 5.09998C17.5 4.99998 14.5 5 11.9 5C9.29999 5 6.29998 4.99998 5.09998 5.09998C3.89998 5.19998 3.29999 5.30005 2.79999 6.30005C2.19999 7.30005 2 8.90002 2 11.9C2 14.8 2.29999 16.5 2.79999 17.5C3.29999 18.5 3.89998 18.6001 5.09998 18.7001C6.29998 18.8001 9.29999 18.8 11.9 18.8C14.5 18.8 17.5 18.8001 18.7 18.7001C19.9 18.6001 20.5 18.4 21 17.5C21.6 16.5 21.8 14.9 21.8 11.9C21.8 9.00002 21.5 7.30005 21 6.30005ZM9.89999 15.7001V8.20007L14.5 11C15.3 11.5 15.3 12.5 14.5 13L9.89999 15.7001Z" fill="black"/>
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </a>
                    </div>
                    <!--end::Show New File-->
                    <!--begin::Share link-->
                    <div class="ms-2" data-kt-filemanger-table="copy_link" data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here for the generated media url.">
                        <button type="button" class="{% if  video.status != 'Completed' %} btn btn-sm btn-icon btn-light btn-active-light-primary unselectable {% else %} btn btn-sm btn-icon btn-light btn-active-light-primary {% endif %}" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                            <i class="fas fa-link fa-lg"></i>
                        </button>
                        <!--begin::Menu-->
                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-300px" data-kt-menu="true">
                            <!--begin::Card-->
                            <div class="card card-flush">
                                <div class="card-body p-5">
                                    <!--begin::Loader-->
                                    <div class="d-flex d-none" data-kt-filemanger-table="copy_link_generator">
                                        <!--begin::Spinner-->
                                        <div class="me-5" data-kt-indicator="on">
                                            <span class="indicator-progress">
                                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                            </span>
                                        </div>
                                        <!--end::Spinner-->
                                        <!--begin::Label-->
                                        <div class="fs-6 text-dark">Generating Share Link...</div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Loader-->
                                    <!--begin::Link-->
                                    <div class="d-flex flex-column text-start" data-kt-filemanger-table="copy_link_result">
                                        <div class="d-flex mb-3">
                                            <i class="fas fa-check fa-lg svg-icon svg-icon-2 svg-icon-success me-3"></i>
                                            <div class="fs-6 text-dark">Share Link Generated</div>
                                        </div>
                                        <input type="text" class="form-control form-control-sm" value="http://backgroundmusicremoval.cr43dv6zq7.com:2034/{{ video.video_path }}" onClick="this.select();"/>
                                    </div>
                                    <!--end::Link-->
                                </div>
                            </div>
                            <!--end::Card-->
                        </div>
                        <!--end::Menu-->
                    </div>
                    <!--end::Share link-->
                    <!--begin::Download-->
                    <div class="ms-2" data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to download generated media.">
                        <a type="button" class="{% if  video.status != 'Completed' %} btn btn-sm btn-icon btn-light btn-active-light-primary unselectable {% else %} btn btn-sm btn-icon btn-light btn-active-light-primary {% endif %}" href="http://backgroundmusicremoval.cr43dv6zq7.com:2034/{{ video.video_path }}" download>
                            <span class="fas fa-download svg-icon svg-icon-5 m-0"></span>
                        </a>
                    </div>
                    <!--end::Download-->
                </div>
            </td>
        </tr>
        {% empty %}
        <tr class="odd unselectable" >
            <td colspan="4">
                <!--begin::Body-->
                <div class="d-flex flex-column my-5">
                    <!--begin::Title-->
                    <h1 class="fw-bold text-muted  text-center fs-2">
                        There's no <span class="fw-boldest">media file</span> yet
                    </h1>
                    <!--end::Title-->
                    <!--begin::Illustration-->
                    <div class="flex-grow-2 bgi-no-repeat bgi-size-contain bgi-position-x-center h-450px mh-450px"></div>
                    <!--end::Illustration-->
                </div>
                <!--end::Body-->
            </th>
        </tr>
        {% endfor %}
        <!--end:: For Loop -->
    </tbody>
    <!--end::Table body-->
</table>
<!--end::Table-->