extends ../../../layouts/LayoutComponent

block prepend styles
  link(href=`${CWD}vendors/glightbox/glightbox.min.css`, rel='stylesheet')

block prepend scripts
  script(src=`${CWD}vendors/glightbox/glightbox.min.js`) 

block append content
  +PageHeader({ title: 'Lightbox' })
    p.mt-2 #{name} uses <b>GLightbox</b> for lightbox. Glightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.
    a(href='https://github.com/biati-digital/glightbox' target='_blank').btn.btn-link.ps-0.btn-sm GLightbox Documentation
      span.fas.fa-chevron-right.ms-1.fs-11
  
  +ComponentCard({
    title: 'Gallery',
    anchor: true,
  }).mb-3
    .row.mx-n1
      .col-6.p-1
        = '\n'
        a.post1(href=`${CWD}assets/img/generic/4.jpg` data-gallery="gallery-1")
          = '\n'
          img(src=`${CWD}assets/img/generic/4.jpg` alt='').img-fluid.rounded  
          = '\n'
        = '\n'
      .col-6.p-1
        = '\n'
        a.post1(href=`${CWD}assets/img/generic/5.jpg` data-gallery="gallery-1")
          = '\n'
          img(src=`${CWD}assets/img/generic/5.jpg` alt='').img-fluid.rounded   
          = '\n'
        = '\n'
      .col-4.p-1
        = '\n'
        a.post1(href=`${CWD}assets/img/gallery/4.jpg` data-gallery="gallery-1")
          = '\n'
          img(src=`${CWD}assets/img/gallery/4.jpg` alt='').img-fluid.rounded  
          = '\n' 
        = '\n'
      .col-4.p-1
        = '\n'
        a.post1(href=`${CWD}assets/img/gallery/5.jpg` data-gallery="gallery-1")
          = '\n'
          img(src=`${CWD}assets/img/gallery/5.jpg` alt='').img-fluid.rounded
          = '\n'  
        = '\n'
      .col-4.p-1
        = '\n'
        a.post1(href=`${CWD}assets/img/gallery/3.jpg` data-gallery="gallery-1")
          = '\n'
          img(src=`${CWD}assets/img/gallery/3.jpg` alt='').img-fluid.rounded    
          = '\n' 
        = '\n' 
  
  +ComponentCard({
    title: 'Simple Image',
    anchor: true,
  }).mb-3
    a(href=`${CWD}assets/img/generic/11.jpg` data-gallery="gallery-2")
      = '\n'
      img(src=`${CWD}assets/img/generic/11.jpg` alt='' width=300).img-fluid.rounded
      = '\n'

  .card.mb-3
    .card-header
      h5.mb-0 Stylesheet
    .card-body.bg-body-tertiary
      +ComponentCardLib
        link(href=`vendors/glightbox/glightbox.min.css`, rel='stylesheet')
  .card
    .card-header
      h5.mb-0 Javascript
    .card-body.bg-body-tertiary
      +ComponentCardLib
        script(src=`vendors/glightbox/glightbox.min.js`)