Use placeholders to generate statistics pages

15 files changed, 714 insertions, 13 deletions

diff --git a/resources/views/modules/statistics-chart/age-difference.phtml b/resources/views/modules/statistics-chart/age-difference.phtml
new file mode 100644
index 0000000000..987b15b30a
--- /dev/null
+++ b/resources/views/modules/statistics-chart/age-difference.phtml
@@ -0,0 +1,51 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Age difference') ?>
+</h4>
+
+<div class="row row-cols-1 row-cols-md-2 g-3 mb-3">
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Age between siblings') ?>
+            </h5>
+            #topAgeBetweenSiblingsList#
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Greatest age between siblings') ?>
+            </h5>
+            <div class="card-body">
+                #topAgeBetweenSiblingsFullName#
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Age between husband and wife') ?>
+            </h5>
+            #ageBetweenSpousesMFList#
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Age between wife and husband') ?>
+            </h5>
+            #ageBetweenSpousesFMList#
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/birth-age.phtml b/resources/views/modules/statistics-chart/birth-age.phtml
new file mode 100644
index 0000000000..8e4748d13c
--- /dev/null
+++ b/resources/views/modules/statistics-chart/birth-age.phtml
@@ -0,0 +1,57 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Age at birth of child') ?>
+</h4>
+
+<div class="row row-cols-1 row-cols-md-2 g-3 mb-3">
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Youngest father') ?> — #youngestFatherAge:1#
+            </h5>
+            <div class="card-body">
+                #youngestFather#
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Youngest mother') ?> — #youngestMotherAge:1#
+            </h5>
+            <div class="card-body">
+                #youngestMother#
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Oldest father') ?> — #oldestFatherAge:1#
+            </h5>
+            <div class="card-body">
+                #oldestFather#
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Oldest mother') ?> — #oldestMotherAge:1#
+            </h5>
+            <div class="card-body">
+                #oldestMother#
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/children.phtml b/resources/views/modules/statistics-chart/children.phtml
new file mode 100644
index 0000000000..3220a5068f
--- /dev/null
+++ b/resources/views/modules/statistics-chart/children.phtml
@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Children in family') ?>
+</h4>
+
+<div class="row row-cols-1 row-cols-md-2 g-3 mb-3">
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Average number of children per family') ?>
+                <span class="badge bg-secondary rounded-pill float-end">#averageChildren#</span>
+            </h5>
+            <div class="card-body">
+                #statsChildren#
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Number of families without children') ?>
+                <span class="badge bg-secondary rounded-pill float-end">#noChildrenFamilies#</span>
+            </h5>
+            <div class="card-body">
+                #chartNoChildrenFamilies#
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Largest families') ?>
+            </h5>
+            #topTenLargestFamilyList#
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Largest number of grandchildren') ?>
+            </h5>
+            #topTenLargestGrandFamilyList#
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/custom.phtml b/resources/views/modules/statistics-chart/custom.phtml
index fa979a9be8..7fa14ca195 100644
--- a/resources/views/modules/statistics-chart/custom.phtml
+++ b/resources/views/modules/statistics-chart/custom.phtml
@@ -8,7 +8,7 @@ use Fisharebest\Webtrees\View;
 
 /**
  * @var StatisticsChartModule $module
- * @var Tree            $tree
+ * @var Tree                  $tree
  */
 
 ?>
diff --git a/resources/views/modules/statistics-chart/families.phtml b/resources/views/modules/statistics-chart/families.phtml
index 8623774ca6..f19c605aa8 100644
--- a/resources/views/modules/statistics-chart/families.phtml
+++ b/resources/views/modules/statistics-chart/families.phtml
@@ -9,10 +9,10 @@ use Fisharebest\Webtrees\Statistics;
 ?>
 
 <div class="container pt-3">
-    <?= view('statistics/families/total-records', ['stats' => $stats]) ?>
-    <?= view('statistics/families/marriage-length', ['stats' => $stats]) ?>
-    <?= view('statistics/families/marriage-age', ['stats' => $stats]) ?>
-    <?= view('statistics/families/birth-age', ['stats' => $stats]) ?>
-    <?= view('statistics/families/children', ['stats' => $stats]) ?>
-    <?= view('statistics/families/age-difference', ['stats' => $stats]) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/family-totals')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/marriage-length')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/marriage-age')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/birth-age')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/children')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/age-difference')) ?>
 </div>
