<section>
  <div class="admin-header">
    <h1>Services & Products</h1>
    <a class="button button-primary" href="/admin/finance/services/new">+ New Service</a>
  </div>
  <p class="hint">The catalog quotes and invoices are priced from. Cost price is never shown to a client; the sell price a client sees is either set manually here or worked out from cost plus a markup (this item's own, or the standard agency fee of <%= settings.standardAgencyFeePercent %>% if left blank).</p>

  <% if (!services.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="7" height="18"></rect><rect x="14" y="3" width="7" height="8"></rect><rect x="14" y="14" width="7" height="7"></rect></svg>
      <p>No services or products in the catalog yet.</p>
      <a href="/admin/finance/services/new">Add your first one &rarr;</a>
    </div>
  <% } else { %>
    <table class="admin-table">
      <thead>
        <tr><th>Name</th><th>Category</th><th>Unit</th><th>Cost price</th><th>Markup</th><th>Sell price</th><th>Status</th><th></th></tr>
      </thead>
      <tbody>
        <% services.forEach(function(s) { %>
          <% var markupPct = (s.markupPercent !== null && s.markupPercent !== undefined) ? s.markupPercent : settings.standardAgencyFeePercent; %>
          <% var sell = (s.sellPrice !== null && s.sellPrice !== undefined) ? Number(s.sellPrice) : Number(s.costPrice) * (1 + Number(markupPct) / 100); %>
          <tr>
            <td><%= s.name %></td>
            <td><%= s.category || '-' %></td>
            <td><%= s.unit %></td>
            <td><%= Number(s.costPrice).toFixed(2) %></td>
            <td><%= s.sellPrice !== null && s.sellPrice !== undefined ? 'manual' : markupPct + '%' %></td>
            <td><%= sell.toFixed(2) %></td>
            <td><span class="tag <%= s.isActive ? 'tag-accepted' : 'tag-expired' %>"><%= s.isActive ? 'active' : 'inactive' %></span></td>
            <td>
              <a href="/admin/finance/services/<%= s.id %>/edit">Edit</a>
              <form action="/admin/finance/services/<%= s.id %>?_method=DELETE" method="POST" style="display:inline"
                    onsubmit="return confirm('Delete this service? Quotes already using it keep their saved prices.')">
                <button type="submit">Delete</button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</section>
