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

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    {% include 'core/sections/header.html' %}

<!-- Featured Skills Box -->
    <section class="mb-12">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">Skills</h2>
                <a href="{% url 'core:skill_list' %}" class="text-blue-600 hover:text-blue-800">View all →</a>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                {% for skill in skills %}
                    <div class="border rounded-lg p-4 overflow-hidden hover:shadow-lg transition-shadow">
                        <h3 class="font-semibold mb-2">{{ skill.name }}</h3>
                        <div class="flex items-center mb-2">
                            {% for i in "12345" %}
                                <span class="w-4 h-4 rounded-full mr-1 {% if forloop.counter <= skill.proficiency_level %}bg-blue-500{% else %}bg-gray-200{% endif %}"></span>
                            {% endfor %}
                        </div>
                        <p class="text-sm text-gray-600">{{ skill.years_of_experience }} years</p>
                    </div>
                {% empty %}
                    <p>No featured skills yet.</p>
                {% endfor %}
            </div>
        </div>
    </section>
    <!-- Featured Certifications Box -->
    <section class="mb-12">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">Certifications</h2>
                <a href="{% url 'core:certification_list' %}" class="text-blue-600 hover:text-blue-800">View all →</a>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                {% for cert in certifications %}
                    <div class="border rounded-lg p-4 overflow-hidden hover:shadow-lg transition-shadow">
                        {% if cert.image %}
                            <img src="{{ cert.image.url }}" alt="{{ cert.name }}" 
                                 class="w-full h-32 object-contain mb-4">
                        {% endif %}
                        <h3 class="font-semibold mb-2">{{ cert.name }}</h3>
                        <p class="text-gray-600 mb-2">{{ cert.issuer }}</p>
                        <p class="text-sm text-gray-500">Earned: {{ cert.date_earned|date:"F Y" }}</p>
                    </div>
                {% empty %}
                    <p>No featured certifications yet.</p>
                {% endfor %}
            </div>
        </div>
    </section>
    {% comment %} <section class="mb-12">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">Certifications</h2>
                <a href="{% url 'core:certification_list' %}" class="text-blue-600 hover:text-blue-800">View all →</a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {% for cert in certifications %}
                    <div class="border rounded-lg p-4 overflow-hidden hover:shadow-lg transition-shadow">
                        {% if cert.image %}
                            <img src="{{ cert.image.url }}" alt="{{ cert.name }}" 
                                 class="w-full h-32 object-contain mb-4">
                        {% endif %}
                        <h3 class="font-semibold mb-2">{{ cert.name }}</h3>
                        <p class="text-gray-600 mb-2">{{ cert.issuer }}</p>
                        <p class="text-sm text-gray-500">Earned: {{ cert.date_earned|date:"F Y" }}</p>
                    </div>
                {% empty %}
                    <p>No featured certifications yet.</p>
                {% endfor %}
            </div>
        </div>
    </section> {% endcomment %}
    <!-- Featured Projects Box -->
    <section class="mb-12">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">Featured Projects</h2>
                <a href="{% url 'core:project_list' %}" class="text-blue-600 hover:text-blue-800">View all →</a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {% for project in featured_projects %}
                    <div class="border rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                        {% if project.image %}
                            <div class="h-40">
                                <img src="{{ project.image.url }}" alt="{{ project.title }}" 
                                     class="w-full h-full object-cover">
                            </div>
                        {% endif %}
                        <div class="p-4">
                            <h3 class="text-xl font-semibold mb-2">{{ project.title }}</h3>
                            <p class="text-gray-600 mb-4">{{ project.description|truncatewords:20 }}</p>
                            <div class="flex flex-wrap gap-2 mb-4">
                                {% for tech in project.technology.split %}
                                <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">{{ tech }}</span>
                                {% endfor %}
                            </div>
                            <div class="flex flex-wrap gap-3">
                                <a href="{% url 'core:project_detail' project.slug %}" 
                                   class="inline-block bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                                    View Details
                                </a>
                                {% if project.url %}
                                <a href="{{ project.url }}" target="_blank" 
                                   class="inline-block bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
                                    Live Demo
                                </a>
                                {% endif %}
                                {% if project.github_url %}
                                <a href="{{ project.github_url }}" target="_blank"
                                   class="inline-block bg-gray-800 text-white px-4 py-2 rounded-lg hover:bg-gray-900 transition-colors">
                                    GitHub
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <p>No featured projects yet.</p>
                {% endfor %}
            </div>
        </div>
    </section>

    {% include 'core/sections/contact.html' %}
    {% include 'core/sections/footer.html' %}
</div>
{% endblock %}