<div id="tablewrapper">
    <!-- @import "/app/loader/components/loader.html" -->
    <div class="hiddenwhileloading" style="display:none;">
        <table class="itemtable">
            <thead>
                <tr>
                    <th id="titletd">
                        <div class="material-input">

                            <input class="unitsearch" required>

                            <label>Unit</label>
                            <i class="icon icon-search"></i>
                        </div>
                        <div class="sort-arrows">
                            <div class="arrow-up active"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>

 
                    <th class="text-center 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>
                                        <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>

                        <div class="sort-arrows">
                            <div class="arrow-up"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th>
                        <div class="material-input">

                            <input required>

                            <label>Displacement now</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>Min displacement
                                    last 10 minutes</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></th>
                    <th>
                        <div class="material-input">

                            <input required>

                            <label>Max displacement
                                    last 10 minutes</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="datarow">
                    <td>
                        <img src="/app/core/images/turbine.svg" class="uniticon">
                        <a href="#">TB01</a>
                    </td>

                    <td class="text-center">
                        <ul class="alarmicons cursor-clear">
                       
                            <li>
                                <span class="icon-stack">
                                    <i class="icon-tri_bg"></i>

                                    <i class="icon-warning color-warning" style="font-size:16px;"></i>
                                </span>
                            </li>
                         
                          
                        </ul>
                    </td>
                    <td class="text-center">-1.10 mm</td>
                    <td class="text-center">-0.56 mm</td>
                    <td>to</td>
                    <td class="text-center">-1.10 mm</td>
                   
                </tr>

                <tr class="datarow">
                    <td>
                        <img src="/app/core/images/turbine.svg" class="uniticon">
                        <a href="#">TB01</a>
                    </td>

                    <td class="text-center">
                        <ul class="alarmicons">
                                <li>
                                        <span class="icon-stack">
                                            <i class="icon-tri_bg"></i>
        
                                            <i class="icon-warning color-warning" style="font-size:16px;"></i>
                                        </span>
                                    </li>
                                 
                        </ul>
                    </td>
                    <td class="text-center">-2.50 mm</td>
                    <td class="text-center color-warning">-5.40 mm</td>
                    <td>to</td>
                    <td class="text-center">1.10 mm</td>


                </tr>

                <tr class="datarow">
                    <td>
                        <img src="/app/core/images/turbine.svg" class="uniticon">
                        <a href="#">TB01</a>
                    </td>

                    <td class="text-center">
                        <ul class="alarmicons">
                         


                                    <span class="icon-stack">
                                            <i class="icon-cirk_bg" style="font-size:16px; transform: matrix(0.7, 0, 0, 0.7, 0, -5);"></i>
                                            <i class="icon-ok-circle color-ok" style="font-size:16px;"></i>
                                          </span>


                        </ul>
                    </td>
                    <td class="text-center">-1.10 mm</td>
                    <td class="text-center">-0.56 mm</td>
                    <td>to</td>
                    <td class="text-center">-1.10 mm</td>

                </tr>
            </tbody>
        </table>
    </div>
</div>