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

{% block content %}
<div class="hero-section">
    <div class="container">
        <div class="row align-items-center text-center text-md-start">
            <div class="col-md-8 mx-auto">
                <h1 class="hero-title">Share Your Passion. Shape the Future.</h1>
                <p class="hero-subtitle">Join a community of creators and learners. Upload your skills, share your knowledge, and start earning today.</p>
                <a href="#skills-section" class="btn btn-lg btn-accent">Explore Skills</a>
            </div>
        </div>
    </div>
</div>

<section id="skills-section" class="py-5">
    <div class="container">
        <h2 class="section-title text-center mb-5">Latest Skills</h2>
        {% if skills %}
        <div class="row">
            {% for skill in skills %}
            <div class="col-md-4 mb-4">
                <div class="card skill-card h-100">
                    <div class="card-body">
                        <h5 class="card-title">{{ skill.title }}</h5>
                        <p class="card-text">{{ skill.description|truncatewords:20 }}</p>
                        <p class="card-creator">By {{ skill.creator.get_full_name|default:skill.creator.username }}</p>
                    </div>
                    <div class="card-footer">
                        <span class="skill-price">${{ skill.price }}</span>
                        <a href="{% url 'article_detail' skill.pk %}" class="btn btn-sm btn-primary-outline float-end">View Details</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center p-5 bg-light rounded">
            <h3 class="mb-3">The Stage is Set!</h3>
            <p class="lead">No skills have been shared yet. Be the first to inspire others.</p>
            <a href="{% url 'admin:index' %}" class="btn btn-primary mt-3">Become a Creator</a>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}