---
const videos = [
  {
    author: '<a href="https://github.com/soramanew">soramane</a>',
    source: "https://github.com/caelestia-dots/shell",
    path: "/assets/showcase/soramane.mp4",
    installable: true,
  },
  {
    author: '<a href="https://github.com/end-4">end_4</a>',
    source: "https://github.com/end-4/dots-hyprland",
    path: "/assets/showcase/end4.mp4",
    installable: true,
  },
  {
    author: '<a href="https://outfoxxed.me">outfoxxed</a>',
    source:
      "https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
    path: "/assets/showcase/outfoxxed.mp4",
  },
  {
    author:
      '<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
    path: "/assets/showcase/pfaj-bdeblase.mp4",
  },
  {
    author: '<a href="https://github.com/flickowoa">flicko</a>',
    source: "https://github.com/flickowoa/zephyr",
    path: "/assets/showcase/flicko.mp4",
  },
  {
    author: '<a href="https://vaxry.net">vaxry</a>',
    path: "/assets/showcase/vaxry.mp4",
  },
];
---
<div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
  {videos.map(({ author, source, installable, path }, index) => {
    return (
      <div class=`marquee-item`>
        <video
          data-media-index={index}
          data-media-author={author}
          id="showcase-video"
          class="marquee-item-spacing marquee-item-content"
          muted
          controls
          playsinline
          preload="metadata"
        >
        <source src={path} type="video/mp4"/>
      </video>
      <p>
        Configuration by <Fragment set:html={author}/>
        {source && !installable && <>(<a href={source}>source code</a>)</>}
        {source && installable && <>(<a href={source}>install</a>)</>}
      </p>
      </div>
      )})}
</div>
