{{template "layout" .}}

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

{{define "content"}}
<fieldset class="tui-fieldset" style="padding: 2rem;">
  <legend>Sessions Management</legend>
  <p class="tui-text-white">
    View and manage game sessions.
  </p>

  <section style="margin-top: 1.5rem;">
    <h2 class="tui-text-green">Active Sessions</h2>
    <div 
      id="active-sessions"
      hx-get="/sessions/active"
      hx-trigger="load"
      hx-swap="innerHTML"
    >
      <div class="tui-panel">Loading active sessions...</div>
    </div>
  </section>

  <section style="margin-top: 1.5rem;">
    <h2 class="tui-text-green">Session History</h2>
    <div 
      id="session-history"
      hx-get="/sessions/history"
      hx-trigger="load"
      hx-swap="innerHTML"
    >
      <div class="tui-panel">Loading session history...</div>
    </div>
  </section>

  <section style="margin-top: 1.5rem;">
    <h2 class="tui-text-green">Start New Session</h2>
    <form hx-post="/sessions" hx-target="#active-sessions" hx-swap="innerHTML">
      <div class="tui-fieldset">
        <label for="session-game">Game:</label>
        <select id="session-game" name="game_id" required class="tui-input">
          <option value="">Select a game...</option>
        </select>
        
        <button type="submit" class="tui-button" style="margin-top: 1rem;">Start Session</button>
      </div>
    </form>
  </section>
</fieldset>
{{end}}