<!-- @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-8 unitdescription">
            <h3>TB03</h3>
            <p>Vestas V164, 9.5 MW | SN: 52134 | Unit time: 04.18.2017 - 22:30</p>
        </div>
        <div class="col-4 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 data-toggle="tooltip" data-html="true" title="<strong>Stopped </strong><br>Lorem ipsum dolor sit ametum dol orem ipsum dolor sit
                            ametum dolor sit amet. Lorem ipsum dolor sit ametum dol orem ipsum dolor sit
                            ametum dolor sit amet.</p>">
                            <span>Stopped </span>- Lorem ipsum dolor sit ametum dol orem ipsum dolor sit
                            ametum dolor sit amet. 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 data-toggle="tooltip" data-html="true"
                            title="<strong>10.01.2018 10:22</strong><br>Generator temperature too hot"><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" id="counterTab">Counters</a>
        </li>
        <li class="nav-item">
            <a class="nav-link " href="#events" role="tab" data-toggle="tab" id="counterTab">Events <span
                    class="count">3</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link " href="#service" role="tab" data-toggle="tab" id="serviceTab">Service</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">
                            <style>
                                #windarrow {
                                    display: none;
                                }
                            </style>
                            <!-- @import "/app/unitdetails/components/yawsystem.html" -->
                        </div>
                        <div class="col-3"></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-4 pitchgraphwrapper">
                            <!-- @import "/app/unitdetails/components/svgwing.html" -->
                        </div>
                        <div class="col-4 pitchgraphwrapper">
                            <!-- @import "/app/unitdetails/components/svgwing.html" -->
                        </div>
                        <div class="col-4 pitchgraphwrapper">
                            <!-- @import "/app/unitdetails/components/svgwing.html" -->
                        </div>
                    </div>
                    <div class="row">

                        <div class="col-4">
                            <h4>0˚</h4>
                            <h6>Blade 1 pitch</h6>
                        </div>
                        <div class="col-4">
                            <h4>45˚</h4>
                            <h6>Blade 2 pitch</h6>
                        </div>
                        <div class="col-4">
                            <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>3.000 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</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>-30&deg;C</h6>
                                </div>
                                <div class="max">
                                    <h6>50&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>25 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-6">
                            <div class="unitgraphwrapper drive ge">
                                <div class="min">
                                    <h6>0 rpm</h6>
                                </div>
                                <div class="max">
                                    <h6>40 rpm</h6>
                                </div>
                                <div class="base">
                                    <div class="valuebar" style="height:40%;"></div>
                                    <div class="value" style="height:40%;">
                                        <h4 class="valuepres" data-tooltip="
                                        <div>
                                                <p>Server time:</p>
                                                <p>12.20.2018 - 08:30:34</p>
                                                <p>Unit time:</p>
                                                <p>12.20.2018 - 09:30:22</p>
                                            <p>NB Tag:</p>
                                            <p>WTUR.W</p>
                                            <p>Source:</p>
                                            <p>Turbin</p>
                                    
                                        </div>">30
                                            <span>rpm</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 drive ge">
                                <div class="min">
                                    <h6 class="valuepres">0 rpm
                                    </h6>
                                </div>
                                <div class="max">
                                    <h6 class="valuepres">2.000 rpm
                                    </h6>
                                </div>
                                <div class="base">
                                    <div class="valuebar" style="height:60%;"></div>
                                    <div class="value" style="height:60%;">
                                        <h4 class="valuepres" data-tooltip="
                                        <div>
                                                <p>Server time:</p>
                                                <p>12.20.2018 - 08:30:34</p>
                                                <p>Unit time:</p>
                                                <p>12.20.2018 - 09:30:22</p>
                                            <p>NB Tag:</p>
                                            <p>WTUR.W</p>
                                            <p>Source:</p>
                                            <p>Turbin</p>
                                  
                                        </div>">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-6">
                            <h6>Generator rpm</h6>
                        </div>
                        <div class="col-6">
                            <h6>Rotor rpm</h6>
                        </div>
                    </div>
                </div>
                <div class="frame">A graph made by cool developers</div>



                <div class="frame narrow">

                    <h3 style="padding-bottom:10px;">Gear temperatures</h3>


                    <div class="row">

                        <div class="col-4">
                            <h4>120˚</h4>
                        </div>
                        <div class="col-4">
                            <h4>20˚</h4>
                        </div>
                        <div class="col-4">
                            <h4>60˚</h4>
                        </div>

                    </div>

                    <div class="row">

                        <div class="col-4">
                            <h6>Oil</h6>
                        </div>
                        <div class="col-4">
                            <h6>Bearing</h6>
                        </div>
                        <div class="col-4">
                            <h6>Main shaft</h6>
                        </div>

                    </div>

                </div>

                <div class="frame wide">

                    <h3 style="padding-bottom:10px;">Generator temperatures</h3>


                    <div class="row">
                        <div class="col-2">
                            <h4>120˚</h4>
                        </div>
                        <div class="col-2">
                            <h4>120˚</h4>
                        </div>
                        <div class="col-2">
                            <h4>120˚</h4>
                        </div>
                        <div class="col-2">
                            <h4>120˚</h4>
                        </div>
                        <div class="col-2">
                            <h4>22˚</h4>
                        </div>


                    </div>

                    <div class="row">
                        <div class="col-2">
                            <h6>Generator 1</h6>
                        </div>
                        <div class="col-2">
                            <h6>Generator 2</h6>
                        </div>
                        <div class="col-2">
                            <h6>Generator 1 bearing</h6>
                        </div>
                        <div class="col-2">
                            <h6>Generator 2 bearing</h6>
                        </div>
                        <div class="col-2">
                            <h6>Inlet</h6>
                        </div>

                    </div>

                </div>




                <div class="frame narrow">

                    <h3 style="padding-bottom:10px;">Unit temperatures</h3>


                    <div class="row">


                        <div class="col-6">
                            <h4>20˚</h4>
                        </div>

                    </div>

                    <div class="row">


                        <div class="col-6">
                            <h6>Nacelle</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="counters">
            <div class="gridwrapper">
                <div class="frame  half notlr">
                    <h3>Production</h3>
                    <div class="counters">
                        <div>
                            <h4 class="periodheader"><span>Total</span></h4>
                            <h4>691.000 <span>kWh</span></h4>
                        </div>
                        <div>
                            <h4 class="periodheader"><span>This year</span></h4>
                            <h4>39.500 <span>kWh</span></h4>
                        </div>
                        <div>
                            <h4 class="periodheader"><span>This month</span></h4>
                            <h4>691 <span>kWh</span></h4>
                        </div>
                    </div>
                </div>
                <div class="frame half">
                    <h3>Environment not ok</h3>
                    <div class="counters">
                        <div>
                            <h4 class="periodheader"><span>Total</span></h4>
                            <h4 class="timeunit">10<span>min.</span></h4>
                            <h4 class="timeunit">55<span>sec.</span></h4>
                        </div>
                        <div>
                            <h4 class="periodheader"><span>This year</span></h4>
                            <h4 class="timeunit">10<span>min.</span></h4>
                            <h4 class="timeunit">55<span>sec.</span></h4>
                        </div>
                        <div>
                            <h4 class="periodheader"><span>This month</span></h4>
                            <h4 class="timeunit">10<span>min.</span></h4>
                            <h4 class="timeunit">55<span>sec.</span></h4>
                        </div>
                    </div>
                </div>

                <div class="frame half">

                    <h3>Grid not ok</h3>

                    <div class="counters">
                        <div>
                            <h4 class="periodheader"><span>Total</span></h4>
                            <h4 class="timeunit">20<span>min.</span></h4>
                            <h4 class="timeunit">55<span>sec.</span></h4>
                        </div>
                        <div>
                            <h4 class="periodheader"><span>This year</span></h4>
                            <h4 class="timeunit">20<span>min.</span></h4>
                            <h4 class="timeunit">55<span>sec.</span></h4>
                        </div>
                        <div>
                            <h4 class="periodheader"><span>This month</span></h4>
                            <h4 class="timeunit">20<span>min.</span></h4>
                            <h4 class="timeunit">55<span>sec.</span></h4>
                        </div>
                    </div>
                </div>

                <div class="frame full">

                    <h3>Remote stopped</h3>

                    <div class="counters">
                        <div>
                            <h4 class="periodheader"><span>Total</span></h4>
                            <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>
                            <h4 class="periodheader"><span>This year</span></h4>
                            <h4 class="timeunit">3<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>
                            <h4 class="periodheader"><span>This month</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>
                </div>

                <div class="frame half">

                    <h3>Unit not ok</h3>

                    <div class="counters">
                        <div>
                            <h4 class="periodheader"><span>Total</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>
                            <h4 class="periodheader"><span>This year</span></h4>

                            <h4 class="timeunit">55<span>min.</span></h4>
                            <h4 class="timeunit">44<span>sec.</span></h4>
                        </div>
                        <div>
                            <h4 class="periodheader"><span>This month</span></h4>
                            <h4 class="timeunit">55<span>min.</span></h4>
                            <h4 class="timeunit">44<span>sec.</span></h4>
                        </div>
                    </div>
                </div>

                <div class="frame half">

                    <h3>Stopped for service</h3>

                    <div class="counters">
                        <div>
                            <h4 class="periodheader"><span>Total</span></h4>
                            <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>
                            <h4 class="periodheader"><span>This year</span></h4>
                            <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>
                            <h4 class="periodheader"><span>This month</span></h4>
                            <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>
            <button class="btn" id="flowrow">Toggle flow</button>

        </div>

        <div role="tabpanel" class="tab-pane" id="events">
            <div class="gridwrapper">
                <div class="frame full notlr" style="max-height:none;">
                    <h3>Events last 24 hours</h3>
                    <table class="itemtable">
                        <thead>
                            <tr>
                                <th class="noinput">
                                    <a href="javascript:void(0);" class="dropdown-toggle filterdrop"
                                        data-toggle="dropdown" role="button">
                                        <i class="icon icon-filter disabled"></i> Status</a>
                                    <div class="dropdown-menu  dropdown-menu">
                                        <table class="statusfilter">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox">
                                                    </td>
                                                    <td>
                                                        <img src="/app/core/images/redalert.svg">Alarms</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox">
                                                    </td>
                                                    <td>
                                                        <img src="/app/core/images/warningtriangle.svg">Warnings</td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        <input type="checkbox">
                                                    </td>
                                                    <td>
                                                        <img src="/app/core/images/service.svg">Service</td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        <input type="checkbox">
                                                    </td>
                                                    <td>
                                                        <img src="/app/core/images/communication.svg">Communication</td>
                                                </tr>

                                                <tr>
                                                    <td colspan="2">
                                                        <button class="btn">OK</button>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th>
                                    <div class="material-input">
                                        <input required="">
                                        <label>ID</label>
                                        <i class="icon icon-filter disabled"></i>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th class="noinput">
                                    <a href="javascript:void(0);" class="dropdown-toggle filterdrop"
                                        data-toggle="dropdown" role="button">
                                        <i class="icon icon-filter disabled"></i>Alarm started
                                    </a>
                                    <div class="dropdown-menu dropdown-menu datefilter">
                                        <div class="header">
                                            <input type="text" placeholder="Filter">
                                        </div>
                                        <div class="range">
                                            <p>Today</p>
                                            <p>Yesterday</p>
                                            <p>Last week</p>
                                        </div>
                                        <section class="calendartable">
                                            <p>Specific date:</p>
                                            <table class="tableheader">
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <img src="/app/core/images/previous.svg">
                                                        </td>
                                                        <td>
                                                            <h2 class="title">May 2018</h2>
                                                        </td>
                                                        <td class="text-right">
                                                            <img src="/app/core/images/next.svg">
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <table>
                                                <thead>
                                                    <tr>
                                                        <th>S</th>
                                                        <th>M</th>
                                                        <th>T</th>
                                                        <th>W</th>
                                                        <th>T</th>
                                                        <th>F</th>
                                                        <th>S</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="notthismonth">25</td>
                                                        <td class="notthismonth">26</td>
                                                        <td class="notthismonth">27</td>
                                                        <td class="notthismonth">28</td>
                                                        <td class="notthismonth">29</td>
                                                        <td class="notthismonth">30</td>
                                                        <td>1</td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>3</td>
                                                        <td>4</td>
                                                        <td>5</td>
                                                        <td>6</td>
                                                        <td>7</td>
                                                        <td>8</td>
                                                    </tr>
                                                    <tr>
                                                        <td>9</td>
                                                        <td>10</td>
                                                        <td>11</td>
                                                        <td>12</td>
                                                        <td>13</td>
                                                        <td>14</td>
                                                        <td>15</td>
                                                    </tr>
                                                    <tr>
                                                        <td>16</td>
                                                        <td>17</td>
                                                        <td>18</td>
                                                        <td>19</td>
                                                        <td>20</td>
                                                        <td>21</td>
                                                        <td>22</td>
                                                    </tr>
                                                    <tr>
                                                        <td>23</td>
                                                        <td>24</td>
                                                        <td>25</td>
                                                        <td>26</td>
                                                        <td class="today">27</td>
                                                        <td>28</td>
                                                        <td>29</td>
                                                    </tr>
                                                    <tr>
                                                        <td>30</td>
                                                        <td>31</td>
                                                        <td class="notthismonth">1</td>
                                                        <td class="notthismonth">2</td>
                                                        <td class="notthismonth">3</td>
                                                        <td class="notthismonth">4</td>
                                                        <td class="notthismonth">5</td>
                                                    </tr>

                                                </tbody>
                                            </table>
                                        </section>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th>
                                    <div class="material-input" data-toggle="tooltip" data-placement="right" title=""
                                        data-original-title="Eg. >10 or <5. Number is hours">
                                        <input required="">
                                        <label>Age</label>
                                        <i class="icon icon-filter disabled"></i>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th>
                                    <div class="material-input">
                                        <input required="">
                                        <label>Description</label>
                                        <i class="icon icon-filter disabled"></i>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th class="noinput text-center" colspan="2">
                                    <span>Info</span>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="datarow">


                                <td class="text-center">
                                    <ul class="alarmicons">
                                        <li>
                                            <a href="javascript:void(0);" data-toggle="modal"
                                                data-target="#exampleModal">
                                                <span class="icon-stack">
                                                    <i class="icon-tri_bg"></i>
                                                    <i class="icon-alert color-alert"></i>

                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </td>
                                <td>22336</td>
                                <td>18.05.2018</td>
                                <td>16 minutes</td>
                                <td>Bacon ipsum dolor amet capicola ball tip turducken biltong shank, ham alcatra...
                                </td>
                                <td class="text-right">

                                    <span class="icon-stack" data-toggle="modal" data-target="#editAlarmModal"
                                        style="vertical-align:top;">
                                        <i class=" icon-square_bg"></i>
                                        <i class=" icon-check-square color-ok"></i>
                                    </span>
                                </td>
                                <td class="text-right">


                                    <i class="icon icon-notes" data-toggle="modal" data-target="#editAlarmModal"
                                        style="vertical-align:top;"></i>
                                </td>
                            </tr>
                            <tr class="datarow">


                                <td class="text-center">
                                    <ul class="alarmicons">
                                        <li>
                                            <a href="javascript:void(0);" data-toggle="modal"
                                                data-target="#exampleModal">
                                                <span class="icon-stack">
                                                    <i class="icon-tri_bg"></i>
                                                    <i class="icon-alert color-alert"></i>
                                                    <i class="icon-plusvirtual"></i>

                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </td>
                                <td>20223</td>
                                <td>16.05.2018</td>
                                <td>4 hours</td>
                                <td>Bacon ipsum dolor amet capicola ball tip turducken biltong shank, ham alcatra...
                                </td>
                                <td class="text-right">
                                    <i class="icon icon-check" data-toggle="modal" data-target="#exampleModal"></i>
                                </td>
                                <td></td>
                            </tr>


                            <tr class="datarow">

                                <td class="text-center">
                                    <ul class="alarmicons">
                                        <li>
                                            <a href="javascript:void(0);" data-toggle="modal"
                                                data-target="#exampleModal">
                                                <span class="icon-stack">
                                                    <i class="icon-service color-service"></i>
                                                    <i class="icon-plusvirtual"></i>

                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </td>
                                <td>102236</td>
                                <td>12.05.2018</td>
                                <td>3 days</td>
                                <td>Bacon ipsum dolor amet capicola ball tip turducken biltong shank, ham alcatra...
                                </td>
                                <td class="text-right">

                                    <span class="icon-stack" data-toggle="modal" data-target="#editAlarmModal"
                                        style="vertical-align:top;">
                                        <i class=" icon-square_bg"></i>
                                        <i class=" icon-check-square color-ok"></i>
                                    </span>
                                </td>
                                <td class="text-right">


                                    <i class="icon icon-notes" data-toggle="modal" data-target="#editAlarmModal"
                                        style="vertical-align:top;"></i>
                                </td>
                            </tr>

                        </tbody>
                    </table>

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


        <div role="tabpanel" class="tab-pane" id="service">
            <div class="gridwrapper">
                <div class="frame full notlr" style="max-height:none;">
                    <h3>Operation <i class="icon-start active"></i> <i class="icon-stop"></i> <i class="icon-reset"></i></h3>
                    <p class="status">Current status: <span>Running</span></p>

                </div>
                <div class="frame narrow" style="max-height:none;">
                    <h3>Yaw System</h3>
                    <p class="status">Current status: <span>Automatic</span></p>
                    <div class="row">
                        <div class="col-12">
                            <h4>119˚</h4>
                            <h6>Nacelle Direction</h6>
                        </div>
                    </div>
                    <button class="btn active" >Yaw automatic</button>
                    <button class="btn">Yaw manual</button>

