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

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

{% block content %}
{% include "core/sections/page_header.html" with title="Skills & Expertise" description="Technical expertise and competencies" %}

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    
    
    {% for category, skills in skills_by_category.items %}
        <section class="mb-12">
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-6">{{ category }}</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {% for skill in skills %}
                    <div class="border rounded-lg p-4">
                        <h3 class="text-xl font-semibold mb-2">{{ skill.name }}</h3>
                        <!-- Proficiency Level -->
                        <div class="mb-4">
                            <p class="text-sm text-gray-600 mb-1">Proficiency Level</p>
                            <div class="flex items-center space-x-1">
                                {% for i in "12345" %}
                                    <div class="w-8 h-2 rounded {% if forloop.counter <= skill.proficiency_level %}bg-blue-500{% else %}bg-gray-200{% endif %}"></div>
                                {% endfor %}
                            </div>
                        </div>
                        <!-- Years of Experience -->
                        <div class="mb-4">
                            <p class="text-sm text-gray-600">
                                {{ skill.years_of_experience }} year{{ skill.years_of_experience|pluralize }} experience
                            </p>
                        </div>
                        {% if skill.description %}
                        <p class="text-gray-600 text-sm">{{ skill.description }}</p>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    {% empty %}
        <p class="text-gray-600 text-center py-8">No skills added yet.</p>
    {% endfor %}
</div>
{% endblock %}