{{ define "main" }}
<div class="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
  <!-- Navigation -->
  <nav class="bg-black/50 backdrop-blur-sm fixed w-full z-50">
    <div class="container mx-auto px-4 py-3">
      <div class="flex justify-between items-center">
        <a href="/" class="text-2xl font-bold text-white">SamCloud</a>
        <div class="space-x-6 text-white">
          <a href="/" class="hover:text-blue-400 transition-colors">Home</a>
          <a href="/samcloud" class="hover:text-blue-400 transition-colors">.SamCloud</a>
          <a href="/gallery" class="hover:text-blue-400 transition-colors">Gallery</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Article Content -->
  <div class="container mx-auto px-4 pt-24 pb-12">
    <article class="max-w-4xl mx-auto">
      <header class="mb-8">
        <h1 class="text-4xl font-bold text-white mb-4">{{ .Title }}</h1>
        <time class="text-gray-400 text-sm block mb-6">{{ .Date.Format "January 2, 2006" }}</time>
      </header>

      <!-- Content Grid -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- Main Content -->
        <div class="md:col-span-2 prose prose-invert max-w-none">
          {{ .Content }}
        </div>

        <!-- Sidebar Media -->
        <div class="space-y-6">
          {{ if .Params.featured_video }}
          <div class="rounded-lg overflow-hidden">
            <video class="w-full" controls>
              <source src="{{ .Params.featured_video }}" type="video/mp4">
            </video>
          </div>
          {{ end }}
          
          {{ if .Params.featured_image }}
          <div class="rounded-lg overflow-hidden">
            <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full">
          </div>
          {{ end }}

          <!-- Additional Resources -->
          {{ with .Params.resources }}
          <div class="bg-gray-800/50 rounded-lg p-6">
            <h3 class="text-xl font-semibold text-white mb-4">Resources</h3>
            <ul class="space-y-2">
              {{ range . }}
              <li>
                <a href="{{ .url }}" class="text-blue-400 hover:text-blue-300 transition-colors">
                  {{ .title }}
                </a>
              </li>
              {{ end }}
            </ul>
          </div>
          {{ end }}
        </div>
      </div>
    </article>
  </div>
</div>

<!-- Styles -->
<style>
  .prose {
    color: #94a3b8;
  }
  .prose h2 {
    color: #e2e8f0;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  .prose a {
    color: #60a5fa;
  }
  .prose p {
    margin-bottom: 1.25rem;
  }
  .prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
  }
</style>
{{ end }}