{{/* Admin teams — team list with member counts. */}}

{{define "admin-teams"}}
<div class="admin-page">
    <h2>Teams</h2>
    <p class="section-hint">Organize users into teams for scoped access to providers, presets, and policies.</p>

    <div class="admin-toolbar">
        <button class="btn-small btn-primary" onclick="Pages.showTeamForm()">+ Create Team</button>
    </div>

    <div id="teamFormWrap" style="display:none;">
        <div class="admin-inline-form" id="teamForm">
            <h3 style="margin:0 0 12px;font-size:14px;" id="teamFormTitle">Create Team</h3>
            <input type="hidden" id="teamFormId" value="">
            <div class="form-row">
                <div class="form-group" style="flex:1;min-width:200px;">
                    <label>Name</label>
                    <input type="text" id="teamFormName" placeholder="Engineering">
                </div>
                <div class="form-group" style="flex:2;min-width:250px;">
                    <label>Description</label>
                    <input type="text" id="teamFormDescription" placeholder="Optional description">
                </div>
            </div>
            <div style="display:flex;gap:8px;margin-top:8px;">
                <button class="btn-small btn-primary" onclick="Pages.saveTeam()">Save</button>
                <button class="btn-small" onclick="Pages.hideTeamForm()">Cancel</button>
            </div>
        </div>
    </div>

    {{if .Data.Teams}}
    <table class="admin-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Members</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {{range .Data.Teams}}
            <tr>
                <td><strong>{{.Name}}</strong></td>
                <td style="color:var(--text-secondary);">{{.Description}}</td>
                <td>{{.MemberCount}}</td>
                <td><span class="admin-badge admin-badge-{{if .IsActive}}active{{else}}inactive{{end}}">{{if .IsActive}}active{{else}}inactive{{end}}</span></td>
                <td>
                    <button class="btn-small" onclick="Pages.editTeam('{{.ID}}','{{.Name}}','{{.Description}}')">Edit</button>
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
    {{else}}
    <div class="empty-hint">No teams created yet.</div>
    {{end}}
</div>
{{end}}