{{ define "main" }}
<div class="container mx-auto px-4 py-12">
    <!-- Two Column Layout for Content and Sidebar -->
    <div class="flex flex-col lg:flex-row gap-8 mb-12">
        <!-- Main Content -->
        <article class="flex-1">
            <header class="mb-8">
                {{ with .Params.categories }}
                    <div class="mb-4">
                        {{ range . }}
                            <a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}" 
                               class="inline-block px-3 py-1 text-sm font-medium text-primary-600 bg-primary-50 rounded-full hover:bg-primary-100 mr-2">
                                {{ . }}
                            </a>
                        {{ end }}
                    </div>
                {{ end }}

                <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                    <h1 class="text-4xl font-bold">{{ .Title }}</h1>
                    {{ with .Params.pdf }}
                        {{ $filename := path.Base . }}
                        <a href="{{ . | relURL }}" download="{{ $filename }}"
                           class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                            {{ i18n "download" | default "Télécharger" }}
                        </a>
                    {{ end }}
                </div>

                {{ with .Description }}
                    <p class="text-lg text-gray-600 mb-4">{{ . }}</p>
                {{ end }}

                {{ partial "post-meta.html" . }}
            </header>

            {{ with .Params.featured_image }}
                <div class="mb-8">
                    <img src="{{ . }}" 
                         alt="{{ $.Title }}" 
                         class="w-full h-auto rounded-lg"
                         loading="lazy">
                </div>
            {{ end }}

            <div class="prose prose-lg max-w-none">
                {{ .Content }}
            </div>
        </article>

        <!-- Sidebar -->
        <aside class="lg:w-80 xl:w-96">
            {{ partial "sidebar.html" . }}
        </aside>
    </div>

    <!-- Full-width Navigation Section -->
    <nav class="border-t border-gray-200 mt-12 pt-8">
        <div class="flex justify-between items-center">
            {{ with .PrevInSection }}
                <a href="{{ .RelPermalink }}" 
                   class="group flex items-center">
                    <svg class="w-5 h-5 mr-2 text-gray-600 group-hover:text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    <div>
                        <div class="text-sm text-gray-600">{{ i18n "previousPost" $ }}</div>
                        <div class="font-medium group-hover:text-primary-600">{{ .Title }}</div>
                    </div>
                </a>
            {{ else }}
                <div></div>
            {{ end }}
            
            {{ with .NextInSection }}
                <a href="{{ .RelPermalink }}" 
                   class="group flex items-center text-right">
                    <div>
                        <div class="text-sm text-gray-600">{{ i18n "nextPost" $ }}</div>
                        <div class="font-medium group-hover:text-primary-600">{{ .Title }}</div>
                    </div>
                    <svg class="w-5 h-5 ml-2 text-gray-600 group-hover:text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                    </svg>
                </a>
            {{ else }}
                <div></div>
            {{ end }}
        </div>
    </nav>

    <!-- Full-width CTA Section -->
    {{ if and .Site.Params.blog.cta.enable .Site.Params.cta.enable }}
        <div class="mt-16">
            {{ partial "components/cta.html" . }}
        </div>
    {{ end }}
</div>
{{ end }}