{% extends "base.html" %}
{% set section = "modules" %}
{% block title %}Modules — Pipekit{% endblock %}

{% block content %}
<div class="panel">
    <header>
        Modules
        <span class="subtitle">{{ total }} total · grouped by source connection</span>
        <span style="margin-left:auto">
            <a class="btn" href="/wizard">New module…</a>
        </span>
    </header>
    <div class="body tight">
        {% if grouped %}
            {% for conn_name, driver_label, modules in grouped %}
                <div class="group-head">{{ conn_name }} <span style="opacity:.7">({{ driver_label }})</span></div>
                <table class="grid sortable compact">
                    <thead>
                        <tr>
                            <th style="width:12em" onclick="sortTable(this)">name</th>
                            <th onclick="sortTable(this)">description</th>
                            <th style="width:11em" onclick="sortTable(this)">groups</th>
                            <th style="width:11em;white-space:nowrap" onclick="sortTable(this)">last run</th>
                            <th style="width:6em;text-align:right" data-type="num" onclick="sortTable(this)">rows</th>
                            <th style="width:6em;text-align:right" data-type="num" onclick="sortTable(this)">duration</th>
                            <th style="width:7em" onclick="sortTable(this)">status</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for m in modules %}
                        <tr>
                            <td class="namecell"><a href="/modules/{{ m.id }}"><strong>{{ m.name }}</strong></a></td>
                            <td class="desccell">{% if m.description %}<span class="help modesc" title="{{ m.description }}">{{ m.description }}</span>{% endif %}</td>
                            <td style="white-space:nowrap" data-sort="{{ m.groups | map(attribute='group_name') | join(' ') }}">
                                {% for g in m.groups %}
                                <a href="/groups/{{ g.group_id }}" class="tag">{{ g.group_name }}</a>
                                {% endfor %}
                            </td>
                            <td class="mono" style="white-space:nowrap" data-sort="{{ m.last_run_at or '' }}">{{ m.last_run_at | localtime }}</td>
                            <td class="mono" style="text-align:right" data-sort="{{ m.last_row_count if m.last_row_count is not none else -1 }}">{{ m.last_row_count if m.last_row_count is not none else "—" }}</td>
                            <td class="mono" style="text-align:right" data-sort="{{ m.last_duration_s if m.last_duration_s is not none else -1 }}">{{ m.last_duration_s | duration }}</td>
                            <td>{% with module=m %}{% include "_module_status_pill.html" %}{% endwith %}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endfor %}
        {% else %}
            <div class="empty">
                No modules yet.<br>
                <a class="btn" href="/wizard" style="margin-top:0.7rem; display:inline-block">Create one</a>
            </div>
        {% endif %}
    </div>
</div>

<style>
    table.sortable th[onclick] { cursor: pointer; user-select: none; }
    table.sortable th[onclick]:hover { text-decoration: underline; }
    table.sortable th[data-dir]::after { content: " \25B4"; opacity: .6; }
    table.sortable th[data-dir="desc"]::after { content: " \25BE"; }

    /* compact grid */
    table.grid.compact th, table.grid.compact td { padding: 0.3rem 0.6rem; }
    td.namecell { white-space: nowrap; }

    /* description column: single line, truncate with ellipsis (full text on hover) */
    td.desccell .modesc {
        display: inline-block;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
</style>
<script>
function sortTable(th) {
    const table = th.closest('table');
    const tbody = table.tBodies[0];
    if (!tbody) return;
    const idx = Array.prototype.indexOf.call(th.parentNode.children, th);
    const type = th.dataset.type || 'text';
    const asc = th.dataset.dir !== 'asc';   // toggle; default first click ascending

    // clear direction indicator on sibling headers
    Array.prototype.forEach.call(th.parentNode.children, h => {
        if (h !== th) delete h.dataset.dir;
    });
    th.dataset.dir = asc ? 'asc' : 'desc';

    const key = (row) => {
        const cell = row.cells[idx];
        if (!cell) return type === 'num' ? -Infinity : '';
        const raw = cell.dataset.sort !== undefined ? cell.dataset.sort : cell.textContent.trim();
        if (type === 'num') { const n = parseFloat(raw); return isNaN(n) ? -Infinity : n; }
        return raw.toLowerCase();
    };

    Array.from(tbody.rows)
        .sort((a, b) => {
            const x = key(a), y = key(b);
            if (x < y) return asc ? -1 : 1;
            if (x > y) return asc ? 1 : -1;
            return 0;
        })
        .forEach(r => tbody.appendChild(r));
}
</script>
{% endblock %}