{% extends "base.html" %}
{% block title %}New Course – Skins & Pins{% endblock %}

{% block content %}
<div class="page">
  <div class="page-header">
    <a href="/admin/courses" style="color:var(--text-muted); font-size:0.9rem;">← Courses</a>
    <h1 style="margin-top:0.25rem;">New course</h1>
  </div>

  <form method="post" action="/admin/courses/new"
        x-data="{
          holes: {{ (form.holes if form else 18)|int }},
          initPars: {{ form.pars | tojson if (form and form.pars) else '{}' }},
          initSIs: {{ form.stroke_indices | tojson if (form and form.stroke_indices) else '{}' }},
          pars: {},
          coursePar() { return Object.values(this.pars).reduce((a, b) => a + parseInt(b || 4), 0); },
          initParState() { this.pars = {}; for (let i = 1; i <= this.holes; i++) this.pars[i] = this.initPars[String(i)] || 4; }
        }"
        x-init="initParState(); $watch('holes', () => initParState())">
    <div class="card">
      <div class="form-group">
        <label for="name">Course name</label>
        {% if errors and errors.name %}<div class="alert alert-error">{{ errors.name }}</div>{% endif %}
        <input type="text" id="name" name="name"
               value="{{ form.name if form else '' }}" placeholder="e.g. Augusta National" required>
      </div>

      <div class="form-group">
        <label for="location">Location <span style="color:var(--text-muted); font-size:0.8rem;">(optional)</span></label>
        <input type="text" id="location" name="location"
               value="{{ form.location if form else '' }}" placeholder="e.g. Augusta, Georgia">
      </div>

      <div class="form-group">
        <label>Holes</label>
        {% if errors and errors.holes %}<div class="alert alert-error">{{ errors.holes }}</div>{% endif %}
        <div style="display:flex; gap:0.75rem;">
          <label class="radio-card">
            <input type="radio" name="holes" value="9" x-model.number="holes">
            <span>9 holes</span>
          </label>
          <label class="radio-card">
            <input type="radio" name="holes" value="18" x-model.number="holes">
            <span>18 holes</span>
          </label>
        </div>
      </div>
    </div>

    <div class="card">
      <h2 style="font-size:0.95rem; color:var(--text-muted); margin-bottom:0.75rem;">
        Hole details
        <span style="font-weight:400; font-size:0.85rem;">
          — Course par: <strong x-text="coursePar()"></strong>
        </span>
      </h2>
      <div class="hole-pars-grid">
        <template x-for="n in Array.from({length: holes}, (_, i) => i + 1)" :key="n">
          <div class="hole-par-cell">
            <div class="hole-par-label" x-text="n"></div>
            <select :name="'par_' + n" class="hole-par-select" x-model="pars[n]">
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
            </select>
            <select :name="'si_' + n" class="hole-par-select">
              <option value="">—</option>
              <template x-for="s in Array.from({length: holes}, (_, i) => i + 1)" :key="s">
                <option :value="s" :selected="(initSIs[String(n)] || null) == s" x-text="s"></option>
              </template>
            </select>
          </div>
        </template>
      </div>
    </div>

    <button type="submit" class="btn btn-primary">Create course</button>
  </form>
</div>
{% endblock %}