{% extends group_config.template_base or "base_demo.html" %}

{% block title %}Crumbforest Roles{% endblock %}

{% block content %}
<main class="container">
    <hgroup>
        <h1>🌲 Crumbforest Characters</h1>
        <p>Choose your learning companion!</p>
    </hgroup>

    <div class="roles-grid">
        {% for role_id, role in roles.items() %}
        <article class="role-card" style="border-left: 5px solid {{ role.color }};">
            <header>
                <div class="role-icon">{{ role.icon }}</div>
                <h3 style="color: {{ role.color }}">{{ role.name }}</h3>
                <small>{{ role.title }}</small>
            </header>

            <p>{{ role.description }}</p>

            <footer>
                <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;">
                    {% for tag in role.tags %}
                    <span class="badge"
                        style="background-color: {{ role.color }}20; color: {{ role.color }}; border: 1px solid {{ role.color }}40; font-size: 0.7em; padding: 2px 6px; border-radius: 4px;">
                        #{{ tag }}
                    </span>
                    {% endfor %}
                </div>

                <a href="/crumbforest/roles/{{ role_id }}" role="button" class="outline"
                    style="width: 100%; color: {{ role.color }}; border-color: {{ role.color }};">
                    Chat with {{ role.name }}
                </a>
            </footer>
        </article>
        {% endfor %}
    </div>
</main>

<style>
    .roles-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Tablet: 2 columns */
    @media (min-width: 768px) {
        .roles-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Desktop: Strictly 3 columns */
    @media (min-width: 1024px) {
        .roles-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .role-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-bottom: 0;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-radius: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .role-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .role-card header {
        text-align: center;
        padding-bottom: 0.5rem;
    }

    .role-icon {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }

    .role-card p {
        flex-grow: 1;
        font-size: 0.9rem;
    }
</style>
{% endblock %}