{{template "base" .}}

{{define "title"}}Abstimmungen{{end}}

{{define "body"}}
<div class="page-header">
    <h1 class="page-title">Abstimmungen</h1>
    <p class="page-subtitle">Aktuelle Abstimmungen der Digitalen Partei Österreich</p>
</div>

{{if .Issues}}
<div class="card-grid">
    {{range .Issues}}
    <div class="card">
        <div class="card-title">{{.Title}}</div>
        <div class="card-text">{{.Description}}</div>
        <div style="font-size:13px; color:var(--text-muted); margin-top:4px;">
            {{.StartTime.Format "02.01.2006"}} – {{.EndTime.Format "02.01.2006"}}
        </div>
        <div style="display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;">
            <a href="/issues/{{.ID}}" class="btn btn--primary">Details</a>
            {{if $.CanWriteIssues}}
            <button class="btn btn--danger"
                    hx-delete="/issues/{{.ID}}"
                    hx-confirm="Abstimmung wirklich löschen?">Löschen</button>
            {{end}}
        </div>
    </div>
    {{end}}
</div>
{{else}}
<p style="color: var(--text-muted);">Keine Abstimmungen vorhanden.</p>
{{end}}

{{if .CanWriteIssues}}
<details style="margin-top:32px;">
    <summary class="btn btn--primary" style="display:inline-block; cursor:pointer; list-style:none;">+ Neue Abstimmung</summary>
    <div class="auth-card" style="max-width:520px; margin-top:16px;">
        <h2 class="auth-title">Neue Abstimmung</h2>
        <form method="POST" action="/issues">
            <div class="form-group">
                <label class="form-label">Titel</label>
                <input class="form-input" name="title" type="text" required>
            </div>
            <div class="form-group">
                <label class="form-label">Beschreibung</label>
                <textarea class="form-input" name="description" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">Beginn</label>
                <div style="display:flex; gap:8px;">
                    <input class="form-input" name="start_date" type="date" required style="flex:1; min-width:0;">
                    {{template "time-input" (dict "name" "start_clock" "value" "12:00" "required" true)}}
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Ende</label>
                <div style="display:flex; gap:8px;">
                    <input class="form-input" name="end_date" type="date" required style="flex:1; min-width:0;">
                    {{template "time-input" (dict "name" "end_clock" "value" "12:00" "required" true)}}
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Optionen (mind. 2)</label>
                <div id="options-list" style="display:flex; flex-direction:column; gap:8px;">
                    <input class="form-input" name="options" type="text" placeholder="Option 1" required>
                    <input class="form-input" name="options" type="text" placeholder="Option 2" required>
                </div>
                <button type="button" class="btn btn--secondary" style="margin-top:8px;" onclick="addOption()">+ Option hinzufügen</button>
            </div>
            <button class="btn btn--primary" type="submit">Erstellen</button>
        </form>
        <script>
        (function() {
            function pad(n) { return String(n).padStart(2, '0'); }
            function fmtDate(d) {
                return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate());
            }
            const start = new Date();
            const end = new Date(start);
            end.setDate(end.getDate() + 7);
            document.querySelector('input[name="start_date"]').value = fmtDate(start);
            document.querySelector('input[name="end_date"]').value = fmtDate(end);
        })();

        function addOption() {
            const list = document.getElementById('options-list');
            const n = list.children.length + 1;
            const input = document.createElement('input');
            input.className = 'form-input';
            input.name = 'options';
            input.type = 'text';
            input.placeholder = 'Option ' + n;
            list.appendChild(input);
            input.focus();
        }
        </script>
    </div>
</details>
{{end}}
{{end}}