{{template "layout" .}}

{{define "title"}}Games · Estus Shots{{end}}

{{define "content"}}
<fieldset class="tui-fieldset" style="padding: 2rem;">
  <legend>Games Management</legend>
  <p class="tui-text-white">
    Manage Dark Souls game variants tracked by the system.
  </p>

  <section style="margin-top: 1.5rem;">
    <h2 class="tui-text-green">Game List</h2>
    <div 
      id="game-list"
      hx-get="/games/list"
      hx-trigger="load"
      hx-swap="innerHTML"
    >
      <div class="tui-panel">Loading games...</div>
    </div>
  </section>

  <section style="margin-top: 1.5rem;">
    <h2 class="tui-text-green">Add New Game</h2>
    <form hx-post="/games" hx-target="#game-list" hx-swap="innerHTML">
      <div class="tui-fieldset">
        <label for="game-name">Game Name:</label>
        <input type="text" id="game-name" name="name" required class="tui-input" />
        <button type="submit" class="tui-button" style="margin-top: 1rem;">Add Game</button>
      </div>
    </form>
  </section>
</fieldset>
{{end}}