<!-- @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>TB03</h3>
            <p>Vestas V164, 9.5 MW | SN: 52134 | 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 narrow">
            <h3>Yaw system</h3>
            <div class="row">
                <div class="col-12 yawrose">
                    <img src="/app/core/images/yaw_nacelle.svg" class="nacelle" style="transform: rotate(119deg)" />
                    <img src="/app/core/images/yaw_wind.svg" style="transform: rotate(120deg)" />
                </div>
                <div class="col-6">
                    <h4>120˚</h4>
                    <h6>Wind Direction</h6>
                </div>
                <div class="col-6">
                    <h4>119˚</h4>
                    <h6>Nacelle Direction</h6>
                </div>
            </div>
        </div>
        <div class="frame">
            <h3>Pitch system</h3>
            <div class="row">
                <div class="col-3">
                    <div class="unitgraphwrapper pitch">
                        <div class="min">
                            <h6>0 bar</h6>
                        </div>
                        <div class="max">
                            <h6>250 bar</h6>
                        </div>
                        <div class="base">
                            <div class="valuebar" style="height:20%;"></div>
                            <div class="value" style="height:20%;">
                                <h4>112
                                    <br>
                                    <span>bar</span>
                                </h4>
                            </div>
                        </div>
                        <div class="valuelines"></div>
                        <div class="graphtop"></div>
                        <div class="graphbottom"></div>
                    </div>
                </div>
                <div class="col-3 pitchgraphwrapper">
                    <div class="pitchgraph">
                        <div class="arrow">
                        <img src="/app/core/images/pitch_wing.svg" style="transform: rotate(0deg);">
                    </div>
                    </div>

                </div>
                <div class="col-3 pitchgraphwrapper">
                    <div class="pitchgraph">
                            <div class="arrow">
                                    <img src="/app/core/images/pitch_wing.svg" style="transform: rotate(45deg);">
                                </div>                    </div>

                </div>
                <div class="col-3 pitchgraphwrapper">
                    <div class="pitchgraph">
                            <div class="arrow">
                                    <img src="/app/core/images/pitch_wing.svg" style="transform: rotate(90deg);">
                                </div>                    </div>

                </div>
                <div class="col-3"></div>


            </div>
            <div class="row">
                <div class="col-3">

                    <h6 style="padding-top:22px;">Hydraulic Pressure
                    </h6>
                </div>
                <div class="col-3">
                    <h4>0˚</h4>
                    <h6>Blade 1 pitch</h6>
                </div>
                <div class="col-3">
                    <h4>45˚</h4>
                    <h6>Blade 2 pitch</h6>
                </div>
                <div class="col-3">
                    <h4>90˚</h4>
                    <h6>Blade 3 pitch</h6>
                </div>
            </div>

        </div>
        <div class="frame">
            <h3>Power System</h3>
            <div class="row">
                <div class="col-4">
                    <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>Active Power</h6>
                </div>
                <div class="col-4">
                    <h4>691
                        <span>v</span>
                    </h4>
                    <h6>Voltage L1</h6>
                    <h4>691
                        <span>v</span>
                    </h4>
                    <h6>Voltage L2</h6>
                    <h4>691
                        <span>v</span>
                    </h4>
                    <h6>Voltage L3</h6>
                </div>
                <div class="col-4">
                    <h4>250
                        <span>A</span>
                    </h4>
                    <h6>Current L1</h6>
                    <h4>250
                        <span>A</span>
                    </h4>
                    <h6>Current L2</h6>
                    <h4>250
                        <span>A</span>
                    </h4>
                    <h6>Current L3</h6>
                </div>
            </div>
            <div class="row" style="padding-top:16px;">
                <div class="col-4">
                    <h4>-12.1
                        <span>kVAr</span>
                    </h4>
                    <h6>Reactive Power</h6>
                </div>
                <div class="col-4">
                    <h4>1.00</h4>
                    <h6>Power Factor</h6>
                </div>
                <div class="col-4">
                    <h4>50.63
                        <span>Hz</span>
                    </h4>
                    <h6>Frequency</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 m/s</h6>
                        </div>
                        <div class="max">
                            <h6>32 m/s</h6>
                        </div>
                        <div class="base">
                            <div class="valuebar wind" style="height:40%;"></div>
                            <div class="value" style="height:40%;">
                                <h4>15
                                    <span>m/s</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>Wind Speed</h6>
                </div>

            </div>
        </div>
        <div class="frame">


            <div class="row">
                <div class="col-4">
                    <h3 style="padding-bottom:10px;">Drive train</h3>
                    <h4>120˚</h4>
                    <h6 style="padding-bottom:20px;">Wind Direction</h6>
                    <h4>120˚</h4>
                </div>
                <div class="col-4">
                    <div class="unitgraphwrapper drive">
                        <div class="min">
                            <h6>0 rpm</h6>
                        </div>
                        <div class="max">
                            <h6>70 rpm</h6>
                        </div>
                        <div class="base">
                            <div class="valuebar" style="height:40%;"></div>
                            <div class="value" style="height:40%;">
                                <h4>30
                                    <span>rpm</span>
                                </h4>
                            </div>
                        </div>
                        <div class="valuelines"></div>
                        <div class="graphtop"></div>
                        <div class="graphbottom"></div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="unitgraphwrapper drive">
                        <div class="min">
                            <h6>0 rpm</h6>
                        </div>
                        <div class="max">
                            <h6>70 rpm</h6>
                        </div>
                        <div class="base">
                            <div class="valuebar" style="height:60%;"></div>
                            <div class="value" style="height:60%;">
                                <h4>40
                                    <span>rpm</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-4">
                    <h6>Gearbox temp.</h6>
                </div>
                <div class="col-4">
                    <h6>Generator rpm</h6>
                </div>
                <div class="col-4">
                    <h6>Rotor rpm</h6>
                </div>

            </div>
        </div>
        <div class="frame">A graph made by cool developers</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 m/s</h6>
                        </div>
                        <div class="max">
                            <h6>32 m/s</h6>
                        </div>
                        <div class="base">
                            <div class="valuebar wind" style="height:40%;"></div>
                            <div class="value" style="height:40%;">
                                <h4>15
                                    <span>m/s</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>Wind Speed</h6>
                </div>

            </div>
        </div>
        <div class="frame">


            <div class="row">
                <div class="col-4">
                    <h3 style="padding-bottom:10px;">Drive train</h3>
                    <h4>120˚</h4>
                    <h6 style="padding-bottom:20px;">Wind Direction</h6>
                    <h4>120˚</h4>
                </div>
                <div class="col-4">
                    <div class="unitgraphwrapper drive">
                        <div class="min">
                            <h6>0 rpm</h6>
                        </div>
                        <div class="max">
                            <h6>70 rpm</h6>
                        </div>
                        <div class="base">
                            <div class="valuebar" style="height:40%;"></div>
                            <div class="value" style="height:40%;">
                                <h4>30
                                    <span>rpm</span>
                                </h4>
                            </div>
                        </div>
                        <div class="valuelines"></div>
                        <div class="graphtop"></div>
                        <div class="graphbottom"></div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="unitgraphwrapper drive">
                        <div class="min">
                            <h6>0 rpm</h6>
                        </div>
                        <div class="max">
                            <h6>70 rpm</h6>
                        </div>
                        <div class="base">
                            <div class="valuebar" style="height:60%;"></div>
                            <div class="value" style="height:60%;">
                                <h4>40
                                    <span>rpm</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-4">
                    <h6>Gearbox temp.</h6>
                </div>
                <div class="col-4">
                    <h6>Generator rpm</h6>
                </div>
                <div class="col-4">
                    <h6>Rotor rpm</h6>
                </div>

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

    </div>

</div>