{% extends "base.html" %}

{% block title %}{{ project.title }} - Dify AI Learning{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <!-- Project Info Sidebar -->
        <div class="col-lg-4">
            <div class="project-info-card sticky-top">
                <div class="card">
                    <div class="card-body">
                        <div class="project-icon mb-3">
                            <i data-feather="{{ project.icon }}" class="large-icon"></i>
                        </div>
                        <h5 class="card-title">{{ project.title }}</h5>
                        <p class="card-text">{{ project.description }}</p>
                        
                        <div class="project-details">
                            <div class="detail-item">
                                <strong>Difficulty:</strong>
                                <span class="badge bg-{{ project.difficulty_color }}">{{ project.difficulty }}</span>
                            </div>
                            <div class="detail-item">
                                <strong>Duration:</strong>
                                <span><i data-feather="clock" class="small me-1"></i>{{ project.estimated_time }} minutes</span>
                            </div>
                            <div class="detail-item">
                                <strong>Category:</strong>
                                <span>{{ project.category }}</span>
                            </div>
                        </div>
                        
                        {% if project.prerequisites %}
                        <div class="prerequisites mt-3">
                            <h6>Prerequisites:</h6>
                            <ul class="small">
                                {% for prereq in project.prerequisites %}
                                <li>{{ prereq }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                        
                        <div class="project-resources mt-3">
                            <h6>What You'll Build:</h6>
                            <ul class="small">
                                {% for outcome in project.outcomes %}
                                <li>{{ outcome }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Project Content -->
        <div class="col-lg-8">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Home</a></li>
                    <li class="breadcrumb-item active">{{ project.title }}</li>
                </ol>
            </nav>
            
            <div class="project-content">
                <h1 class="project-title">{{ project.title }}</h1>
                
                <!-- Project Overview -->
                <section class="project-section">
                    <h2>Project Overview</h2>
                    <div class="project-overview">
                        {{ project.overview|safe }}
                    </div>
                </section>
                
                <!-- Project Steps -->
                {% for section in project.sections %}
                <section class="project-section">
                    <h2>{{ section.title }}</h2>
                    <div class="section-content">
                        {{ section.content|safe }}
                        
                        {% if section.steps %}
                        <div class="project-steps">
                            {% for step in section.steps %}
                            <div class="project-step">
                                <div class="step-header">
                                    <h4>
                                        <span class="step-number">{{ loop.index }}</span>
                                        {{ step.title }}
                                    </h4>
                                </div>
                                <div class="step-content">
                                    {{ step.content|safe }}
                                    
                                    {% if step.code %}
                                    <div class="code-block mt-3">
                                        <h6>Configuration:</h6>
                                        <pre><code>{{ step.code }}</code></pre>
                                    </div>
                                    {% endif %}
                                    
                                    {% if step.screenshot %}
                                    <div class="screenshot mt-3">
                                        <img src="{{ step.screenshot }}" alt="{{ step.title }}" class="img-fluid rounded border">
                                    </div>
                                    {% endif %}
                                    
                                    {% if step.tips %}
                                    <div class="alert alert-info mt-3">
                                        <h6><i data-feather="lightbulb" class="me-2"></i>Tips:</h6>
                                        <ul class="mb-0">
                                            {% for tip in step.tips %}
                                            <li>{{ tip }}</li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                </section>
                {% endfor %}
                
                <!-- Next Steps -->
                <section class="project-section">
                    <h2>Next Steps</h2>
                    <div class="next-steps">
                        <p>Congratulations on completing this project! Here are some suggestions for what to do next:</p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h5><i data-feather="arrow-right" class="me-2"></i>Try Another Project</h5>
                                        <p>Apply your skills to a different type of AI application</p>
                                        <a href="{{ url_for('index') }}#projects" class="btn btn-outline-primary">Browse Projects</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h5><i data-feather="book" class="me-2"></i>Learn More</h5>
                                        <p>Dive deeper into advanced Dify features and techniques</p>
                                        <a href="{{ url_for('index') }}#tutorials" class="btn btn-outline-primary">View Tutorials</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
{% endblock %}