<% layout('layouts/main') %>
<div class="app-shell">
  <%- partial('partials/client-nav') %>
  <section class="content">
    <div class="page-head"><div><p class="eyebrow">Interventions</p><h1>Mes passages réguliers</h1></div></div>
    <div class="grid cards">
      <% groups.forEach(g=>{ %>
        <article class="panel">
          <h2><%= g.service_type %></h2>
          <p class="muted"><%= g.address || 'Adresse à confirmer' %></p>
          <div class="detail-grid compact">
            <div class="detail-item"><span>Prochain passage</span><strong><%= ui.date(g.next_at, true) %></strong></div>
            <div class="detail-item"><span>Passages planifiés</span><strong><%= g.passages %></strong></div>
          </div>
        </article>
      <% }) %>
      <% if (!groups.length) { %><div class="empty-state"><strong>Aucun passage régulier planifié</strong><span>Lorsqu’un planning fixe est validé, vous le retrouvez ici.</span></div><% } %>
    </div>

    <h2>Prochains passages</h2>
    <div class="mobile-list">
      <% upcoming.forEach(i=>{ %>
        <article class="list-card">
          <div class="list-card-head"><div><strong><%= i.service_type %></strong><span><%= ui.date(i.starts_at, true) %></span></div><span class="badge"><%= ui.label(i.status) %></span></div>
          <p><%= i.address || 'Adresse à confirmer' %></p>
        </article>
      <% }) %>
      <% if (!upcoming.length) { %><p class="panel">Aucun prochain passage.</p><% } %>
    </div>
  </section>
</div>
