{{ define "main" }}
{{ partial "nav.html" .}}
<div class="bg-blue-300 p-12"></div>
<div class="bg-blue-300">
    <div class="bg-white rounded-md flex flex-col items-center px-2 py-6 max-w-4xl mx-auto">
        <!-- Portada del post -->
        <div class="w-full mb-8 overflow-hidden rounded-lg shadow-xl border-4 border-black">
            {{ if .Params.image }}
            <img
                src="{{ .Params.Image | relURL }}"
                alt="{{ .Title }}"
                class="w-full h-auto object-cover"
            />
            {{ else }}
            <div class="bg-gray-200 text-gray-600 font-mono text-center py-16">
                No image
            </div>
            {{ end }}
        </div>

        <!-- Título -->
        <h1 class="text-4xl font-bold mb-4 text-center">{{ .Title }}</h1>

        <!-- Metadata -->
        <div class="text-sm text-gray-600 mb-6 font-mono flex gap-4 justify-center">
            <span>Publicado el: {{ .Date.Format "Jan 2, 2006" }}</span>
            {{ with .Params.tags }}
            <div class="flex gap-2">
                {{ range . }}
                <span class="px-2 py-1 bg-gray-200 rounded-full">#{{ . }}</span>
                {{ end }}
            </div>
            {{ end }}
        </div>

        <!-- Contenido del post -->
        <article>
            {{ .Content }}
        </article>

        <!-- Botón de volver -->
        <a
            href="/"
            class="
                inline-block mt-6
                border-2 border-black bg-white px-6 py-2
                shadow-[0_4px_0_black]
                hover:shadow-[0_8px_0_black]
                hover:-translate-y-1
                transition-all duration-100 ease-linear
                font-medium
            "
        >
            ← Volver
        </a>
    </div>
</div>
<div class="bg-blue-300 p-5"></div>
{{ end }}