{# Tutorial card macro #}
{% macro tutorial_card(tutorial=none, title=none, description=none, href=none, slug=none, thumbnail=none, step_number=none) %}
{% if tutorial is none %}
{% set tutorial = {
    "slug": slug,
    "title": title,
    "description": description,
    "thumbnail": thumbnail
} %}
{% endif %}
{% if href is none and tutorial.slug %}
{% set href = url_for('web.tutorial', slug=tutorial.slug) %}
{% endif %}
<article class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow overflow-hidden">
    <!-- Thumbnail (optional) -->
    {% if tutorial.thumbnail %}
    <div class="aspect-video bg-gray-100 relative">
        <img src="{{ tutorial.thumbnail }}"
             alt="{{ tutorial.title }}"
             class="w-full h-full object-cover"
             loading="lazy">
    </div>
    {% else %}
    <div class="aspect-video bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center">
        <svg class="w-12 h-12 text-white opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
        </svg>
    </div>
    {% endif %}

    <div class="p-4">
        {% if step_number %}
        <p class="text-xs font-semibold uppercase tracking-wide text-indigo-500 mb-2">Step {{ step_number }}</p>
        {% endif %}
        <h3 class="text-lg font-semibold text-gray-900">
            <a href="{{ href or '#' }}"
               class="hover:text-indigo-600 transition-colors">
                {{ tutorial.title }}
            </a>
        </h3>
        <p class="mt-2 text-sm text-gray-600 line-clamp-2">
            {{ tutorial.description or 'Learn how to use SmartTools effectively.' }}
        </p>
        <a href="{{ href or '#' }}"
           class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 transition-colors">
            Read More
            <svg class="ml-1 w-4 h-4" 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>
        </a>
    </div>
</article>
{% endmacro %}