Rolf
82 lines
3.4 KiB
HTML
82 lines
3.4 KiB
HTML
{% 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 %}
|