{% load i18n %}

<div class="row justify-content-center">
    <!-- Map -->
    <div class="col-md-10">
        <div class="card section-card" style="height: 600px;">
            <div class="card-header">
                <h3 class="card-title"><i class="bi bi-wrench icon" style="color: rgb(0, 123, 197);"></i> {% translate "Nouvelles interventions" %}</h3>
            </div>
            <div class="card-body" style="position: relative;">
                <div id="map" style="height: 500px; position: relative;">
                    <!-- Légende superposée -->
                    <div class="map-legend" id="map-legend"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Chart -->
    <div class="col-md-10">
        <div class="card section-card">
            <div class="card-header">
                <h3 class="card-title"><i class="bi bi-bar-chart icon" style="color: rgb(0, 123, 197);"></i> {% translate "Evolution" %}</h3>
            </div>
            <div class="card-body" style="height: 400px;">
                <div id="chartNbrInterventions" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>
</div>