{% extends "base_public.html" %}

{% block title %}The Crumbforest Crew{% endblock %}

{% block content %}
<main class="container">
    <hgroup>
        <h1>🌲 The Crumbforest Crew</h1>
        <p>Meet the 15 experts ready to help you learn and build.</p>
    </hgroup>

    <div class="crew-grid">
        {% for 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>
                {% if id == 'eule' %}
                <!-- Eule is public -->
                <a href="/crumbforest/roles/{{ id }}" role="button" class="contrast"
                    style="background-color: {{ role.color }}; border-color: {{ role.color }}; width: 100%;">
                    Start Chat
                </a>
                {% else %}
                <!-- Others require login (or are locked) -->
                {% if user %}
                <a href="/crumbforest/roles/{{ id }}" role="button" class="outline"
                    style="color: {{ role.color }}; border-color: {{ role.color }}; width: 100%;">
                    Chat
                </a>
                {% else %}
                <a href="/login?next=/crumbforest/roles/{{ id }}" role="button" class="secondary outline"
                    style="width: 100%;">
                    🔒 Login to Chat
                </a>
                {% endif %}
                {% endif %}
            </footer>
        </article>
        {% endfor %}
    </div>

</main>

<style>
    .crew-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    /* 3 Column Layout for larger screens to enforce 3x5 if roles are multiple of 3 */
    @media (min-width: 992px) {
        .crew-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .role-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-bottom: 0;
        /* Override pico */
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .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;
        /* Push footer down */
        font-size: 0.9rem;
    }
</style>
{% endblock %}