{% extends "base.html" %}

{% block title %}{{ project.name }} - Devanturas by SimolZimol{% endblock %}
{% block description %}{{ project.description }} - Detailed information, features, and documentation{% endblock %}

{% block content %}
<!-- Project Hero -->
<section class="project-hero">
    <div class="container">
        <div class="project-hero-content">
            <div class="project-hero-text">
                <div class="project-breadcrumb">
                    <a href="{{ url_for('projects') }}">Projects</a> / {{ project.name }}
                </div>
                <h1>{{ project.name }}</h1>
                <p class="project-tagline">{{ project.tagline }}</p>
                <p class="project-description">{{ project.description }}</p>
                
                <div class="project-hero-stats">
                    {% if project.version %}
                    <div class="hero-stat">
                        <span class="stat-label">Version</span>
                        <span class="stat-value">{{ project.version }}</span>
                    </div>
                    {% endif %}
                    {% if project.status %}
                    <div class="hero-stat">
                        <span class="stat-label">Status</span>
                        <span class="stat-value">{{ project.status }}</span>
                    </div>
                    {% endif %}
                    {% if project.compatibility %}
                    <div class="hero-stat">
                        <span class="stat-label">Compatibility</span>
                        <span class="stat-value">{{ project.compatibility }}</span>
                    </div>
                    {% endif %}
                </div>
                
                <div class="project-hero-actions">
                        {% for link_name, link_url in project.links.items() %}
                        {% if link_name in ['modrinth', 'spigot', 'github'] %}
                        <a href="{{ link_url }}" target="_blank" class="btn btn-primary">
                            {% if link_name == 'github' %}
                                <i class="fab fa-github"></i> GitHub
                            {% elif link_name == 'modrinth' %}
                                <i class="fas fa-cube"></i> Modrinth
                            {% elif link_name == 'spigot' %}
                                <i class="fas fa-plug"></i> SpigotMC
                            {% endif %}
                        </a>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            
            <div class="project-hero-visual">
                <div class="project-icon-large">
                    {% if 'minecraft' in project.name.lower() or 'fly' in project.name.lower() %}
                        <i class="fas fa-paper-plane"></i>
                    {% elif 'discord' in project.name.lower() or 'bot' in project.name.lower() %}
                        <i class="fab fa-discord"></i>
                    {% else %}
                        <i class="fas fa-code"></i>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Project Navigation -->
<nav class="project-nav">
    <div class="container">
        <ul class="project-nav-links">
            <li><a href="#overview" class="active">Overview</a></li>
            <li><a href="#features">Features</a></li>
            {% if project.commands %}
            <li><a href="#commands">Commands</a></li>
            {% endif %}
            {% if project.installation %}
            <li><a href="#installation">Installation</a></li>
            {% endif %}
            <li><a href="#resources">Resources</a></li>
        </ul>
    </div>
</nav>

