<!DOCTYPE html>
<html lang="en">
<head>
    <?php echo $this->include('include/header'); ?>
</head>
<body>

<div class="shell">

  <?php echo $this->include('include/sidebar'); ?>

  <!-- ===== MAIN ===== -->
  <main class="main">
    <div class="topbar">
      <div>
        <h1 id="helloTxt">Welcome back</h1>
        <p class="crumb">Here is a summary of your architect network.</p>
      </div>
      <a class="btn btn-primary" href="#">+ Register new architect</a>
    </div>

    <div class="stat-grid">
      <div class="stat"><div class="num" id="statTotal">0</div><div class="lbl">Architects mapped to you</div></div>
      <div class="stat alt"><div class="num" id="statInvited">0</div><div class="lbl">Invites sent (pending install)</div></div>
      <div class="stat alt2"><div class="num" id="statActive">0</div><div class="lbl">Active on the app</div></div>
    </div>

    <section class="panel">
      <h2>Recently added</h2>
      <p class="sub">Your latest architect registrations appear here.</p>

      <div class="table-wrap">
        <table aria-label="Recently added architects">
          <thead>
            <tr><th>Architect</th><th>Contact No.</th><th>City</th><th>Status</th></tr>
          </thead>
          <tbody id="recentRows"></tbody>
        </table>
      </div>

      <!-- stacked cards shown instead of the table on phones -->
      <div class="card-list" id="recentCards"></div>
    </section>
  </main>

</div>

<?php echo $this->include('include/script'); ?>

</body>
</html>
