{% extends "base.html" %}

{% block title %}Learning Progress - Dify AI Learning{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-12">
            <h1 class="page-title">
                <i data-feather="trending-up" class="me-2"></i>
                Your Learning Progress
            </h1>
            <p class="page-subtitle">Track your journey through Dify AI mastery</p>
        </div>
    </div>
    
    <!-- Progress Overview -->
    <div class="row mb-5">
        <div class="col-md-3 col-6 mb-3">
            <div class="card stats-card">
                <div class="card-body text-center">
                    <div class="stats-icon">
                        <i data-feather="book-open"></i>
                    </div>
                    <h3 class="stats-number">{{ progress_data|selectattr('progress')|list|length }}</h3>
                    <p class="stats-label">Started</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6 mb-3">
            <div class="card stats-card">
                <div class="card-body text-center">
                    <div class="stats-icon">
                        <i data-feather="check-circle"></i>
                    </div>
                    <h3 class="stats-number">{{ progress_data|selectattr('progress.completed')|list|length }}</h3>
                    <p class="stats-label">Completed</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6 mb-3">
            <div class="card stats-card">
                <div class="card-body text-center">
                    <div class="stats-icon">
                        <i data-feather="play-circle"></i>
                    </div>
                    <h3 class="stats-number">{{ progress_data|rejectattr('progress')|list|length }}</h3>
                    <p class="stats-label">Not Started</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6 mb-3">
            <div class="card stats-card">
                <div class="card-body text-center">
                    <div class="stats-icon">
                        <i data-feather="clock"></i>
                    </div>
                    <h3 class="stats-number">
                        {{ (progress_data|selectattr('progress.completed')|map(attribute='tutorial.estimated_time')|sum) or 0 }}
                    </h3>
                    <p class="stats-label">Minutes Learned</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Progress Timeline -->
    <div class="row">
        <div class="col-12">
            <h2 class="section-title">
                <i data-feather="list" class="me-2"></i>
                Tutorial Progress
            </h2>
            
            <div class="progress-timeline">
                {% for item in progress_data %}
                <div class="progress-item">
                    <div class="progress-marker">
                        {% if item.progress and item.progress.completed %}
                            <div class="marker completed">
                                <i data-feather="check"></i>
                            </div>
                        {% elif item.progress %}
                            <div class="marker in-progress">
                                <span>{{ item.progress.current_step + 1 }}</span>
                            </div>
                        {% else %}
                            <div class="marker not-started">
                                <i data-feather="circle"></i>
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="progress-content">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="card-title">{{ item.tutorial.title }}</h5>
                                        <p class="card-text">{{ item.tutorial.description }}</p>
                                        <div class="tutorial-meta">
                                            <span class="badge bg-{{ item.tutorial.difficulty_color }}">
                                                {{ item.tutorial.difficulty }}
                                            </span>
                                            <span class="text-muted ms-2">
                                                <i data-feather="clock" class="small me-1"></i>
                                                {{ item.tutorial.estimated_time }} min
                                            </span>
                                            {% if item.progress and item.progress.completed %}
                                            <span class="text-success ms-2">
                                                <i data-feather="calendar" class="small me-1"></i>
                                                Completed {{ item.progress.completion_date.strftime('%b %d') }}
                                            </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="progress-actions">
                                        {% if item.progress and item.progress.completed %}
                                            <a href="{{ url_for('tutorial', slug=item.tutorial.slug) }}" 
                                               class="btn btn-outline-primary btn-sm">
                                                Review
                                            </a>
                                        {% elif item.progress %}
                                            <a href="{{ url_for('tutorial', slug=item.tutorial.slug) }}" 
                                               class="btn btn-primary btn-sm">
                                                Continue
                                            </a>
                                        {% else %}
                                            <a href="{{ url_for('tutorial', slug=item.tutorial.slug) }}" 
                                               class="btn btn-outline-primary btn-sm">
                                                Start
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                {% if item.progress and not item.progress.completed %}
                                <div class="tutorial-progress mt-3">
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" 
                                             style="width: {{ (item.progress.current_step / item.tutorial.total_steps * 100)|round }}%">
                                        </div>
                                    </div>
                                    <small class="text-muted">
                                        Step {{ item.progress.current_step + 1 }} of {{ item.tutorial.total_steps }}
                                    </small>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}