<section>
  <div class="admin-header">
    <h1>Office Locations</h1>
    <a class="button button-primary" href="/admin/settings/offices/new">+ New Office</a>
  </div>
  <p class="hint">Shown on the public Contact page, each with its own address and map. <a href="/admin/settings">&larr; Back to Company Settings</a></p>

  <% if (!offices.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">
        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z"></path>
        <circle cx="12" cy="10" r="3"></circle>
      </svg>
      <p>No office locations yet. The Contact page will fall back to the address in Company Settings until you add one.</p>
      <a href="/admin/settings/offices/new">Add your first office &rarr;</a>
    </div>
  <% } else { %>
    <table class="admin-table">
      <thead>
        <tr><th>Name</th><th>Address</th><th>Phone</th><th></th></tr>
      </thead>
      <tbody>
        <% offices.forEach(function(office) { %>
          <tr>
            <td><strong><%= office.name %></strong></td>
            <td class="admin-table-meta"><%= (office.address || '').split('\n')[0] %></td>
            <td class="admin-table-meta"><%= office.phone || '—' %></td>
            <td class="reorder-actions">
              <a href="/admin/settings/offices/<%= office.id %>/edit">Edit</a>
              <form action="/admin/settings/offices/<%= office.id %>?_method=DELETE" method="POST" style="display:inline"
                    onsubmit="return confirm('Delete this office location?')">
                <button type="submit">Delete</button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</section>
