<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="pixelstrap">
    <link rel="icon" href="assets/images/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">
    <?php include_once("include/title.php"); ?>

    <!-- Google font-->
    <link href="../../css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    <!-- Fontawesome css -->
    <link rel="stylesheet" type="text/css" href="assets/css/vendors/font-awesome.css">

    <!-- Linear Icon css -->
    <link rel="stylesheet" href="assets/css/linearicon.css">

    <!-- Themify icon css -->
    <link rel="stylesheet" type="text/css" href="assets/css/vendors/themify.css">

    <!-- Feather icon css -->
    <link rel="stylesheet" type="text/css" href="assets/css/vendors/feather-icon.css">

    <!-- remixicon css -->
    <link rel="stylesheet" type="text/css" href="assets/css/remixicon.css">

    <!-- Data Table css -->
    <link rel="stylesheet" type="text/css" href="assets/css/datatables.css">

    <!-- Plugins css -->
    <link rel="stylesheet" type="text/css" href="assets/css/vendors/scrollbar.css">
    <link rel="stylesheet" type="text/css" href="assets/css/vendors/animate.css">

    <!-- Bootstrap css -->
    <link rel="stylesheet" type="text/css" href="assets/css/vendors/bootstrap.css">

    <!-- App css -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>

<body>
    <!-- tap on top start-->
    <div class="tap-top">
        <span class="lnr lnr-chevron-up"></span>
    </div>
    <!-- tap on tap end-->

    <!-- page-wrapper Start-->
    <div class="page-wrapper compact-wrapper" id="pageWrapper">
        <!-- Page Header Start-->
        <?php include_once("include/header.php"); ?>
        <!-- Page Header Ends-->

        <!-- Page Body Start-->
        <div class="page-body-wrapper">
            <!-- Page Sidebar Start-->
            <div class="sidebar-wrapper">
                <div id="sidebarEffect"></div>
                <div>
                <?php include_once("include/nav.php"); ?>
                </div>
            </div>
            <!-- Page Sidebar Ends-->

            <!-- Container-fluid starts-->
            <div class="page-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="title-header option-title justify-content-start">
                                        <h5>Media Library</h5>
                                        <div class="selected-options">
                                            <ul>
                                                <li>selected(0)</li>
                                                <li><a href="#"><i class="ri-download-2-line"></i></a></li>
                                                <li><a href="#"><i class="ri-delete-bin-line"></i></a></li>
                                            </ul>
                                        </div>
                                        <div class="right-options ms-auto">
                                            <ul>
                                                <li>
                                                    <a class="btn btn-solid" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#mediaModel">Add
                                                        Media</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="row row-cols-xl-6 row-cols-md-5 row-cols-sm-3 row-cols-2 g-sm-3 g-2 media-library-sec ratio_square">
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox1">
                                                <label for="myCheckbox1">
                                                    <div>
                                                        <img src="assets/images/product/1.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox2">
                                                <label for="myCheckbox2">
                                                    <div>
                                                        <img src="assets/images/product/2.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox3">
                                                <label for="myCheckbox3">
                                                    <div>
                                                        <img src="assets/images/product/3.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox4">
                                                <label for="myCheckbox4">
                                                    <div>
                                                        <img src="assets/images/product/4.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox5">
                                                <label for="myCheckbox5">
                                                    <div>
                                                        <img src="assets/images/product/5.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox6">
                                                <label for="myCheckbox6">
                                                    <div>
                                                        <img src="assets/images/product/6.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox7">
                                                <label for="myCheckbox7">
                                                    <div>
                                                        <img src="assets/images/product/7.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox8">
                                                <label for="myCheckbox8">
                                                    <div>
                                                        <img src="assets/images/product/8.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox9">
                                                <label for="myCheckbox9">
                                                    <div>
                                                        <img src="assets/images/product/9.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox10">
                                                <label for="myCheckbox10">
                                                    <div>
                                                        <img src="assets/images/product/10.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox11">
                                                <label for="myCheckbox11">
                                                    <div>
                                                        <img src="assets/images/product/14.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox12">
                                                <label for="myCheckbox12">
                                                    <div>
                                                        <img src="assets/images/product/13.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox13">
                                                <label for="myCheckbox13">
                                                    <div>
                                                        <img src="assets/images/product/16.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="library-box">
                                                <input type="checkbox" id="myCheckbox14">
                                                <label for="myCheckbox14">
                                                    <div>
                                                        <img src="assets/images/product/20.png" class="img-fluid bg-img bg_size_content" alt="">
                                                    </div>
                                                    <div class="dropdown">
                                                        <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill"></i>
                                                        </a>

                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                            </li>
                                                            <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Container-fluid Ends-->

                <div class="container-fluid">
                    <!-- footer start-->
                    <?php include_once("include/footer.php"); ?>
                </div>
            </div>
        </div>
    </div>
    <!-- page-wrapper End-->


    <!-- Insert Media modal start -->
    <div class="modal fade media-modal" id="mediaModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Insert Media</h2>
                    <button type="button" class="btn btn-close" data-bs-dismiss="modal"><span class="lnr lnr-cross"></span></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#upload">Upload New</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#select">Select File</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="upload">
                            <div class="content-section drop-files-sec">
                                <div>
                                    <i class="ri-upload-cloud-2-line"></i>
                                    <h2>Drop files here, paste <span>or</span> <a href="#" class="font-blue">browse
                                            files</a></h2>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="select">
                            <div class="select-top-panel">
                                <div>
                                    <input type="text" class="form-control" placeholder="Search your files">
                                </div>
                                <select class="form-select">
                                    <option>Sort By newest</option>
                                    <option>Sort By oldest</option>
                                    <option>Sort By smallest</option>
                                    <option>Sort By largest</option>
                                </select>
                            </div>
                            <div class="content-section select-file-section py-0 ratio2_3">
                                <div class="row g-sm-4 row-cols-xl-5 row-cols-lg-4 py-0 media-library-sec ratio_square row-cols-sm-3 row-cols-2 g-2">
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxone">
                                            <label for="myCheckboxone">
                                                <div>
                                                    <img src="assets/images/product/1.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxtwo">
                                            <label for="myCheckboxtwo">
                                                <div>
                                                    <img src="assets/images/product/2.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxthree">
                                            <label for="myCheckboxthree">
                                                <div>
                                                    <img src="assets/images/product/3.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxfour">
                                            <label for="myCheckboxfour">
                                                <div>
                                                    <img src="assets/images/product/4.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxfive">
                                            <label for="myCheckboxfive">
                                                <div>
                                                    <img src="assets/images/product/5.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxsix">
                                            <label for="myCheckboxsix">
                                                <div>
                                                    <img src="assets/images/product/6.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxseven">
                                            <label for="myCheckboxseven">
                                                <div>
                                                    <img src="assets/images/product/7.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxeight">
                                            <label for="myCheckboxeight">
                                                <div>
                                                    <img src="assets/images/product/8.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxnine">
                                            <label for="myCheckboxnine">
                                                <div>
                                                    <img src="assets/images/product/9.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="library-box">
                                            <input type="checkbox" id="myCheckboxten">
                                            <label for="myCheckboxten">
                                                <div>
                                                    <img src="assets/images/product/10.png" class="img-fluid bg-img bg_size_content" alt="">
                                                </div>
                                                <div class="dropdown">
                                                    <a class="" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-more-fill"></i>
                                                    </a>

                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-download-2-line me-2"></i>Download</a>
                                                        </li>
                                                        <li><a class="dropdown-item d-flex align-items-center" href="#"><i class="ri-delete-bin-line me-2"></i>Delete</a>
                                                        </li>
                                                        
                                                    </ul>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="left-part">
                        <div class="file-detail">
                            <h6>0 File Selected</h6>
                            <a href="#" class="font-red">Clear</a>
                        </div>
                    </div>
                    <div class="right-part">
                        <a href="#" class="btn btn-solid">Insert Media</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Insert Media modal end -->

    <!-- Modal Start -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="modal-title" id="staticBackdropLabel">Logging Out</h5>
                    <p>Are you sure you want to log out?</p>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                    <div class="button-box">
                        <button type="button" class="btn btn--no" data-bs-dismiss="modal">No</button>
                        <button type="button" class="btn  btn--yes btn-primary">Yes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End -->

    <!-- Delete Modal Box Start -->
    <div class="modal fade theme-modal remove-coupon" id="exampleModalToggle" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header d-block text-center">
                    <h5 class="modal-title w-100" id="exampleModalLabel22">Are You Sure ?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="remove-box">
                        <p>The permission for the use/group, preview is inherited from the object, object will create a
                            new permission for this object</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-animation btn-md fw-bold" data-bs-dismiss="modal">No</button>
                    <button type="button" class="btn btn-animation btn-md fw-bold" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Yes</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade theme-modal remove-coupon" id="exampleModalToggle2" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-center" id="exampleModalLabel12">Done!</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="remove-box text-center">
                        <div class="wrapper">
                            <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 52 52">
                                <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"></circle>
                                <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"></path>
                            </svg>
                        </div>
                        <h4 class="text-content">It's Removed.</h4>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Delete Modal Box End -->

    <!-- latest js -->
    <script src="assets/js/jquery-3.6.0.min.js"></script>

    <!-- Bootstrap js -->
    <script src="assets/js/bootstrap/bootstrap.bundle.min.js"></script>

    <!-- feather icon js -->
    <script src="assets/js/icons/feather-icon/feather.min.js"></script>
    <script src="assets/js/icons/feather-icon/feather-icon.js"></script>

    <!-- scrollbar simplebar js -->
    <script src="assets/js/scrollbar/simplebar.js"></script>
    <script src="assets/js/scrollbar/custom.js"></script>

    <!-- Sidebar js -->
    <script src="assets/js/config.js"></script>

    <!-- customizer js -->
    <script src="assets/js/customizer.js"></script>

    <!-- Plugins js -->
    <script src="assets/js/sidebar-menu.js"></script>
    <script src="assets/js/notify/bootstrap-notify.min.js"></script>
    <script src="assets/js/notify/index.js"></script>

    <!-- Data table js -->
    <script src="assets/js/jquery.dataTables.js"></script>
    <script src="assets/js/custom-data-table.js"></script>

    <!-- sidebar effect -->
    <script src="assets/js/sidebareffect.js"></script>

    <!-- Theme js -->
    <script src="assets/js/script.js"></script>
</body>

</html>