

<div id="tablewrapper">

    <!-- @import "/app/loader/components/loader.html" -->

    <div class="hiddenwhileloading" style="display:none;">

        <table class="itemtable" id="Denmark">
            <thead>
                <tr>
                    <th id="titletd">
                        <div class="material-input">

                            <input class="unitsearch" required>

                            <label>Unit</label>
                            <i class="icon icon-search"></i>
                            <error>You cant do that</error>

                        </div>
                        <div class="sort-arrows">
                            <div class="arrow-up active"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th id="actiontd" class="noinput">Action</th>
                    <th>

                        <div class="material-input">

                            <input required>

                            <label>Power</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>Wind speed</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>Wind Direction</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> Status</a>

                        <div class="dropdown-menu  dropdown-menu">
                            <table class="statusfilter">
 <tr>
                                    <td>
                                         <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-161" type="checkbox" value="value1">
                                            <label for="styled-checkbox-161"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="icon-stack">
                                            <i class="icon-cirk_bg"></i>
                                            <i class="icon-ok-circle color-ok"></i>
                                        </span>
                                        <span>Alarms</span>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                         <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-161" type="checkbox" value="value1">
                                            <label for="styled-checkbox-161"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="icon-stack">
                                            <i class="icon-tri_bg"></i>
                                            <i class="icon-alert color-alert"></i>
                                        </span>
                                        <span>Alarms</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
<div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-162" type="checkbox" value="value1">
                                            <label for="styled-checkbox-162"></label>
                                        </div>                                    </td>
                                    <td>
                                        <span class="icon-stack">
                                            <i class="icon-tri_bg"></i>
                                            <i class="icon-warning color-warning"></i>
                                        </span>
                                        <span>Warnings</span>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
<div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-163" type="checkbox" value="value1">
                                            <label for="styled-checkbox-163"></label>
                                        </div>                                    </td>
                                    <td>
                                     <span class="icon-stack">
                                        <i class="icon-service color-service"></i></span>
                                        <span>Service</span></td>
                                </tr>

                                <tr>
                                    <td>
