{% extends "core/base.html" %}

{% block title %}Certifications - {{ personal_info.name }}{% endblock %}

{% block content %}
{% include "core/sections/page_header.html" with title="Certifications" description="Professional certifications and achievements" %}

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
 
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for cert in certifications %}
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            {% if cert.image %}
            <div class="h-48 overflow-hidden">
                <img src="{{ cert.image.url }}" 
                     alt="{{ cert.name }}" 
                     class="w-full h-full object-contain p-4">
            </div>
            {% endif %}
            <div class="p-6">
                <h2 class="text-xl font-bold mb-2">{{ cert.name }}</h2>
                <p class="text-gray-600 mb-2">{{ cert.issuer }}</p>
                <div class="text-sm text-gray-500 mb-4">
                    <p>Earned: {{ cert.date_earned|date:"F Y" }}</p>
                    {% if cert.expiry_date %}
                    <p>Expires: {{ cert.expiry_date|date:"F Y" }}</p>
                    {% endif %}
                    {% if cert.credential_id %}
                    <p class="mt-2">Credential ID: {{ cert.credential_id }}</p>
                    {% endif %}
                </div>
                {% if cert.description %}
                <p class="text-gray-600 mb-4">{{ cert.description }}</p>
                {% endif %}
                {% if cert.url %}
                <a href="{{ cert.url }}" 
                   target="_blank" 
                   class="inline-block bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                    Verify Certificate
                </a>
                {% endif %}
            </div>
        </div>
        {% empty %}
        <div class="col-span-3 text-center py-8">
            <p class="text-gray-600">No certifications added yet.</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}