{% extends "base.html" %}
{% block content %}
<section class="hero">
  <p class="eyebrow">A private strategy table</p>
  <h1>Build an engine.<br>Race for prestige.</h1>
  <p class="lede">Bring your own content pack, invite up to three friends or bots, and shape the rules before the first turn.</p>
  {% if error %}<p class="alert" role="alert">{{ error }}</p>{% endif %}
  <div class="home-grid">
    <form class="panel" method="post" action="/rooms">
      <h2>Create a table</h2>
      <label>Display name<input name="name" maxlength="32" value="{{ display_name }}" required autocomplete="nickname"></label>
      <button class="primary">Create room</button>
    </form>
    <form class="panel" method="post" action="/join">
      <h2>Join a table</h2>
      <label>Invite code<input name="code" minlength="8" maxlength="8" required autocapitalize="characters"></label>
      <button>Continue</button>
    </form>
  </div>
  <p class="fine-print">No cards, artwork, or playable content are bundled with Gems.</p>
</section>
{% endblock %}