{% extends 'dashboard/base.html' %}
{% block title %}Services{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>Services</h1>
    <p class="sp-muted">Every service card across your website, grouped by page.</p>
  </div>
</div>

{% for section in service_sections %}
<div class="sp-card">
  <div class="sp-flex-between">
    <h2 style="margin:0;">{{ section.page.title }} — {{ section.get_section_type_display }}</h2>
    <a class="sp-btn sp-btn-sm sp-btn-primary" href="{% url 'dashboard_page_editor' section.page.id %}">Manage on page →</a>
  </div>
  <table class="sp-table">
    <thead><tr><th>Icon</th><th>Service</th><th>Description</th></tr></thead>
    <tbody>
      {% for service in section.services.all %}
      <tr>
        <td><i class="{{ service.icon }}"></i></td>
        <td><strong>{{ service.title }}</strong></td>
        <td class="sp-muted">{{ service.description|truncatechars:70 }}</td>
      </tr>
      {% empty %}
      <tr><td colspan="3" class="sp-empty">No services yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% empty %}
<div class="sp-card"><p class="sp-empty">No services sections found on your website yet. Add one from a page's editor.</p></div>
{% endfor %}
{% endblock %}