@extends('layouts.front')

@section('content')

<style>
  .action-icon {
    padding-top: 3px;
  }

  @media only screen and (min-width: 1200px) {
    #leukeVideos1 .video-container {
      height: 275px;
      margin-bottom: 0;
    }
  }

  #leukeVideos1 .video-container {
    position: relative;
    width: 100%;
    height: 300px;
    /* or any fixed height you want */
    overflow: hidden;
    border-radius: 2px;
  }

  #leukeVideos1 .video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #000;
    border-radius: 2px;
  }

  #leukeVideos1 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    display: grid;
    gap: 8px;
  }

  #delete-btn {
    display: none;
  }

  #delete-btn-m {
    display: none;
  }

  .checkboxCont {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
  }

  #delete-btn {
    width: auto;
    padding: 8px;
    margin-bottom: 16px;
  }
</style>

<!-- include('includes.topbar') -->

<section class="pt-4 vh-94">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-xl-2 col-lg-2 col-md-2">
        @include('includes.leftSidebar')
      </div>

      <div class="col-xl-10 col-lg-10 col-md-10 m-auto">
        <div class="right-container m-auto">
          <div class="container-fluid">
            <div class="row user_profile_top">
              <div class="col-xl-2 col-lg-3 col-md-3 col-4">
                <a href="{{ route('web.userProfile',$userInfo->user_id) }}">