{% extends "base.html" %}

{% block content %}
  <section class="section-header">
    <div>
      <p class="eyebrow">Accounts</p>
      <h1>Choose who you're browsing as</h1>
    </div>
  </section>

  <section class="panel">
    <p>Use any of the available accounts below to explore guest or host flows around the site.</p>
    <div class="persona-grid">
      {% for user in users %}
        <article class="persona-card">
          <img src="{{ user.avatar_url }}" alt="{{ user.name }}" />
          <div>
            <h3>{{ user.name }}</h3>
            <p>{{ user.hometown }} · {{ "Hosting" if user.is_host else "Traveling" }}</p>
            <code>{{ user.email }}</code>
            <code>{{ user.password }}</code>
          </div>
          <a class="secondary-button" href="/switch/{{ user.id }}">Use account</a>
        </article>
      {% endfor %}
    </div>
  </section>
{% endblock %}