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

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

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

block append content
  +PageHeader({ title: 'Plyr' })
    p.mt-2 A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
    a(href='https://github.com/sampotts/plyr#try-plyr-online' target='_blank').btn.btn-link.ps-0.btn-sm  Plyr Documentation
      span.fas.fa-chevron-right.ms-1.fs-11
  .row.g-0
    .col-lg-6.pe-lg-2

      +ComponentCard({
        title: 'Youtube Player',
        anchor: true,
      }).mb-3
        .player.rounded-3(data-plyr-provider='youtube' data-plyr-embed-id='bTqVqk7FSmY') 

    .col-lg-6.ps-lg-2  
    
      +ComponentCard({
        title: 'Vimeo Player',
        anchor: true,
      }).mb-3
        .player.rounded-3(data-plyr-provider='vimeo' data-plyr-embed-id='76979871')
        
    .col-lg-12
      .card.mb-3
        .card-header
          h5.mb-0 Stylesheet
        .card-body.bg-body-tertiary
          +ComponentCardLib
            link(href=`vendors/plyr/plyr.css`, rel='stylesheet')
    .col-lg-12
      .card
        .card-header
          h5.mb-0 Javascript
        .card-body.bg-body-tertiary
          +ComponentCardLib
            script(src=`vendors/plyr/plyr.polyfilled.min.js`)