<section>
  <div class="admin-header">
    <h1>Services</h1>
    <a class="button button-primary" href="/admin/divisions/new">+ New Service</a>
  </div>
  <p class="hint">Top-level services appear on the homepage, /services, and the "Three divisions" section of every country page. A service can also have "child" services nested under it — child services get their own page in the same style, but only show up via their parent (and a "+N more" line on /services), keeping the main lists focused.</p>

  <% if (!rows.length) { %>
    <div class="dash-empty-state">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"></rect><circle cx="8.5" cy="9" r="1.5"></circle><path d="M21 15l-5-5-9 9"></path></svg>
      <p>No services yet.</p>
      <a href="/admin/divisions/new">Add your first service &rarr;</a>
    </div>
  <% } else { %>
    <table class="admin-table">
      <thead>
        <tr><th>Service</th><th>Slug</th><th>Tag</th><th>Order</th><th>Status</th><th></th></tr>
      </thead>
      <tbody>
        <% rows.forEach(function(row) { var division = row.division; %>
          <tr>
            <td>
              <% if (row.isChild) { %><span class="admin-table-meta" style="margin-right:0.4rem;">&#8627;</span><% } %><%= division.name %>
              <% if (row.isChild) { %><span class="tag" style="margin-left:0.5rem;">Child of <%= row.parentName %></span><% } %>
            </td>
            <td>/<%= division.slug %></td>
            <td><%= division.tag || '—' %></td>
            <td><%= division.sortOrder %></td>
            <td><span class="tag"><%= division.status %></span></td>
            <td>
              <a href="/<%= division.slug %>" target="_blank" rel="noopener">View</a>
              <a href="/admin/divisions/<%= division.id %>/edit">Edit</a>
              <a href="/admin/divisions/new?parentId=<%= division.id %>">+ Child service</a>
              <form action="/admin/divisions/<%= division.id %>?_method=DELETE" method="POST" style="display:inline"
                    onsubmit="return confirm('Delete this service? The URL will stop working and it will disappear from every page that lists it.')">
                <button type="submit">Delete</button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</section>