diff --git a/resources/views/modules/statistics-chart/family-totals.phtml b/resources/views/modules/statistics-chart/family-totals.phtml
new file mode 100644
index 0000000000..3af9db7238
--- /dev/null
+++ b/resources/views/modules/statistics-chart/family-totals.phtml
@@ -0,0 +1,102 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Total families') ?>
+    <span class="badge bg-secondary rounded-pill float-end">#totalFamilies#</span>
+</h4>
+
+<div class="row mb-3 row-cols-1 row-cols-lg-2 g-3">
+    <div class="col">
+        <div class="d-grid gap-3">
+            <div class="card">
+                <h5 class="card-header border-bottom-0">
+                    <?= I18N::translate('Total marriages') ?>
+                    <span class="badge bg-secondary rounded-pill float-end">#totalMarriages#</span>
+                </h5>
+            </div>
+
+            <div class="card">
+                <h5 class="card-header">
+                    <?= I18N::translate('Marriages by century') ?>
+                </h5>
+                <div class="card-body">
+                    #statsMarr#
+                </div>
+            </div>
+
+            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 g-3">
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header">
+                            <?= I18N::translate('Earliest marriage') ?>
+                        </h5>
+                        <div class="card-body">
+                            #firstMarriage#
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header">
+                            <?= I18N::translate('Latest marriage') ?>
+                        </h5>
+                        <div class="card-body">
+                            #lastMarriage#
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="d-grid gap-3">
+            <div class="card m-0">
+                <h5 class="card-header border-bottom-0">
+                    <?= I18N::translate('Total divorces') ?>
+                    <span class="badge bg-secondary rounded-pill float-end">#totalDivorces#</span>
+                </h5>
+            </div>
+
+            <div class="card m-0">
+                <h5 class="card-header">
+                    <?= I18N::translate('Divorces by century') ?>
+                </h5>
+                <div class="card-body">
+                    #statsDiv#
+                </div>
+            </div>
+
+            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 g-3">
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header">
+                            <?= I18N::translate('Earliest divorce') ?>
+                        </h5>
+                        <div class="card-body">
+                            #firstDivorce#
+                        </div>
+                    </div>
+                </div>
+    
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header">
+                            <?= I18N::translate('Latest divorce') ?>
+                        </h5>
+                        <div class="card-body">
+                            #lastDivorce#
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/greatest-age.phtml b/resources/views/modules/statistics-chart/greatest-age.phtml
new file mode 100644
index 0000000000..cbd7af4466
--- /dev/null
+++ b/resources/views/modules/statistics-chart/greatest-age.phtml
@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Greatest age at death') ?>
+</h4>
+
+<div class="row row-cols-1 row-cols-md-2 mb-3 g-3">
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Males') ?>
+            </h5>
+            #topTenOldestMaleList#
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Females') ?>
+            </h5>
+            #topTenOldestFemaleList#
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/modules/statistics-chart/individuals.phtml b/resources/views/modules/statistics-chart/individuals.phtml
index a394fcd3fb..a0e617656a 100644
--- a/resources/views/modules/statistics-chart/individuals.phtml
+++ b/resources/views/modules/statistics-chart/individuals.phtml
@@ -9,10 +9,10 @@ use Fisharebest\Webtrees\Statistics;
 ?>
 
 <div class="container pt-3">
-    <?= view('statistics/individuals/total-records', ['stats' => $stats]) ?>
-    <?= view('statistics/individuals/total-events', ['stats' => $stats]) ?>
-    <?= view('statistics/individuals/lifespan', ['stats' => $stats]) ?>
-    <?= view('statistics/individuals/greatest-age', ['stats' => $stats]) ?>
-    <?= view('statistics/individuals/oldest-living', ['stats' => $stats]) ?>
-    <?= view('statistics/individuals/names', ['stats' => $stats]) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/total-individuals')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/total-events')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/lifespan')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/greatest-age')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/oldest-living')) ?>
+    <?= $stats->embedTags(view('modules/statistics-chart/names')) ?>
 </div>
