filedetails.component.html

<app-page-header
  [title]="'FileManager Details'"
  [title1]="'FileManager Details'"
  [activeitem]="'Advanced UI'"
></app-page-header>

<!-- Start::row-1 -->
<div class="grid grid-cols-12 xl:gap-6">
  <div class="col-span-12 xl:col-span-8">
    <div class="box">
      <div class="box-body space-y-4">
        <img
          class="rounded-sm"
          src="./assets/img/gallery/8.jpg"
          alt="Image Description"
        />
        <div class="sm:flex justify-between space-y-2 sm:space-y-0">
          <div class="flex space-x-2 rtl:space-x-reverse">
            <i
              class="ri ri-image-line text-primary p-2 leading-none bg-primary/20 rounded-sm"
            ></i>
            <h3 class="my-auto font-bold">Nature.jpg</h3>
          </div>
          <div class="flex space-x-3 rtl:space-x-reverse">
            <i
              class="ri ri-edit-2-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
            <i
              class="ri ri-star-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
            <i
              class="ri ri-share-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
            <i
              class="ri ri-download-2-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
            <i
              class="ri ri-delete-bin-6-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <div class="box related-files">
      <div class="box-header">
        <h5 class="box-title">Related Files</h5>
      </div>
      <div class="box-body">
        <owl-carousel-o [options]="customOptions" class="swiper mySwiper">
          <ng-container
            *ngFor="let slide of slidesStore"
            class="swiper-wrapper"
          >
            <ng-template carouselSlide >
              <div class="box mb-0 overflow-hidden">
                <div class="box-body">
                  <a href="javascript:void(0);" class="mx-auto my-3"
                    ><img class="mx-auto" [src]="slide.src" alt="img"
                  /></a>
                </div>
                <div class="box-footer bg-transparent">
                  <div class="flex justify-between">
                    <div>
                      <p class="text-sm">{{ slide.title }}</p>
                    </div>
                    <div class="swiper-text">
                      <p class="text-sm">{{ slide.size }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </ng-template>
          </ng-container>
        </owl-carousel-o>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">File Details</h5>
      </div>
      <div class="box-body p-0">
        <div class="rounded-sm overflow-auto">
          <table class="ti-custom-table ti-custom-table-head">
            <tbody>
              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Type</td>
                <td>Jpg File(.jpg)</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Location</td>
                <td>file/gallery</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Size</td>
                <td>909KB</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Created Date</td>
                <td>1-10-2022</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Modified Date</td>
                <td>12-10-2022</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Dimensions</td>
                <td>7360 * 4912</td>
              </tr>
              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">File Location</td>
                <td>Device/Storage/Archives/AMB-2012.zip</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">File Description</h5>
      </div>
      <div class="box-body">
        <p class="mb-3">
          This file contains 3 folder Synto.main &amp; Synto.premium &amp;
          Synto.featured and 42 images and layout styles are added in this
          update.
        </p>
        <h5 class="font-semibold text-slate-700 dark:text-white text-sm">
          Shared With :-
        </h5>
        <div class="flex -space-x-2 rtl:space-x-reverse mt-2 overflow-auto">
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/1.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/4.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/6.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/5.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/7.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/2.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/9.jpg"
            alt="Image Description"
          />
          <span
            class="inline-flex items-center justify-center h-[2.375rem] w-[2.375rem] rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10"
          >
            <span
              class="font-medium text-gray-500 leading-none dark:text-white/70"
              >9+</span
            >
          </span>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Recent Files</h5>
      </div>
      <div class="box-body">
        <div class="relative recent-files">
          <div class="sm:grid grid-cols-12 gap-6 sm:space-y-0 space-y-6">
            <div class="col-span-12">
              <div class="inner">
                <ks-plain-gallery
                  [id]="200"
                  [images]="imagesRect"
                  [config]="libConfigPlainGalleryRow"
                  (clickImage)="onShow(200, $event)"
                ></ks-plain-gallery>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->