{% extends "base.html" %}
{% set section = "groups" %}
{% block title %}{% if group %}Edit group · {{ group.name }}{% else %}New group{% endif %} — Pipekit{% endblock %}

{% block content %}
<div class="panel">
    <header>
        {% if group %}Edit group &middot; {{ group.name }}{% else %}New group{% endif %}
        <span style="margin-left:auto"><a href="{{ cancel_url }}">&larr; back</a></span>
    </header>
    <div class="body">
        <form method="post" action="{{ form_action }}" id="group-form">
            <label class="field">
                <span>name</span>
                <input type="text" name="name" required value="{{ group.name if group else '' }}">
            </label>

            <div class="panel" style="margin-top:1rem">
                <header>
                    Members
                    <span class="subtitle">run in order, lowest first; disabled modules are skipped</span>
                    <button type="button" class="btn ghost" style="margin-left:auto"
                            onclick="addMemberRow()">+ add</button>
                </header>
                <div class="body tight">
                    <table class="grid" id="members-table">
                        <thead>
                            <tr>
                                <th style="width:5rem">order</th>
                                <th>module</th>
                                <th style="width:5rem"></th>
                            </tr>
                        </thead>
                        <tbody id="members-tbody">
                            {% for m in members %}
                            <tr>
                                <td>
                                    <input type="number" name="member_run_order"
                                           value="{{ m.run_order }}" min="0" style="width:4rem">
                                </td>
                                <td>
                                    <select name="member_module_id" style="width:100%">
                                        {% for mod in all_modules %}
                                        <option value="{{ mod.id }}"
                                            {% if mod.id == m.module_id %}selected{% endif %}>
                                            {{ mod.name }}{% if not mod.enabled %} (disabled){% endif %}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </td>
                                <td>
                                    <button type="button" class="ghost"
                                            style="color:var(--danger);border:none"
                                            onclick="this.closest('tr').remove()">remove</button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% if not members %}
                    <div id="members-empty" class="empty" style="margin-top:0.4rem">No members yet.</div>
                    {% endif %}
                </div>
            </div>

            <div class="panel" style="margin-top:1rem">
                <header>
                    Schedules
                    <span class="subtitle">cron expressions in UTC — e.g. <code>0 4 * * *</code> for daily at 04:00</span>
                    <button type="button" class="btn ghost" style="margin-left:auto"
                            onclick="addScheduleRow()">+ add</button>
                </header>
                <div class="body tight">
                    <table class="grid" id="sched-table">
                        <thead>
                            <tr>
                                <th>cron expression</th>
                                <th style="width:6rem">enabled</th>
                                <th style="width:5rem"></th>
                            </tr>
                        </thead>
                        <tbody id="sched-tbody">
                            {% for s in schedules %}
                            <tr>
                                <input type="hidden" name="sched_id" value="{{ s.id }}">
                                <td>
                                    <input type="text" name="sched_cron_expr"
                                           value="{{ s.cron_expr }}" class="mono"
                                           style="width:100%" placeholder="0 * * * *">
                                </td>
                                <td>
                                    <select name="sched_enabled" style="width:100%">
                                        <option value="1" {% if s.enabled %}selected{% endif %}>yes</option>
                                        <option value="0" {% if not s.enabled %}selected{% endif %}>no</option>
                                    </select>
                                </td>
                                <td>
                                    <button type="button" class="ghost"
                                            style="color:var(--danger);border:none"
                                            onclick="removeScheduleRow(this, '{{ s.id }}')">remove</button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% if not schedules %}
                    <div id="sched-empty" class="empty" style="margin-top:0.4rem">No schedules — group runs manually only.</div>
                    {% endif %}
                </div>
            </div>

            <div class="actions" style="justify-content:flex-end;margin-top:0.8rem">
                <a class="btn ghost" href="{{ cancel_url }}">cancel</a>
                <button type="submit" class="primary">{% if group %}save changes{% else %}create group{% endif %}</button>
            </div>
        </form>
    </div>
</div>

<template id="sched-row-template">
    <tr>
        <input type="hidden" name="sched_id" value="">
        <td>
            <input type="text" name="sched_cron_expr" value="" class="mono"
                   style="width:100%" placeholder="0 * * * *">
        </td>
        <td>
            <select name="sched_enabled" style="width:100%">
                <option value="1" selected>yes</option>
                <option value="0">no</option>
            </select>
        </td>
        <td>
            <button type="button" class="ghost"
                    style="color:var(--danger);border:none"
                    onclick="removeScheduleRow(this, '')">remove</button>
        </td>
    </tr>
</template>

<template id="member-row-template">
    <tr>
        <td>
            <input type="number" name="member_run_order" value="0" min="0" style="width:4rem">
        </td>
        <td>
            <select name="member_module_id" style="width:100%">
                {% for mod in all_modules %}
                <option value="{{ mod.id }}">{{ mod.name }}{% if not mod.enabled %} (disabled){% endif %}</option>
                {% endfor %}
            </select>
        </td>
        <td>
            <button type="button" class="ghost"
                    style="color:var(--danger);border:none"
                    onclick="this.closest('tr').remove()">remove</button>
        </td>
    </tr>
</template>

<script>
function addScheduleRow() {
    const tmpl = document.getElementById('sched-row-template');
    const row = tmpl.content.cloneNode(true);
    document.getElementById('sched-tbody').appendChild(row);
    const empty = document.getElementById('sched-empty');
    if (empty) empty.style.display = 'none';
}

function removeScheduleRow(btn, schedId) {
    if (schedId) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'sched_deleted_id';
        input.value = schedId;
        document.getElementById('group-form').appendChild(input);
    }
    btn.closest('tr').remove();
}

function addMemberRow() {
    const tmpl = document.getElementById('member-row-template');
    const row = tmpl.content.cloneNode(true);
    document.getElementById('members-tbody').appendChild(row);
    const empty = document.getElementById('members-empty');
    if (empty) empty.style.display = 'none';
}
</script>
{% endblock %}