Medoo.in / Foreach Loop w/Smartyphp

Question

I have two Medoo.in MySQL queries - 1. Grab Project Table (id, name, background_image, game_icon), 2. Grab Information table (id, name, project_id), where project_id = project.id

https://mmostatus.com/ (if you click on the right icon with the 3 bars that is where this table data is being displayed)

For some reason the foreach loop is only displaying the last row of data in smartyphp

<?php
/**
 * Example Application
 *
 * @package Example-application
 */
require '/home/anthony/sites/mmostatus/libs/Smarty.class.php';
require '/home/anthony/sites/mmostatus/current/assets/php/connect.php';

$smarty = new Smarty;
//$smarty->force_compile = true;
$smarty->debugging = false;
$smarty->caching = false;
$smarty->cache_lifetime = 120;

//fetch project id, and monitor details
$project=$database->select("project",[
        "id",
        "name",
        "background_image",
        "game_icon"
]);

foreach($project as $data){
$monitor=$database->select("information",[
            "id",
            "name"
            ],[
            "project_id" => $data['id']
        ]);
}

$smarty->assign("project", $project);
$smarty->assign("monitor", $monitor);
$smarty->display('./templates/index.tpl');
?>

index.tpl

{foreach from=$project key=k item=v}
  <!--Start-->
  <div class="col-sm-12 game-item game-id-{$v.id}">
    <div class="card" style="border-radius: 4px 4px 4px 4px;">
      <div class="bg-gradient position-relative text-white" style="border-radius: 4px 4px 0 0;">
        <img alt="Background Image" class="bg-image opacity-40" style="border-radius: 4px 4px 0 0;" src="{$v.background_image}">
        <div class="h3 m-5 position-relative">
          {$v.name} <img src="{$v.game_icon}" />
          <div style="float:right;" onclick="mmostatus('game-{$v.id}-table');"><img class="icon bg-light" src="assets/img/icons/interface/icon-menu.svg" alt="Icon" data-inject-svg /></div>
        </div>
      </div>
      <!--Table-->
      <div id="game-{$v.id}-table" class="table-responsive" style="display:none;">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Location</th>
              <th scope="col">Uptime</th>
              <th scope="col">Avg. Response Time</th>
              <th scope="col">Status</th>
              <th scope="col">Last Checked</th>
            </tr>
          </thead>
          <tbody>
            {foreach from=$monitor key=k item=mv}
            <tr>
              <th scope="row">{$mv.name}</th>
            </tr>
            {/foreach}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {/foreach}
  <!---End-->
</div>

Answer 1

index.php

    <?php
/**
 * Example Application
 *
 * @package Example-application
 */
require '/home/anthony/sites/mmostatus/libs/Smarty.class.php';
require '/home/anthony/sites/mmostatus/current/assets/php/connect.php';

$smarty = new Smarty;
//$smarty->force_compile = true;
$smarty->debugging = false;
$smarty->caching = false;
$smarty->cache_lifetime = 120;

/**
 * We are fetching Project informionat
 */
 
$project=$database->select("project",[
        "id",
        "name",
        "background_image",
        "game_icon"
]);

/**
 * We are LEFT Joining project.id to information.project_id
 */
 
$monitor = $database->select("information", [
    "[>]project" => ["project_id" => "id"]
],[
    "information.name", 
    "information.project_id", 
    "information.is_ok", 
    "information.uptime", 
    "information.downtime", 
    "information.response_time", 
    "information.last_check",
    "project.id"
]);

/**
 * We are displaying variables to SmartyPHP
 */
 
$smarty->assign("project", $project);
$smarty->assign("monitor", $monitor);
$smarty->display('./templates/index.tpl');
?>

index.tpl

<div class="row mb-md-5 mb-4">
  {foreach from=$project key=k item=v}
  <!--Start-->
  <div class="col-sm-12 game-item game-id-{$v.id}">
    <div class="card" style="border-radius: 4px 4px 4px 4px;">
      <div class="bg-gradient position-relative text-white" style="border-radius: 4px 4px 0 0;">
        <img alt="Background Image" class="bg-image opacity-40" style="border-radius: 4px 4px 0 0;" src="{$v.background_image}">
        <div class="h3 m-5 position-relative">
          {$v.name} <img src="{$v.game_icon}" />
          <div style="float:right;" onclick="mmostatus('game-{$v.id}-table');"><img class="icon bg-light" src="assets/img/icons/interface/icon-menu.svg" alt="Icon" data-inject-svg /></div>
        </div>
      </div>
      <!--Table-->
      <div id="game-{$v.id}-table" class="table-responsive" style="display:none;">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Location</th>
              <th scope="col">Uptime</th>
              <th scope="col">Avg. Response Time</th>
              <th scope="col">Status</th>
              <th scope="col">Last Checked</th>
            </tr>
          </thead>
          <tbody>
            {foreach from=$monitor key=mk item=mv}
            {if $v.id == $mv.project_id}
            <tr>
              <th scope="row">{$mv.name}</th>
              <th>{$mv.uptime}</th>
              <th>{$mv.response_time}</th>
              <th>{$mv.is_ok}</th>
              <th>{$mv.last_check}</th>
            </tr>
            {/if}
            {/foreach}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {/foreach}
  <!---End-->