{% extends "base.html" %}
{% from "components/tutorial_card.html" import tutorial_card %}

{% block title %}Tutorials - SmartTools{% endblock %}

{% block meta_description %}Learn how to use SmartTools with step-by-step tutorials. From basic setup to advanced workflows.{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <!-- Hero -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
            <h1 class="text-3xl font-bold text-gray-900">Tutorials</h1>
            <p class="mt-4 text-lg text-gray-600">
                Learn SmartTools from the ground up with step-by-step guides.
            </p>
        </div>
    </div>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Getting Started Section -->
        <section class="mb-16">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Getting Started</h2>
            <p class="text-gray-600 mb-8">
                New to SmartTools? Start here with the fundamentals.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {{ tutorial_card(
                    title="Installation & Setup",
                    description="Install SmartTools and configure your first AI provider.",
                    href=url_for('web.tutorials_path', path='installation'),
                    step_number=1
                ) }}

                {{ tutorial_card(
                    title="Your First Tool",
                    description="Create a simple AI-powered command in under 5 minutes.",
                    href=url_for('web.tutorials_path', path='first-tool'),
                    step_number=2
                ) }}

                {{ tutorial_card(
                    title="Understanding YAML Config",
                    description="Learn the structure of SmartTools configuration files.",
                    href=url_for('web.tutorials_path', path='yaml-config'),
                    step_number=3
                ) }}
            </div>
        </section>

        <!-- Core Concepts Section -->
        <section class="mb-16">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Core Concepts</h2>
            <p class="text-gray-600 mb-8">
                Understand the key concepts that power SmartTools.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {% for tutorial in core_tutorials %}
                <a href="{{ url_for('web.tutorials_path', path=tutorial.slug) }}"
                   class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tutorial.title }}</h3>
                    <p class="text-gray-600 text-sm">{{ tutorial.description }}</p>
                    <span class="mt-4 inline-flex items-center text-sm text-indigo-600">
                        Read tutorial
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </a>
                {% else %}
                <a href="{{ url_for('web.tutorials_path', path='providers') }}"
                   class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Working with Providers</h3>
                    <p class="text-gray-600 text-sm">Configure and use different AI providers with your tools.</p>
                    <span class="mt-4 inline-flex items-center text-sm text-indigo-600">
                        Read tutorial
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </a>

                <a href="{{ url_for('web.tutorials_path', path='arguments') }}"
                   class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Custom Arguments</h3>
                    <p class="text-gray-600 text-sm">Add flags and options to make your tools flexible.</p>
                    <span class="mt-4 inline-flex items-center text-sm text-indigo-600">
                        Read tutorial
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </a>

                <a href="{{ url_for('web.tutorials_path', path='multi-step') }}"
                   class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Multi-Step Workflows</h3>
                    <p class="text-gray-600 text-sm">Chain prompts and code steps together.</p>
                    <span class="mt-4 inline-flex items-center text-sm text-indigo-600">
                        Read tutorial
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </a>

                <a href="{{ url_for('web.tutorials_path', path='code-steps') }}"
                   class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Code Steps</h3>
                    <p class="text-gray-600 text-sm">Add Python code processing between AI calls.</p>
                    <span class="mt-4 inline-flex items-center text-sm text-indigo-600">
                        Read tutorial
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </a>
                {% endfor %}
            </div>
        </section>

        <!-- Advanced Section -->
        <section class="mb-16">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Advanced Topics</h2>
            <p class="text-gray-600 mb-8">
                Take your tools to the next level with advanced techniques.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <a href="{{ url_for('web.tutorials_path', path='publishing') }}"
                   class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Publishing Tools</h3>
                    <p class="text-gray-600 text-sm">Share your tools with the community via the registry.</p>
                    <span class="mt-4 inline-flex items-center text-sm text-indigo-600">
                        Read tutorial
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </a>

                <a href="{{ url_for('web.tutorials_path', path='advanced-workflows') }}"
                   class="block bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Advanced Workflows</h3>
                    <p class="text-gray-600 text-sm">Complex multi-provider and branching workflows.</p>
                    <span class="mt-4 inline-flex items-center text-sm text-indigo-600">
                        Read tutorial
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </span>
                </a>
            </div>
        </section>

        <!-- Video Tutorials -->
        {% if video_tutorials %}
        <section>
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Video Tutorials</h2>
            <p class="text-gray-600 mb-8">
                Prefer watching? Check out our video guides.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {% for video in video_tutorials %}
                <a href="{{ video.url }}"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="block bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
                    <div class="relative">
                        <img src="{{ video.thumbnail }}"
                             alt="{{ video.title }}"
                             class="w-full h-48 object-cover">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="w-16 h-16 bg-black bg-opacity-60 rounded-full flex items-center justify-center">
                                <svg class="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-900">{{ video.title }}</h3>
                        <p class="text-sm text-gray-500 mt-1">{{ video.duration }}</p>
                    </div>
                </a>
                {% endfor %}
            </div>
        </section>
        {% endif %}
    </div>
</div>
{% endblock %}