{% extends "home/base_home.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: 1fr;
    gap: 1.5rem;
  }

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

  /* Desktop: Strictly 3 columns */
  @media (min-width: 1024px) {
    .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;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Ensure rounded corners clip content */
  }

  .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 %}