{{template "layout" .}}

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

{{define "content"}}
<fieldset class="tui-fieldset" style="padding: 2rem;">
  <legend>Bosses Management</legend>
  <p class="tui-text-white">
    Manage bosses from Dark Souls games.
  </p>

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

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