{% extends "base.html" %}
{% block title %}{{title}}{% endblock %}
{% block body %}
หม้อแปลงใต้สายป้อน {{fdid}}
<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>
<img src="../fd_png_map/{{fdid}}" usemap="#image-map"/>
{{ pop }}
</div>
<div>
feed: {{fdid}}
<a href="../fd_pg_ym/{{fdid}}/Y">link</a>
</div>

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
    
<table>
    <tr>
        <th>no</th>
        <th>ID</th>
        <th>kVA</th>
        <th>own</th>
        <th>1เฟส</th>
        <th>3เฟส</th>
        <th>link</th>
        <th>gmap</th>
    </tr>
{% for tr in trans %}
    <tr>
        <td>{{tr.no}}</td>
        <td>
            <a href="../fe_tr_pg_map/{{fdid}}/{{tr.tx_id}}">
            {{tr.tx_id}}
            </a>
        </td>
        <td>{{tr.tx_power}}</td>
        <td>{{tr.tx_own}}</td>
        <td>{{tr.mt_1_ph}}</td>
        <td>{{tr.mt_3_ph}}</td>
        <td><a href="../tr_pg_map/{{fdid}}/{{tr.tx_id}}" target="TR_MAP">map</a></td>
        {% if tr.gm.len()>0 %}
        <td><a href="{{tr.gm}}" target="gmap">gmap</a></td>
        {% endif %}
    </tr>
{% endfor %}
</table>
    
{% endblock %}