<p>(if Yaw manual clicked show:)</p>
<div id="manyaw">
        <button class="btn manyaw">Yaw left</button>


        <button class="btn manyaw">Yaw stop</button>


        <button class="btn manyaw last">Yaw right</button>
    </div>



                </div>

                <div class="frame narrow" style="max-height:none;">
                    <h3>Pitch System</h3>
                    <p class="status">Current status: <span>Manual 78&deg;</span></p>
                    <div class="row">
                        <div class="col-12">
                            <h4>&nbsp;</h4>
                            <h6>&nbsp;</h6>
                        </div>
                    </div>
                    <button class="btn">Pitch automatic</button>
                    <button class="btn">Pitch plus</button>
                    <button class="btn">Pitch minus</button>
                    <button class="btn active">Manual pitch: <input type="text" value="78" />&deg;<input type="submit" value="Set" /></button>

                </div>
                <div class="frame narrow" style="max-height:none;">
                    <h3>Blade angle</h3>
                    <p class="status">Current status: <span>Individually set</span></p>
                    <div class="row">
                        <div class="col-4">
                            <h4>73˚</h4>
                            <h6>Blade 1</h6>
                        </div>
                        <div class="col-4">
                            <h4>70˚</h4>
                            <h6>Blade 2</h6>
                        </div>
                        <div class="col-4">
                            <h4>72˚</h4>
                            <h6>Blade 3</h6>
                        </div>
                    </div>
                    <button class="btn active">Blade 1: <input type="text" value="73" />&deg;<input type="submit" value="Set" /></button>
                    <button class="btn active">Blade 2: <input type="text" value="70" />&deg;<input type="submit" value="Set" /></button>
                    <button class="btn active">Blade 3: <input type="text" value="72" />&deg;<input type="submit" value="Set" /></button>
                    <button class="btn">All blades: </span><input type="text" value="" />&deg;<input type="submit" value="Set" /></button>

                </div>
                <div class="frame narrow" style="max-height:none;">
                    <h3>Battery Test</h3>
                    <p class="status">Current status: <span class="servicealert">Battery needs testing</span></p>
                    <p class="status">Battery test time remaining: <span>2d 7h 33m</span></p><br>
                    <button class="btn">Test battery now</button>

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