{% extends "base.html" %}
{% block title %}{{title}}{% endblock %}
{% block body %}
<div>
แผนพลังงานทดแทน
</div>
<div>
<style>
img {max-width: 100%; height: auto;}
.imagemap {position: relative;}
.imagemap img {display: block;}
.imagemap .area {display: block; position: absolute; transition: box-shadow 0.15s ease-in-out;}
.imagemap .area:hover {box-shadow: 0px 0px 1vw rgba(0,0,0,0.5);}
</style>
<table>
<tr>

    <td width="50%">
<img src="/p54/re_png_map/{{yr}}"  usemap="#image-map"/>
{{ info.pop }}
</td>

<td style="width: 10%; vertical-align:top;">
Year: {{yr}}
<li><a href="/p54/re_pg_map/2024">2024</a></li>
<li><a href="/p54/re_pg_map/2025">2025</a></li>
<li><a href="/p54/re_pg_map/2026">2026</a></li>
<li><a href="/p54/re_pg_map/2027">2027</a></li>
<li><a href="/p54/re_pg_map/2028">2028</a></li>
<li><a href="/p54/re_pg_map/2029">2029</a></li>
<li><a href="/p54/re_pg_map/2030">2030</a></li>
</td>

<td style="width: 40%; vertical-align:top;">
<li>กำลังรวม: {{info.pwto.separate_with_commas()}} mw</li>
<li>กำลังสูงสุด: {{info.pwmx.separate_with_commas()}} mw</li>
<li>กำลังต่ำสุด: {{info.pwmn.separate_with_commas()}} mw</li>
<li>จำนวน: {{info.ppno}}</li>
</td>
</tr>
</table>
</div>
    
{% endblock %}