{% extends "meeple/base.html" %}
{% load static %}
{% block title %}Log a play{% endblock %}
{% block content %}
<h1>Log a play</h1>
<form method="post" id="play-form" class="card">{% csrf_token %}
  <div class="row">
    <label>Game <select name="game" id="game" required>
      {% for g in games %}<option value="{{ g.pk }}" {% if g.pk == selected_game %}selected{% endif %}>{{ g.title }}</option>{% endfor %}</select></label>
    <label>Date <input type="date" name="date" value="{{ today|date:'Y-m-d' }}" required></label>
    <label>Duration (min) <input type="number" name="duration" min="1" class="narrow"></label>
    <label id="coop-box" hidden>Result <select name="coop_result"><option value="win">We won</option><option value="loss">We lost</option></select></label>
  </div>
  <table id="rows">
    <thead><tr id="head"></tr></thead>
    <tbody></tbody>
  </table>
  <p><button type="button" class="btn small ghost" id="add-row">+ Add player</button></p>
  <label>Notes <textarea name="notes" rows="2"></textarea></label>
  <button class="btn">Save play</button>
</form>
{{ sheets|json_script:"sheets" }}
<template id="player-options">{% for p in players %}<option value="{{ p.pk }}">{{ p.name }}</option>{% endfor %}</template>
<script type="module" src="{% static 'meeple/play_form.js' %}"></script>
{% endblock %}