templates/components/infobar.html.twig line 1

Open in your IDE?
  1. {% block content %}
  3.             {# {{dump(mundatainfo)}} #}
  4.             <div class="col-12 justify-content-center text-center py-3">
  5.                 <div class="row align-items-center">
  6.                     <div class="col-5 border-end border_color_primary">
  7.                         <div class="row">
  8.                             <div class="col-4">
  9.                                 <div class="d-flex align-items-center ps-2 pe-4">
  10.                                     <div class="pe-3">
  11.                                         <span class="material-symbols-outlined">domain</span>
  12.                                     </div>
  13.                                     <div>
  14.                                         <p class="small">{% trans %}Edificios{% endtrans %}</p>
  15.                                         <h3 class="fw-bold mb-0">{{mundatainfo.blg  | number_format(0, '.', '.') }}</h3>                                        
  16.                                     </div>
  17.                                 </div>
  18.                             </div>
  19.                             <div class="col-4">
  20.                                 <div class="d-flex align-items-center ps-2 pe-4">
  21.                                     <div class="pe-3">
  22.                                         <span class="material-symbols-outlined">home</span>
  23.                                     </div>
  24.                                     <div>
  25.                                         <p class="small">{% trans %}Viviendas{% endtrans %}</p>
  26.                                         <h3 class="fw-bold mb-0">{{mundatainfo.dwe | number_format(0, '.', '.') }}</h3>                                        
  27.                                     </div>
  28.                                     
  29.                                 </div>    
  30.                             </div>
  31.                             <div class="col-4">
  32.                                 <div class="d-flex align-items-center ps-2 pe-4">
  33.                                     <div class="pe-3">
  34.                                         <span class="material-symbols-outlined">groups</span>
  35.                                     </div>
  36.                                     <div>
  37.                                         <p class="small">{% trans %}Habitantes{% endtrans %}</p>
  38.                                         <h3 class="fw-bold mb-0">{{mundatainfo.hab | number_format(0, '.', '.') }}</h3>                                        
  39.                                     </div>
  40.                                     
  41.                                 </div>    
  42.                             </div>
  43.                         </div>
  44.                         
  45.                     </div>
  47.                     <div class="col-7">
  48.                         <div class="row">
  49.                             <div class="col-4">
  50.                                 <div class="d-flex justify-content-center align-items-center">
  51.                                     <div class="text-start ">
  52.                                         <div class="d-flex align-items-center" style="height: 50px">
  53.                                             <span class="material-symbols-outlined float-start me-2">bolt</span>                                            
  54.                                         </div>
  55.                                         
  56.                                     </div>
  57.                                     <div class="">
  58.                                         <p class="small float-start">{% trans %}Consumo energía final{% endtrans %}</p>
  59.                                         <h3 class="fw-bold mb-0">{{mundatainfo.kpi_2_final_energy_consumption | number_format(0, '.', '.') }}</h3>
  60.                                         <p class="small">GWh {% trans %}año{% endtrans %}</p>
  61.                                     </div>
  62.                                 </div>
  63.                             </div>
  64.                             <div class="col-4">
  65.                                 <div class="d-flex justify-content-center align-items-center">
  66.                                     <div class="text-start ">
  67.                                         <div class="d-flex align-items-center" style="height: 50px">
  68.                                             <span class="material-symbols-outlined float-start me-2">heat</span>
  69.                                             
  70.                                         </div>
  71.                                         
  72.                                     </div>
  73.                                     <div class="">
  74.                                         <p class="small ">{% trans %}Emisiones{% endtrans %}</p>
  75.                                         <h3 class="fw-bold mb-0">{{mundatainfo.kpi_8_ghg_emissions | number_format(0, '.', '.') }}</h3>
  76.                                         <p class="small">MTCO {% trans %}año{% endtrans %}</p>
  77.                                     </div>
  78.                                 </div>
  79.                             </div>
  80.                             <div class="col-4">
  81.                                 <div class="d-flex justify-content-center align-items-center">
  82.                                     <div class="text-start ">
  83.                                         <div class="d-flex align-items-center" style="height: 50px">
  84.                                             <span class="material-symbols-outlined float-start me-2">euro</span>
  85.                                             
  86.                                         </div>
  87.                                         
  88.                                     </div>
  89.                                     <div class="">
  90.                                         <p class="small float-start">{% trans %}Asequibilidad de la vivienda{% endtrans %}</p>
  91.                                         <h3 class="fw-bold mb-0">{{mundatainfo.kpi_21_average_price_renting_compared_family_income}} %</h3>
  92.                                         <p class="small">{% trans %}de los ingresos{% endtrans %}</p>
  93.                                     </div>
  94.                                 </div>
  95.                             </div>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  99.             </div>
  101. {% endblock %}