<script>
  import Header from "../../lib/Header.svelte";

  const videos = [
    'void.mp4',
    'asmr.mp4',
    'geometry_dash_layout.webm',
    'wd_gaster_rapping.webm',
    'trinkets.mp4',
    'car_door.webm',
    'eminem_potion.mp4',
    'LASIK_eye_surgery.mp4',
    'yellow_egg.mp4',
    'mab.mp4',
    'yipp.mp4',
    'just_a_week_away.webm',
    'oh_my_lordy_lord.webm',
    'toad.mp4',
    'crispsy.mp4',
    'griddy.mp4',
    'soevil.mp4',
    'caralarmlayout.mp4',
    'the_pizza.mp4',
    'wiggles.mp4',
    'wake-up.mp4',
    'duetto.mp4',
    'doyou.mp4',
    'canwe.mp4',
    'dontlikethisvideo.mp4',
    'burgerr.mp4',
    'asterisk.mp4',
    'bottle_child.mp4',
    'diamondtester.mp4',
    'twerk.mp4',
    'ueeeiin.mp4',
    'sunny.mp4',
    'itso.mp4',
    'my_wii.mp4',
    'chips.mp4',
    'breakingnews.mp4',
    'soup.mp4',
    'AA.mp4',
    'yay.mp4',
    'ghostly_spirit.mp4',
    'is_your_family_missing.webm',
    'chicken_sandwich.mp4',
    'cat.mov',
    'hungry.mp4',
    'robert.mp4',
    'the_horse.mp4'
  ];

  const types = {
    'mp4': 'video/mp4',
    'webm': 'video/webm',
    'mov': 'video/quicktime'
  }
</script>

<style>
  .video {
    border-radius: 10px;
    filter: drop-shadow(0px 0px 32px rgba(255, 255, 255, 0.1));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
  }
  .videos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1em;
    flex-wrap: wrap;
  }
  .video-label {
    padding: 0.5em;
    background-color: #eeeeef;
    color: #000;
    font-weight: bold;
    text-align: center;
    font-size: large;
  }
</style>

<svelte:head>
  <title>videos of all time</title>
</svelte:head>

<main style="width: 1100px">
  <Header/>

  <div class="big paragraph neat-bg-container center">
    <div class="neat-bg" style="transform: skewY(1deg)"></div>
    videos of all fucking time compilation
  </div>
  
  <div class="videos">
    {#each videos as vid}
      <div class="video">
        <!-- svelte-ignore a11y-media-has-caption -->
        <video
          width="350"
          controls="true"
          controlslist="disablepictureinpicture nofullscreen noremoteplayback"
          disablepictureinpicture="true"
          disableremoteplayback="true"
          playsinline="true"
          preload="metadata">
          <source src={'/videos/' + vid} type={types[vid.split('.').pop()]}>
        </video>
        <div class="video-label">
          {vid}
        </div>
      </div>
    {/each}
  </div>
</main>