<!-- @import "/app/monitor/components/drilltable.kit" -->
<div class="drillcontainer" id="unitdetails">
    <div class="row tools detailtools">
        <div class="col-12 text-right">


            <ul>
                <li class="dropdown notifications hidden-sm-down">
                    <a href="javascript:void(0);" class="dropdown-toggle" role="button">
                        <i class="icon icon-export" data-toggle="tooltip" data-original-title="Export"></i>

                    </a>
                    <div class="dropdown-menu " aria-labelledby="gaergrdsdz">

                        <div>
                            <p>Export as:</p>

                            <a href="#"><i class="icon icon-file-excel"> CSV</i></a>
                            <a href="#"><i class="icon icon-file-image"> Image</i></a>

                        </div>
                    </div>
                </li>
                <li>
                    <i class="icon icon-max maximize" data-toggle="tooltip" data-original-title="Maximize"></i>
                </li>
                <li>
                    <a href="/app/monitor/pages/drilltable_detail.html" target="_blank">
                        <i class="icon icon-newwin" data-toggle="tooltip" data-original-title="Open in new window"></i>
                    </a>
                </li>
                <li>
                    <i class="icon icon-close closeDetail" data-toggle="tooltip" data-original-title="Close"></i>
                </li>
            </ul>
        </div>
    </div>

    <div class="row statusrow">
        <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 text-right  status unitdescription">
            <div class="text-left statusbox">
                <div class="statusgroup">
                    <div class="left">
                        <h4>Status:
                        </h4>
                    </div>
                    <div class="right statusboxtext">
                        <p>
                            <span class="icon-stack">
                                <i class="icon-tri_bg"></i>
                                <i class="icon-warning color-warning"></i>
                            </span>
                            <span>Warning</span></p>
                    </div>
                </div>
                <div class="statusgroup">

                    <div class="left">
                        <p>OEM Status:</p>
                    </div>
                    <div class="right">
                        <p><span>Stopped </span>- Lorem ipsum dolor sit ametum dol orem ipsum dolor sit
                            ametum dolor sit amet.</p>
                    </div>
                </div>
                <div class="statusgroup">
                    <div class="left">
                        <p>Active alarm:</p>
                    </div>
                    <div class="right">
                        <p><span>10.01.2018 10:22 - Generator temperature too hot</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" href="#livedata" role="tab" data-toggle="tab">Live data</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#counters" role="tab" data-toggle="tab">Counters</a>
        </li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="livedata">
            <div class="gridwrapper">


                <div class="frame narrow notlr">
                    <h3>Yaw system</h3>
                    <div class="row">
                        <div class="col-12 text-center">
                            <!-- @import "/app/unitdetails/components/yawsystem.html" -->

                        </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-9 pitchgraphwrapper singlewing">
                            <!-- @import "/app/unitdetails/components/svgwing.html" -->

                        </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-9">
                            <h4>45˚</h4>
                            <h6>Blade 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 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">
                            <h3>Drive train</h3>


                    <div class="row">
                        <div class="col-4">
                            <br><h4>120˚</h4>
                            <h6 style="padding-bottom:20px;">Wind Direction</h6>
                            <h4>120˚</h4>
                        </div>
                        <div class="col-4">
                            <div class="unitgraphwrapper met">
                                <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 met">
                                <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>


       <div role="tabpanel" class="tab-pane" id="counters">
            <div class="gridwrapper">
                <div class="frame third notlr">
                    <h3>Total production</h3>
                    <h4>691.000 <span>kW</span></h4>
                </div>
                <div class="frame third">
                    <h3>Production this year</h3>
                    <h4>39.500 <span>kW</span></h4>
                </div>
                <div class="frame third">
                    <h3>Production this month</h3>
                    <h4>691 <span>kW</span></h4>
                </div>
               
                <div class="frame third">
                    <h3>Environment not ok, total</h3>
                    <h4 class="timeunit">10<span>min.</span></h4>
                    <h4 class="timeunit">55<span>sec.</span></h4>
                </div>
                <div class="frame third">
                    <h3>Environment not ok, this year</h3>
                    <h4 class="timeunit">10<span>min.</span></h4>
                    <h4 class="timeunit">55<span>sec.</span></h4>
                </div>
                <div class="frame third">
                    <h3>Environment not ok, this month</h3>
                    <h4 class="timeunit">10<span>min.</span></h4>
                    <h4 class="timeunit">55<span>sec.</span></h4>
                </div>
                <div class="frame third">
                    <h3>Grid not ok, total</h3>
                    <h4 class="timeunit">20<span>min.</span></h4>
                    <h4 class="timeunit">52<span>sec.</span></h4>
                </div>       <div class="frame third">
                    <h3>Grid not ok, this year</h3>
                    <h4 class="timeunit">20<span>min.</span></h4>
                    <h4 class="timeunit">52<span>sec.</span></h4>
                </div>       <div class="frame third">
                    <h3>Grid not ok, this month</h3>
                    <h4 class="timeunit">20<span>min.</span></h4>
                    <h4 class="timeunit">52<span>sec.</span></h4>
                </div>
                <div class="frame third">
                    <h3>Remote stopped, total</h3>
                    <h4 class="timeunit">3<span>years</span></h4>
                    <h4 class="timeunit">360<span>days</span></h4>
                    <h4 class="timeunit">23<span>hours</span></h4>
                    <h4 class="timeunit">55<span>min.</span></h4>
                    <h4 class="timeunit">44<span>sec.</span></h4>
                </div>         <div class="frame third">
                    <h3>Remote stopped, this year</h3>
                    <h4 class="timeunit">3<span>years</span></h4>
                    <h4 class="timeunit">360<span>days</span></h4>
                    <h4 class="timeunit">23<span>hours</span></h4>
                    <h4 class="timeunit">55<span>min.</span></h4>
                    <h4 class="timeunit">44<span>sec.</span></h4>
                </div>         <div class="frame third">
                    <h3>Remote stopped, this month</h3>
                    <h4 class="timeunit">3<span>years</span></h4>
                    <h4 class="timeunit">360<span>days</span></h4>
                    <h4 class="timeunit">23<span>hours</span></h4>
                    <h4 class="timeunit">55<span>min.</span></h4>
                    <h4 class="timeunit">44<span>sec.</span></h4>
                </div>
                <div class="frame third">
                    <h3>Unit not ok, total</h3>
                    <h4 class="timeunit">20<span>days</span></h4>
                    <h4 class="timeunit">20<span>hours</span></h4>
                    <h4 class="timeunit">20<span>min.</span></h4>
                    <h4 class="timeunit">20<span>sec.</span></h4>
                </div>
                <div class="frame third">
                    <h3>Unit not ok, this year</h3>
                    <h4 class="timeunit">20<span>days</span></h4>
                    <h4 class="timeunit">20<span>hours</span></h4>
                    <h4 class="timeunit">20<span>min.</span></h4>
                    <h4 class="timeunit">20<span>sec.</span></h4>
                </div>
                <div class="frame third">
                    <h3>Unit not ok, this month</h3>
                    <h4 class="timeunit">20<span>days</span></h4>
                    <h4 class="timeunit">20<span>hours</span></h4>
                    <h4 class="timeunit">20<span>min.</span></h4>
                    <h4 class="timeunit">20<span>sec.</span></h4>
                </div>
                <div class="frame third">
                    <h3>Stopped for service, total</h3>
                    <h4 class="timeunit">23<span>hours</span></h4>
                    <h4 class="timeunit">20<span>min.</span></h4>
                    <h4 class="timeunit">52<span>sec.</span></h4>
                </div>                <div class="frame third">
                    <h3>Stopped for service, this year</h3>
                    <h4 class="timeunit">23<span>hours</span></h4>
                    <h4 class="timeunit">20<span>min.</span></h4>
                    <h4 class="timeunit">52<span>sec.</span></h4>
                </div>                <div class="frame third">
                    <h3>Stopped for service, this month</h3>
                    <h4 class="timeunit">23<span>hours</span></h4>
                    <h4 class="timeunit">20<span>min.</span></h4>
                    <h4 class="timeunit">52<span>sec.</span></h4>
                </div>

            </div>
        </div>
    </div>
</div>