<div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-164" type="checkbox" value="value1">
                                            <label for="styled-checkbox-164"></label>
                                        </div>                                    </td>
                                    <td><span class="icon-stack">
                                        <i class="icon-radio color-comm"></i></span>
                                        <span>Communication</span></td>
                                </tr>



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

                            </table>


                        </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> Date

                        </a>
                        <div class="dropdown-menu dropdown-menu datefilter">

                            <div class="header">
                                <input type="text" placeholder="Enter 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">
                                    <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>
                                </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>
                        </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>Energy Factor</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>Budget</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>Availability</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>

                </tr>
            </thead>
            <tbody>
                <tr class="location">
                    <td>

                        <h1>Denmark</h1>
                    </td>
                    <td class="text-right">
                        <h1>
                            <i class="icon icon-stop"></i>
                            <i class="icon icon-start" style="margin-right:7px;"></i>
                        </h1>
                    </td>
                    <td colspan="99"></td>
                </tr>


                <tr class="datarow">

                    <td>
                        <i class="uniticon icon icon-turbine"></i>
                        <a href="#">TB01</a>
                    </td>
                    <td>

                        <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                        <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                        <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                        <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                        <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div class="dropdown-menu">
                            <p class="drillmenuheader">TB01</p>
                                <i class="icon icon-details detailbtn"> Unit Details</i>
                                <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                <div class="dropdown-divider"></div>
                                <i class="icon icon-start detailbtn">
                                    <span class="disabled">Start Unit</span>
                                </i>
                                <i class="icon icon-stop detailbtn">
                                    <span>Stop Unit</span>
                                </i>
                                <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                <i class="icon icon-createticket"> Create Ticket</i>


                                <i class="icon icon-setpoint"> Setpoint <span>(1500 kW)</span> <img src="/app/core/images/loader_small.gif">
                               
                                
                                </i>
                                <div class="setpoint" style="display:block; padding: 10px 15px; margin: 0px;"><div class="material-input"><input type="text" placeholder="1500"></div><span>kW</span><button class="btn">Set</button></div>

                                </a>
                            </div>
                        </i>
                    </td>
                    <td class="bar">
                        <div class="barbg">
                            <div class="bardisplay" style="width:75%;"></div>
                            <div class="barvalue">22,000 kW</div>
                        </div>
                    </td>
                    <td class="bar"> 
                        <div class="barbg">
                            <div class="bardisplay bg-blue" style="width:15%;"></div>
                            <div class="barvalue">5 m/s</div>
                        </div>

                    </td>
                    <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                        <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                    </td>
                    <td class="text-center status">
                        <span class="icon-stack">
                            <i class="icon-tri_bg"></i>
                            <i class="icon-alert color-alert"></i>
                        </span>
                    </td>
                    <td class="date">Yesterday</td>
                    <td class="bar">
                        <div class="barbg">
                            <div class="bardisplay bg-neutral" style="width:75%;"></div>
                            <div class="barvalue">75%</div>
                        </div>
                    </td>

                    <td class="bar">
                        <div class="barbg">
                            <div class="bardisplay bg-neutral" style="width:12%;"></div>
                            <div class="barvalue">12%</div>
                        </div>
                    </td>
                    <td class="bar">
                        <div class="barbg">
                            <div class="bardisplay bg-neutral" style="width:50%;"></div>
                            <div class="barvalue">50%</div>
                        </div>
                    </td>


                    <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-tri_bg"></i>
                                <i class="icon-warning color-warning"></i>
                            </span>
                        </td>
                        <td class="date">3 days ago</td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>

                    </tr>

                    <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <img src="/app/core/images/communication.svg">
                        </td>
                        <td class="date">7. May 2018</td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>

                    </tr>

                    <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <img src="/app/core/images/service.svg">
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>

                    </tr>



                    <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>                    
                    <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>          <tr class="datarow">
                        <td>
                            <i class="uniticon icon icon-turbine"></i>
                            <a href="#">TB01</a>
                        </td>
                        <td>
                            <i class="icon icon-details detailbtn" data-toggle="tooltip" data-original-title="Unit details"></i>
                            <i class="icon icon-onlinedata detailbtn" data-toggle="tooltip" data-original-title="Online data"></i>
                            <i class="icon icon-historicaldata detailbtn" data-toggle="tooltip" data-original-title="Historical data"></i>
                            <i class="icon icon-alarms detailbtn" data-toggle="tooltip" data-original-title="Alarms"></i>
                            <i class="icon icon-dots dropdown-toggle dropright drill-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="dropdown-menu">
                                    <i class="icon icon-details detailbtn"> Unit Details</i>
                                    <i class="icon icon-onlinedata detailbtn"> Live Data</i>
                                    <i class="icon icon-historicaldata detailbtn"> Historical Data</i>
                                    <i class="icon icon-alarms detailbtn"> Alarms & Events</i>
                                    <i class="icon icon-powercurve detailbtn"> Power Curves</i>
                                    <i class="icon icon-windrose detailbtn"> Wind Rose</i>
                                    <div class="dropdown-divider"></div>
                                    <i class="icon icon-start detailbtn">
                                        <span class="disabled">Start Unit</span>
                                    </i>
                                    <i class="icon icon-stop detailbtn">
                                        <span>Stop Unit</span>
                                    </i>
                                    <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                    <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                    <i class="icon icon-createticket"> Create Ticket</i>
                                    </a>
                                </div>
                            </i>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay" style="width:75%;"></div>
                                <div class="barvalue">22,000 kW</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-blue" style="width:15%;"></div>
                                <div class="barvalue">5 m/s</div>
                            </div>

                        </td>
                        <td class="text-center windDir">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center status">
                            <span class="icon-stack">
                                <i class="icon-cirk_bg"></i>
                                <i class="icon-ok-circle color-ok"></i>
                            </span>
                        </td>
                        <td class="date">7. May 2018</td>

                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:75%;"></div>
                                <div class="barvalue">75%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:12%;"></div>
                                <div class="barvalue">12%</div>
                            </div>
                        </td>
                        <td class="bar">
                            <div class="barbg">
                                <div class="bardisplay bg-neutral" style="width:50%;"></div>
                                <div class="barvalue">50%</div>
                            </div>
                        </td>
                    </tr>   
            </tbody>
        </table>
    </div>
</div>

<div class="triggedloader loader--style1" title="0">
    <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="100px" height="100px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
        <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
          s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
        />
        <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
          C22.32,8.481,24.301,9.057,26.013,10.047z">
            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"
            />
        </path>
    </svg>
</div>


<script>
$( "#trigger").click(function() {
  //$(".bar, .windDir, .status, .date" ).addClass( "isLoading");
  $(".bar, .windDir, .status, .date" ).fadeTo("slow", 0.25);
  $( ".triggedloader" ).toggle( "fast").delay( 3000 ).toggle( "fast");
  setTimeout( function(){ 
    $(".bar, .windDir, .status, .date" ).fadeTo("slow", 1);
  }  , 3000 );
});
</script>