<?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>
