<!-- Main Content -->
<section class="container mx-auto my-8 bg-secondary p-6">
  <div class="rounded relative flex flex-col">
    <!-- Title and Uploader -->
    <h1 class="font-bold mb-2 text-3xl">
      {{ clip?.title }}
    </h1>
    <div class="text-gray-400 mb-6">
      Uploaded By {{ clip?.displayName }} on
      <span>{{ clip?.timestamp | fbTimestamp }}</span>
    </div>

    <!-- Video Editor -->
    <div class="relative aspect-w-16 aspect-h-9">
      <!-- Video Player -->
      <video controls #videoPlayer crossorigin
        class="video-js vjs-theme-forest mx-auto">
      </video>
    </div>
  </div>
</section>

<!-- More Clips -->
<div class="container mx-auto my-8">
  <h2 class="mt-6 text-2xl">More Clips</h2>

  <!-- Video List -->
  <app-clips-list [scrollable]="false"></app-clips-list>
</div>