{{ template "header.html" . }}
    <div class="container mx-auto my-8 p-6 bg-white rounded-lg shadow-lg">

        <div class="summary max-w-4xl mx-auto bg-gray-100 border-l-4 border-blue-500 p-6 rounded-lg shadow-lg mb-4">

            <div class="flex flex-col md:flex-row md:space-x-8 items-center">

                <!-- Avatar -->
                <div class="w-40 h-40 md:w-48 md:h-48 rounded-full overflow-hidden bg-gray-300">
                <img src="{{ .ProgramAvatar }}"
                         alt="Avatar"
                         class="w-full h-full object-cover">
                </div>

                <!-- Información -->
                <div class="flex flex-col space-y-4 mt-4 md:mt-0 text-center md:text-left">
                    <ul class="list-none space-y-2">
                    <li><strong>Author:</strong> <a
                        href="{{ .ProgramLink }}">{{ .ProgramAuthor }}</a></li>
                        <li><strong>Program:</strong> {{.ProgramName}}</li>
                        <li><strong>Version:</strong> {{.ProgramVersion}}</li>
                        <li><strong>Year:</strong> {{.ProgramYear}}</li>
                        <li><strong>Stack:</strong> {{.ProgramTechnologies}}</li>
                    </ul>
                </div>
            </div>

        </div>

    </div>

{{ template "footer.html" . }}