diff --git a/resources/views/modules/statistics-chart/lifespan.phtml b/resources/views/modules/statistics-chart/lifespan.phtml
new file mode 100644
index 0000000000..945166299c
--- /dev/null
+++ b/resources/views/modules/statistics-chart/lifespan.phtml
@@ -0,0 +1,48 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Lifespan') ?>
+</h4>
+
+<div class="row mb-3">
+    <div class="d-grid gap-3">
+        <div class="card">
+            <h5 class="card-header border-bottom-0">
+                <?= I18N::translate('Average age at death') ?>
+                <span class="badge bg-secondary rounded-pill float-end">#averageLifespan:1#</span>
+            </h5>
+        </div>
+        
+        <div class="row row-cols-1 row-cols-md-2 g-3">
+            <div class="col">
+                <div class="card">
+                    <h5 class="card-header border-bottom-0">
+                        <?= I18N::translate('Males') ?>
+                        <span class="badge bg-secondary rounded-pill float-end">#averageLifespanMale:1#</span>
+                    </h5>
+                </div>
+            </div>
+    
+            <div class="col">
+                <div class="card">
+                    <h5 class="card-header border-bottom-0">
+                        <?= I18N::translate('Females') ?>
+                        <span class="badge bg-secondary rounded-pill float-end">#averageLifespanFemale:1#</span>
+                    </h5>
+                </div>
+            </div>
+        </div>
+        
+        <div class="card m-0">
+            <div class="card-body">
+                #statsAge() ?>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/marriage-age.phtml b/resources/views/modules/statistics-chart/marriage-age.phtml
new file mode 100644
index 0000000000..c69a02dae8
--- /dev/null
+++ b/resources/views/modules/statistics-chart/marriage-age.phtml
@@ -0,0 +1,64 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Age in year of marriage') ?>
+</h4>
+
+<div class="d-grid gap-3 mb-3">
+    <div class="row row-cols-1 row-cols-md-2 g-3">
+        <div class="col">
+            <div class="card">
+                <h5 class="card-header">
+                    <?= I18N::translate('Youngest male') ?> — #youngestMarriageMaleAge:1#
+                </h5>
+                <div class="card-body">
+                    #youngestMarriageMale#
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="card">
+                <h5 class="card-header">
+                    <?= I18N::translate('Youngest female') ?> — #youngestMarriageFemaleAge:1#
+                </h5>
+                <div class="card-body">
+                    #youngestMarriageFemale#
+                </div>
+            </div>
+        </div>
+        
+        <div class="col">
+            <div class="card">
+                <h5 class="card-header">
+                    <?= I18N::translate('Oldest male') ?> — #oldestMarriageMaleAge:1#
+                </h5>
+                <div class="card-body">
+                    #oldestMarriageMale#
+                </div>
+            </div>
+        </div>
+    
+        <div class="col">
+            <div class="card">
+                <h5 class="card-header">
+                    <?= I18N::translate('Oldest female') ?> — #oldestMarriageFemaleAge:1#
+                </h5>
+                <div class="card-body">
+                    #oldestMarriageFemale#
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="card m-0">
+        <div class="card-body">
+            #statsMarrAge#
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/marriage-length.phtml b/resources/views/modules/statistics-chart/marriage-length.phtml
new file mode 100644
index 0000000000..276b6a5b3f
--- /dev/null
+++ b/resources/views/modules/statistics-chart/marriage-length.phtml
@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Length of marriage') ?>
+</h4>
+
+<div class="row row-cols-1 row-cols-md-2 g-3 mb-3">
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Longest marriage') ?> — #topAgeOfMarriage#
+            </h5>
+            <div class="card-body">
+                #topAgeOfMarriageFamily#
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Shortest marriage') ?> — #minAgeOfMarriage#
+            </h5>
+            <div class="card-body">
+                #minAgeOfMarriageFamily#
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/names.phtml b/resources/views/modules/statistics-chart/names.phtml
new file mode 100644
index 0000000000..69e46de93b
--- /dev/null
+++ b/resources/views/modules/statistics-chart/names.phtml
@@ -0,0 +1,53 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Names') ?>
+</h4>
+
+<div class="row row-cols-1 row-cols-lg-2 mb-3 g-3">
+    <div class="col">
+        <div class="d-grid gap-3">
+            <div class="card">
+                <h5 class="card-header border-bottom-0">
+                    <?= I18N::translate('Total surnames') ?>
+                    <span class="badge bg-secondary rounded-pill float-end">#totalSurnames#</span>
+                </h5>
+            </div>
+
+            <div class="card">
+                <h5 class="card-header">
+                    <?= I18N::translate('Top surnames') ?>
+                </h5>
+                <div class="card-body">
+                    #chartCommonSurnames#
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="d-grid gap-3">
+            <div class="card">
+                <h5 class="card-header border-bottom-0">
+                    <?= I18N::translate('Total given names') ?>
+                    <span class="badge bg-secondary rounded-pill float-end">#totalGivennames#</span>
+                </h5>
+            </div>
+
+            <div class="card">
+                <h5 class="card-header">
+                    <?= I18N::translate('Top given names') ?>
+                </h5>
+                <div class="card-body">
+                    #chartCommonGiven#
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/oldest-living.phtml b/resources/views/modules/statistics-chart/oldest-living.phtml
new file mode 100644
index 0000000000..8f2014ccd2
--- /dev/null
+++ b/resources/views/modules/statistics-chart/oldest-living.phtml
@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Oldest living individuals') ?>
+</h4>
+
+<div class="row row-cols-1 row-cols-md-2 mb-3 g-3">
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Males') ?>
+            </h5>
+            #topTenOldestMaleListAlive#
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="card">
+            <h5 class="card-header">
+                <?= I18N::translate('Females') ?>
+            </h5>
+            #topTenOldestFemaleListAlive#
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/total-events.phtml b/resources/views/modules/statistics-chart/total-events.phtml
new file mode 100644
index 0000000000..89c86853e2
--- /dev/null
+++ b/resources/views/modules/statistics-chart/total-events.phtml
@@ -0,0 +1,101 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Events') ?>
+</h4>
+
+<div class="row mb-3 row-cols-1 row-cols-lg-2 g-3">
+    <div class="col">
+        <div class="d-grid gap-3">
+            <div class="card">
+                <h5 class="card-header border-bottom-0">
+                    <?= I18N::translate('Total births') ?>
+                    <span class="badge bg-secondary rounded-pill float-end">#totalBirths#</span>
+                </h5>
+            </div>
+            
+            <div class="card">
+                <h5 class="card-header">
+                    <?= I18N::translate('Births by century') ?>
+                </h5>
+                <div class="card-body">
+                    #statsBirth#
+                </div>
+            </div>
+            
+            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 g-3">
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header">
+                            <?= I18N::translate('Earliest birth') ?>
+                        </h5>
+                        <div class="card-body">
+                            #firstBirth#
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header">
+                            <?= I18N::translate('Latest birth') ?>
+                        </h5>
+                        <div class="card-body">
+                            #lastBirth#
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="d-grid gap-3">
+            <div class="card">
+                <h5 class="card-header border-bottom-0">
+                    <?= I18N::translate('Total deaths') ?>
+                    <span class="badge bg-secondary rounded-pill float-end">#totalDeaths#</span>
+                </h5>
+            </div>
+            
+            <div class="card">
+                <h5 class="card-header">
+                    <?= I18N::translate('Deaths by century') ?>
+                </h5>
+                <div class="card-body">
+                    #statsDeath#
+                </div>
+            </div>
+
+            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 g-3">
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header">
+                            <?= I18N::translate('Earliest death') ?>
+                        </h5>
+                        <div class="card-body">
+                            #firstDeath#
+                        </div>
+                    </div>
+                </div>
+    
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header">
+                            <?= I18N::translate('Latest death') ?>
+                        </h5>
+                        <div class="card-body">
+                            #lastDeath#
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/modules/statistics-chart/total-individuals.phtml b/resources/views/modules/statistics-chart/total-individuals.phtml
new file mode 100644
index 0000000000..fcac41e133
--- /dev/null
+++ b/resources/views/modules/statistics-chart/total-individuals.phtml
@@ -0,0 +1,73 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<h4 class="border-bottom p-2 mb-4">
+    <?= I18N::translate('Total individuals') ?>
+    <span class="badge bg-secondary rounded-pill float-end">#totalIndividuals#</span>
+</h4>
+
+<div class="row mb-3 row-cols-1 row-cols-lg-2 g-3">
+    <div class="col">
+        <div class="d-grid gap-3">
+            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 g-3">
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header border-bottom-0">
+                            <?= I18N::translate('Total males') ?>
+                            <span class="badge bg-secondary rounded-pill float-end">#totalSexMales#</span>
+                        </h5>
+                    </div>
+                </div>
+
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header border-bottom-0">
+                            <?= I18N::translate('Total females') ?>
+                            <span class="badge bg-secondary rounded-pill float-end">#totalSexFemales#</span>
+                        </h5>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-body">
+                    #chartSex#
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col">
+        <div class="d-grid gap-3">
+            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-1 g-3">
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header border-bottom-0">
+                            <?= I18N::translate('Total living') ?>
+                            <span class="badge bg-secondary rounded-pill float-end">#totalLiving#</span>
+                        </h5>
+                    </div>
+                </div>
+    
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header border-bottom-0">
+                            <?= I18N::translate('Total dead') ?>
+                            <span class="badge bg-secondary rounded-pill float-end">#totalDeceased#</span>
+                        </h5>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="card">
+                <div class="card-body">
+                    #chartMortality#
+                </div>
+            </div>
+        </div>
+    </div>
+</div>