{% extends "index.html" %}
{% block title %}總覽{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}


{% block body %}

<p id="company_text" hidden></p>
<p id="factory_text" hidden></p>
<p id="department_text" hidden></p>
<p id="towergroup_text" hidden></p>

<div class="card">
    <h1 class="fw-bold">機組狀態</h1>

    <div id='factory'>
        <p id='company_name'></p>
        <div class="row px-0 mx-0">
            <div class="col-lg-6">
                <div>
                    <div class="ps-3" id='company'></div>
                    <div class="mb-3" id='factory_select'> </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div style="display: none;" id="map"></div>
            </div>
        </div>
    </div>
    <div id='department'>
        <select style="display: none;" class="form-select" id="department_list" onChange="department_change();">
        </select>
        <div id='department_show'></div>
    </div>
    <div id='towergroup'></div>
</div>
<script type="text/javascript" src="static/home.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNaWlcg9y27m2ZpzXQ2EhH1BZW2WAxA6E&callback=initMap"
    asyncdefer></script>
{% endblock %}