{% extends "base.html" %}

{% block title %}Projects - Devanturas by SimolZimol{% endblock %}
{% block description %}Complete overview of Minecraft plugins and Discord bots developed by SimolZimol{% endblock %}

{% block content %}
<!-- Projects Header -->
<section class="page-header">
    <div class="container">
        <h1>My Projects</h1>
        <p>A comprehensive overview of my Minecraft and Discord development work</p>
    </div>
</section>

<!-- Projects Grid -->
<section class="projects-section">
    <div class="container">
        <div class="projects-filter">
            <button class="filter-btn active" data-filter="all">All Projects</button>
            <button class="filter-btn" data-filter="minecraft">Minecraft</button>
            <button class="filter-btn" data-filter="discord">Discord</button>
        </div>

        <div class="projects-grid">
            {% for project in projects %}
            <div class="project-card {{ project.color }}" data-category="{{ project.type.lower().replace(' ', '-') }}">
                <div class="project-header">
                    <div class="project-icon">
                        <i class="{{ project.icon }}"></i>
                    </div>
                    <div class="project-meta">
                        <h3>{{ project.name }}</h3>
                        <span class="project-type">{{ project.type }}</span>
                        <span class="project-status status-{{ project.status.lower().replace(' ', '-') }}">{{ project.status }}</span>
                    </div>
                </div>
                
                <div class="project-description">
                    <p>{{ project.description }}</p>
                    <div class="project-details">
                        <p>{{ project.long_description }}</p>
                    </div>
                </div>
                
                <div class="project-technologies">
                    {% for tech in project.technologies %}
                    <span class="tech-tag">{{ tech }}</span>
                    {% endfor %}
                </div>
                
                <div class="project-stats">
                    {% if project.version %}
                    <div class="stat">
                        <span class="stat-label">Version</span>
                        <span class="stat-value">{{ project.version }}</span>
                    </div>
                    {% endif %}
                    {% if project.downloads %}
                    <div class="stat">
                        <span class="stat-label">Status</span>
                        <span class="stat-value">{{ project.downloads }}</span>
                    </div>
                    {% endif %}
                    {% if project.users %}
                    <div class="stat">
                        <span class="stat-label">Users</span>
                        <span class="stat-value">{{ project.users }}</span>
                    </div>
                    {% endif %}
                </div>
                
                <div class="project-actions">
                    <a href="{{ project.url }}" class="btn btn-primary">
                        <i class="fas fa-info-circle"></i> Details
                    </a>
                    
                    {% for link_name, link_url in project.links.items() %}
                    <a href="{{ link_url }}" target="_blank" class="btn btn-secondary btn-small">
                        {% if link_name == 'github' %}
                            <i class="fab fa-github"></i>
                        {% elif link_name == 'modrinth' %}
                            <i class="fas fa-cube"></i>
                        {% elif link_name == 'spigot' %}
                            <i class="fas fa-plug"></i>
                        {% elif link_name == 'discord' %}
                            <i class="fab fa-discord"></i>
                        {% else %}
                            <i class="fas fa-external-link-alt"></i>
                        {% endif %}
                        {{ link_name.title() }}
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Technology Stack Section -->
<section class="tech-stack-section">
    <div class="container">
        <h2>Technology Stack</h2>
        <p>Technologies and frameworks I work with</p>
        
        <div class="tech-categories">
            <div class="tech-category">
                <h3>Minecraft Development</h3>
                <div class="tech-grid">
                    <div class="tech-item">
                        <i class="fab fa-java"></i>
                        <span>Java</span>
                    </div>
                    <div class="tech-item">
                        <i class="fas fa-server"></i>
                        <span>Spigot</span>
                    </div>
                    <div class="tech-item">
                        <i class="fas fa-paper-plane"></i>
                        <span>Paper</span>
                    </div>
                    <div class="tech-item">
                        <i class="fas fa-cube"></i>
                        <span>Bukkit</span>
                    </div>
                </div>
            </div>
            
            <div class="tech-category">
                <h3>Discord & Web Development</h3>
                <div class="tech-grid">
                    <div class="tech-item">
                        <i class="fab fa-python"></i>
                        <span>Python</span>
                    </div>
                    <div class="tech-item">
                        <i class="fab fa-discord"></i>
                        <span>Discord.py</span>
                    </div>
                    <div class="tech-item">
                        <i class="fas fa-database"></i>
                        <span>MySQL</span>
                    </div>
                    <div class="tech-item">
                        <i class="fab fa-docker"></i>
                        <span>Docker</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="projects-cta">
    <div class="container">
        <div class="cta-content">
            <h2>Have a Project in Mind?</h2>
            <p>I'm always interested in working on new and exciting projects. Let's discuss your ideas!</p>
            <a href="{{ url_for('contact') }}" class="btn btn-primary">Start a Conversation</a>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
// Project filtering
document.addEventListener('DOMContentLoaded', function() {
    const filterBtns = document.querySelectorAll('.filter-btn');
    const projectCards = document.querySelectorAll('.project-card');
    
    filterBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // Remove active class from all buttons
            filterBtns.forEach(b => b.classList.remove('active'));
            // Add active class to clicked button
            this.classList.add('active');
            
            const filter = this.getAttribute('data-filter');
            
            projectCards.forEach(card => {
                if (filter === 'all') {
                    card.style.display = 'block';
                } else {
                    const category = card.getAttribute('data-category');
                    if (category.includes(filter)) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                }
            });
        });
    });
});
</script>
{% endblock %}