<!-- Project Overview -->
<section id="overview" class="project-section">
    <div class="container">
        <div class="project-content">
            <div class="content-main">
                <h2>Overview</h2>
                <div class="project-overview">
                    <p>{{ project.long_description }}</p>
                    
                    {% if project.technologies %}
                    <div class="project-tech-stack">
                        <h3>Built With</h3>
                        <div class="tech-tags">
                            {% for tech in project.technologies %}
                            <span class="tech-tag">{{ tech }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if project.server_types %}
                    <div class="compatibility-info">
                        <h3>Compatibility</h3>
                        <div class="compatibility-grid">
                            {% for server_type in project.server_types %}
                            <div class="compatibility-item">
                                <i class="fas fa-check-circle"></i>
                                <span>{{ server_type }}</span>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="content-sidebar">
                <div class="sidebar-card">
                    <h3>Quick Links</h3>
                    <div class="quick-links">
                        {% for link_name, link_url in project.links.items() %}
                        <a href="{{ link_url }}" target="_blank" class="quick-link">
                            {% 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>
                            {% elif link_name == 'wiki' %}
                                <i class="fas fa-book"></i>
                            {% elif link_name == 'issues' %}
                                <i class="fas fa-bug"></i>
                            {% elif link_name == 'documentation' %}
                                <i class="fas fa-file-alt"></i>
                            {% else %}
                                <i class="fas fa-external-link-alt"></i>
                            {% endif %}
                            {{ link_name.title().replace('_', ' ') }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                
                {% if project.technical_highlights %}
                <div class="sidebar-card">
                    <h3>Technical Highlights</h3>
                    <ul class="highlight-list">
                        {% for highlight in project.technical_highlights %}
                        <li>{{ highlight }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section id="features" class="project-section">
    <div class="container">
        <h2>Features</h2>
        <div class="features-grid">
            {% for feature in project.features %}
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-check"></i>
                </div>
                <div class="feature-text">
                    <p>{{ feature }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

{% if project.commands %}
<!-- Commands Section -->
<section id="commands" class="project-section">
    <div class="container">
        <h2>Commands & Permissions</h2>
        <div class="commands-table">
            <table>
                <thead>
                    <tr>
                        <th>Command</th>
                        <th>Description</th>
                        <th>Permission</th>
                    </tr>
                </thead>
                <tbody>
                    {% for command in project.commands %}
                    <tr>
                        <td><code>{{ command.command }}</code></td>
                        <td>{{ command.description }}</td>
                        <td><code>{{ command.permission }}</code></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endif %}

{% if project.installation %}
<!-- Installation Section -->
<section id="installation" class="project-section">
    <div class="container">
        <h2>Installation Guide</h2>
        <div class="installation-steps">
            <ol>
                {% for step in project.installation %}
                <li>{{ step }}</li>
                {% endfor %}
            </ol>
        </div>
    </div>
</section>
{% endif %}

<!-- Resources Section -->
<section id="resources" class="project-section">
    <div class="container">
        <h2>Resources & Support</h2>
        <div class="resources-grid">
            {% for link_name, link_url in project.links.items() %}
            <div class="resource-card">
                <div class="resource-icon">
                    {% if link_name == 'github' %}
                        <i class="fab fa-github"></i>
                    {% elif link_name == 'wiki' %}
                        <i class="fas fa-book"></i>
                    {% elif link_name == 'issues' %}
                        <i class="fas fa-bug"></i>
                    {% elif link_name == 'documentation' %}
                        <i class="fas fa-file-alt"></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 %}
                </div>
                <h3>{{ link_name.title().replace('_', ' ') }}</h3>
                <p>
                    {% if link_name == 'github' %}
                        View source code and contribute to the project
                    {% elif link_name == 'wiki' %}
                        Comprehensive documentation and guides
                    {% elif link_name == 'issues' %}
                        Report bugs and request features
                    {% elif link_name == 'documentation' %}
                        Official project documentation
                    {% elif link_name == 'modrinth' %}
                        Download from Modrinth platform
                    {% elif link_name == 'spigot' %}
                        Download from SpigotMC resources
                    {% elif link_name == 'discord' %}
                        Join the community or access the bot where it is available
                    {% else %}
                        Additional project resources
                    {% endif %}
                </p>
                <a href="{{ link_url }}" target="_blank" class="resource-link">
                    Visit <i class="fas fa-external-link-alt"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Related Projects -->
<section class="related-projects">
    <div class="container">
        <h2>Other Projects</h2>
        <p>Explore more of my development work</p>
        <div class="related-actions">
            <a href="{{ url_for('projects') }}" class="btn btn-primary">View All Projects</a>
            <a href="{{ url_for('minecraft') }}" class="btn btn-secondary">Minecraft Projects</a>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
// Project navigation
document.addEventListener('DOMContentLoaded', function() {
    const navLinks = document.querySelectorAll('.project-nav-links a');
    const sections = document.querySelectorAll('.project-section');
    
    // Smooth scrolling
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    });
    
    // Active section highlighting
    window.addEventListener('scroll', function() {
        let current = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop - 100;
            if (pageYOffset >= sectionTop) {
                current = section.getAttribute('id');
            }
        });
        
        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href') === `#${current}`) {
                link.classList.add('active');
            }
        });
    });
});
</script>
{% endblock %}