{{ define "main" }}
<div class="mx-auto px-4 py-12">
  <div class="grid md:grid-cols-3 gap-8">
    <!-- Article section -->
    <div class="md:col-span-2">
      <!-- Article header -->
      {{ partial "article-header.html" . }}

      <!-- Article content -->
      <div class="prose prose-invert max-w-none mb-12">
        {{ .Content }}
      </div>

      <!-- Tags section -->
      {{ if .Params.tags }}
      <div class="border-t border-border pt-8">
        <h3 class="text-lg font-semibold text-accent mb-4">{{ i18n "tags" }}</h3>
        <div class="flex flex-wrap gap-2">
          {{ range .Params.tags }}
          <a
            href="/tags/{{ . | urlize }}/"
            class="inline-flex items-center px-3 py-1 border border-border/30 rounded hover:border-accent/50 hover:text-accent transition-colors text-sm"
          >
            {{ . }}
          </a>
          {{ end }}
        </div>
      </div>
      {{ end }}
    </div>

    <!-- Sidebar -->
    {{ partial "sidebar.html" . }}
  </div>
</div>
{{ end }}