<!-- @import "/app/monitor/components/drilltable.kit" -->
<div class="drillcontainer" id="unitdetails">
    <div class="row">
        <div class="col-12 text-right">
            <img class="icon" src="/app/core/images/export_white.svg">
            <img class="icon maximize" src="/app/core/images/max_white.svg">
            <a href="/app/monitor/pages/drilltable_detail.html" target="_blank">
                <img class="icon" src="/app/core/images/newwin_white.svg">
            </a>
            <img class="icon closeDetail" src="/app/core/images/close_white.svg">
        </div>
    </div>

    <div class="row">
        <div class="col-5 unitdescription">
            <h3>SU03</h3>
            <p>SG 30kTL | Risen RSM-60-6-255P | Unit time: 04.18.2017 - 22:30</p>
        </div>
        <div class="col-7 status">
            <table>
                <tr>
                    <td>
                        <h1>Status:</h1>
                    </td>
                    <td class="statusicon">
                        <span class="icon-stack">
                            <i class="icon-tri_bg" style="font-size:36px; line-height:50px;"></i>
                            <i class="icon-warning color-warning" style="font-size:36px; line-height:50px;"></i>
                        </span>
                    </td>
                    <td class="statustext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed arcu facilisis, tempor risus ut, sagittis
                        magna. Aenean rhoncus velit quis nibh viverra.</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="frame wide">
            <h3>Power System</h3>
            <div class="row">
                <div class="col-3">
                    <div class="unitgraphwrapper power">
                        <div class="min">
                            <h6>0 kW</h6>
                        </div>
                        <div class="max">
                            <h6>500 kW</h6>
                        </div>
                        <div class="base">
                            <div class="valuebar power" style="height:40%;"></div>
                            <div class="value" style="height:40%;">
                                <h4>150
                                    <span>kW</span>
                                </h4>
                            </div>
                        </div>
                        <div class="valuelines"></div>
                        <div class="graphtop"></div>
                        <div class="graphbottom"></div>
                    </div>
                    <h6>Power Total</h6>
                </div>
                <div class="col-2">
                    <h4>691
                        <span>kW</span>
                    </h4>
                    <h6>Power 1</h6>
                    <h4>691
                        <span>kW</span>
                    </h4>
                    <h6>Power 2</h6>
                    <h4>691
                        <span>kW</span>
                    </h4>
                    <h6>Power 3</h6>
                </div>
                <div class="col-2">
                    <h4>250
                        <span>V</span>
                    </h4>
                    <h6>Voltage 1</h6>
                    <h4>250
                        <span>V</span>
                    </h4>
                    <h6>Voltage 2</h6>
                    <h4>250
                        <span>V</span>
                    </h4>
                    <h6>Voltage 3</h6>
                </div>
                <div class="col-2" style="z-index:5;">
                    <h4>250
                        <span>A</span>
                    </h4>
                    <h6>Current 1</h6>
                    <h4>250
                        <span>A</span>
                    </h4>
                    <h6>Current 2</h6>
                    <h4>250
                        <span>A</span>
                    </h4>
                    <h6>Current 3</h6>
                </div>
                <div class="col-3">
                    <i class="icon-unit_solar"></i>
                </div>
            </div>
        </div>
        <div class="frame environment">
            <h3>Environmental Impact</h3>
            <div class="row">
                <div class="col-2"><i class="icon-lightning"></i></div>
                <div class="col-10">

                    <h4>691.000 kWh
                    </h4>
                    <h6>Total kWh</h6>

                </div>

            </div>
            <div class="row">
                <div class="col-2"><i class="icon-co2"></i></div>
                <div class="col-10">

                    <h4>250,000 T
                    </h4>
                    <h6>Total CO<sup>2</sup></h6>

                </div>

            </div>
            <div class="row">
                <div class="col-2"><i class="icon-trees"></i></div>
                <div class="col-10">

                    <h4>530 trees
                    </h4>
                    <h6>Total trees</h6>

                </div>

            </div>
        </div>

    </div>
    <div class="row">
        <div class="frame narrow">
            <h3>Meteorological</h3>
            <div class="row">
                <div class="col-6">
                    <div class="unitgraphwrapper met">
                        <div class="min">
                            <h6>-20&deg;C</h6>
                        </div>
                        <div class="max">
                            <h6>40&deg;C</h6>
                        </div>
                        <div class="base">
                            <div class="valuebar" style="height:20%;"></div>
                            <div class="value" style="height:20%;">
                                <h4>7&deg;
                                    <span>C</span>
                                </h4>
                            </div>
                        </div>
                        <div class="valuelines"></div>
                        <div class="graphtop"></div>
                        <div class="graphbottom"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="unitgraphwrapper met">
                        <div class="min">
                            <h6>0 Wh/m<sup>2</sup></h6>
                        </div>
                        <div class="max">
                            <h6>32 Wh/m<sup>2</sup></h6>
                        </div>
                        <div class="base">
                            <div class="valuebar wind" style="height:40%;"></div>
                            <div class="value" style="height:40%;">
                                <h4>7
                                    <span>Wh/m<sup>2</sup></span>
                                </h4>
                            </div>
                        </div>
                        <div class="valuelines"></div>
                        <div class="graphtop"></div>
                        <div class="graphbottom"></div>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-6">
                    <h6>Ambient temp.</h6>
                </div>
                <div class="col-6">
                    <h6>Irradiance</h6>
                </div>

            </div>
        </div>
        <div class="frame">A graph made by cool developers</div>

        <div class="frame">A graph made by cool developers</div>

    </div>

</div>