<h1>Groups</h1>

<% if (msg) { %><div class="flash"><%= msg %></div><% } %>
<% if (err) { %><div class="flash err"><%= err %></div><% } %>

<div class="card">
  <% const names = Object.keys(counts).sort(); %>
  <% if (!names.length) { %>
    <div class="muted">No groups yet — create the first one below.</div>
  <% } else { %>
  <table>
    <thead><tr><th>Group</th><th>Projects</th><th>Rename</th><th></th></tr></thead>
    <tbody>
      <% names.forEach(function (g) { %>
        <tr>
          <td><strong><%= g %></strong></td>
          <td><%= counts[g] %></td>
          <td>
            <form class="inline" method="post" action="/groups/rename">
              <input type="hidden" name="old_name" value="<%= g %>">
              <input type="text" name="new_name" placeholder="new name" style="width:140px" required>
              <button class="btn small" type="submit">Rename</button>
            </form>
          </td>
          <td>
            <% if (counts[g] === 0) { %>
              <form class="inline" method="post" action="/groups/delete" onsubmit="return confirm('Delete empty group <%= g %>?')">
                <input type="hidden" name="name" value="<%= g %>">
                <button class="btn small danger" type="submit">Delete</button>
              </form>
            <% } else { %>
              <span class="muted">move projects out to delete</span>
            <% } %>
          </td>
        </tr>
      <% }) %>
    </tbody>
  </table>
  <% } %>
  <div class="actions" style="margin-top:12px">
    <form class="inline" method="post" action="/groups">
      <input type="text" name="name" placeholder="new group name" required pattern="[A-Za-z0-9][A-Za-z0-9 _.\-]{0,39}">
      <button class="btn" type="submit">Add group</button>
    </form>
  </div>
  <div class="hint">Renaming moves all its projects along. Assign a project's group on its detail page or when creating it.</div>
</div>
