<div id="filterbuttons">
    <button class="btn alarm">Alarms</button>
    <button class="btn warning">Warnings</button>
    <button class="btn communication">No communication</button>
    <button class="btn ticket">Tickets</button>
</div>

<div id="tablewrapper">
    <!-- @import "/app/loader/components/loader.html" -->
    <div class="hiddenwhileloading" style="display:none;">
        <table class="itemtable">
            <thead>
                <tr>
                    <th id="titletd">
                        <input placeholder="Unit">
                        <div class="sort-arrows">
                            <div class="arrow-up active"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th id="actiontd">Action</th>
                    <th>
                        <input placeholder="Turbines">
                        <div class="sort-arrows">
                            <div class="arrow-up"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th class="text-center">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
                                    <img src="/app/core/images/filter.svg" class="filter">
                                </a>
            
                                <div class="dropdown-menu  dropdown-menu">
                                    <table class="statusfilter">
                                        <tr>
                                            <td>
                                                <input type="checkbox">
                                            </td>
                                            <td>
                                                <img src="/app/core/images/redalert.svg">Alarms</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="checkbox">
                                            </td>
                                            <td>
                                                <img src="/app/core/images/warningtriangle.svg">Warnings</td>
                                        </tr>
            
                                        <tr>
                                            <td>
                                                <input type="checkbox">
                                            </td>
                                            <td>
                                                <img src="/app/core/images/service.svg">Service</td>
                                        </tr>
            
                                        <tr>
                                            <td>
                                                <input type="checkbox">
                                            </td>
                                            <td>
                                                <img src="/app/core/images/communication.svg">Communication</td>
                                        </tr>
            
                                        <tr>
                                            <td colspan="2">
                                                <button class="btn">OK</button>
                                            </td>
                                        </tr>
            
                                    </table>
            
            
                                </div>
            
                                <span>Status</span>
                                <div class="sort-arrows">
                                    <div class="arrow-up"></div>
                                    <div class="arrow-down"></div>
                                </div>
                    </th>
                    <th class="text-center">
                        
                        <input placeholder="Total alarms">
                        <div class="sort-arrows">
                            <div class="arrow-up"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th class="text-center">
                        <input placeholder="Total warnings">
                        <div class="sort-arrows">
                            <div class="arrow-up"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th class="text-center">
                        
                        <input placeholder="Tickets">
                        <div class="sort-arrows">
                            <div class="arrow-up"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th>
                        <input placeholder="Power">
                        <div class="sort-arrows">
                            <div class="arrow-up"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th>
                        <input placeholder="Wind speed">
                        <div class="sort-arrows">
                            <div class="arrow-up"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th>
                        <input placeholder="Wind Direction">
                        <div class="sort-arrows">
                            <div class="arrow-up"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="datarow">
                    <td>
                        <img src="/app/core/images/turbine.svg" class="uniticon">
                        <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"> Start Unit</i>
                                <i class="icon icon-stop detailbtn"> Stop Unit</i>
                                <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                <i class="icon icon-createticket detailbtn"> Create Ticket</i>
                            </div>
                        </i>
                    </td>
                    <td class="text-center">10</td>
                    <td>
                        <ul class="alarmicons">
                            <li>
                                <a href="javascript:void(0);">
                                    <span class="icon-stack">
                                        <i class="icon-tri_bg"></i>
                                        <i class="icon-alert color-alert"></i>
                                    </span>
                                    <span class="label-count">5</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span class="icon-stack">
                                        <i class="icon-tri_bg"></i>

                                        <i class="icon-warning color-warning" style="font-size:16px;"></i>
                                    </span>
                                    <span class="label-count">5</span>
                                </a>
                            </li>
                            <li>

                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <i class="icon-radio color-comm" style="font-size:16px;"></i>
                                    <span class="label-count">5</span>
                                </a>
                            </li>
                        </ul>
                    </td>
                    <td class="text-center">10</td>
                    <td class="text-center">10</td>
                    <td class="text-center">10</td>
                    <td class="bar">
                        <div class="barbg">
                            <div class="bardisplay bg-power" style="width:85%;"></div>
                            <div class="barvalue">22,900 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">22&deg;&nbsp;&nbsp;
                        <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                    </td>
                </tr>

                <tr class="datarow">
                    <td>
                        <img src="/app/core/images/turbine.svg" class="uniticon">
                        <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"> Start Unit</i>
                                <i class="icon icon-stop detailbtn"> Stop Unit</i>
                                <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                <i class="icon icon-createticket detailbtn"> Create Ticket</i>
                            </div>
                        </i>
                    </td>
                    <td class="text-center">10</td>
                    <td>
                        <ul class="alarmicons">
                            <li>
                                <a href="javascript:void(0);">
                                    <span class="icon-stack">
                                        <i class="icon-tri_bg"></i>
                                        <i class="icon-alert color-alert"></i>
                                    </span>
                                    <span class="label-count">5</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span class="icon-stack">
                                        <i class="icon-tri_bg"></i>

                                        <i class="icon-warning color-warning" style="font-size:16px;"></i>
                                    </span>
                                    <span class="label-count">5</span>
                                </a>
                            </li>
                            <li>
                            </li>
                            <li>

                            </li>
                        </ul>
                    </td>
                    <td class="text-center">10</td>
                    <td class="text-center">10</td>
                    <td class="text-center">10</td>
                    <td class="bar">
                        <div class="barbg">
                            <div class="bardisplay bg-power" style="width:85%;"></div>
                            <div class="barvalue">22,900 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">22&deg;&nbsp;&nbsp;
                        <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                    </td>
                </tr>

                <tr class="datarow">
                    <td>
                        <img src="/app/core/images/turbine.svg" class="uniticon">
                        <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"> Start Unit</i>
                                <i class="icon icon-stop detailbtn"> Stop Unit</i>
                                <i class="icon icon-reset detailbtn"> Reset Unit</i>
                                <i class="icon icon-remotedisplay detailbtn"> Remote Display</i>
                                <i class="icon icon-createticket detailbtn"> Create Ticket</i>
                            </div>
                        </i>
                    </td>
                    <td class="text-center">10</td>
                    <td>
                        <ul class="alarmicons">
                            <li>
                                <a href="javascript:void(0);">
                                    <span class="icon-stack">
                                        <i class="icon-tri_bg"></i>
                                        <i class="icon-alert color-alert"></i>
                                    </span>
                                    <span class="label-count">5</span>
                                </a>
                            </li>
                            <li>

                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <i class="icon-service color-service" style="font-size:16px;"></i>
                                    <span class="label-count">5</span>
                                </a>
                            </li>
                            <li>

                            </li>
                        </ul>
                    </td>
                    <td class="text-center">10</td>
                    <td class="text-center">10</td>
                    <td class="text-center">10</td>
                    <td class="bar">
                        <div class="barbg">
                            <div class="bardisplay bg-power" style="width:85%;"></div>
                            <div class="barvalue">22,900 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">22&deg;&nbsp;&nbsp;
                        <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="drillcontainer">
    <div class="row">
        <div class="col-12 text-right">
            <img class="icon" src="/app/core/images/export_white.svg">
            <img class="icon maximize" src="/app/core/images/max_white.svg">
            <a href="/app/monitor/pages/drilltable_detail.html" target="_blank">
                <img class="icon" src="/app/core/images/newwin_white.svg">
            </a>
            <img class="icon closeDetail" src="/app/core/images/close_white.svg">
        </div>
        <div class="col-12">
            <img src="http://via.placeholder.com/1920x700" style="width: 100%;">
        </div>
    </div>
</div>