<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 service">Service</button>
    <button class="btn ticket">Tickets</button>
    <button class="btn ticket">My 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">
                        <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 id="actiontd" class="text-center noinput">Action</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>
                                        <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>ID</label>
                            <i class="icon icon-filter disabled"></i>

                        </div>
                        <div class="sort-arrows">
                            <div class="arrow-up"></div>
                            <div class="arrow-down"></div>
                        </div>
                    </th>
                    <th class="noinput">
                        <a href="javascript:void(0);" class="dropdown-toggle filterdrop" data-toggle="dropdown" role="button">
                            <i class="icon icon-filter disabled"></i>Alarm started

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

                            <div class="header">
                                <input type="text" placeholder="Filter">
                            </div>
                            <div class="range">
                                <p>Today</p>
                                <p>Yesterday</p>
                                <p>Last week</p>
                            </div>
                            <section class="calendartable">
                                <p>Specific date:</p>
                                <table class="tableheader">
                                    <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 class="noinput">
                        <a href="javascript:void(0);" class="dropdown-toggle filterdrop" data-toggle="dropdown" role="button">
                            <i class="icon icon-filter disabled"></i>Duration
                        </a>
                        <div class="dropdown-menu dropdown-menu datefilter">

                            <div class="header">
                                <input type="text" placeholder="Enter query">
                            </div>


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




                    <th>

                        <div class="material-input">

                            <input required>

                            <label>Description</label>
                            <i class="icon icon-filter disabled"></i>

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

                    <th class="noinput">
                        Notes
                        <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">
                        <ul class="alarmicons">
                            <li>
                                <a href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">
                                    <span class="icon-stack">
                                        <i class="icon-tri_bg"></i>
                                        <i class="icon-alert color-alert"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </td>
                    <td>22336</td>

                    <td>18.05.2018</td>
                    <td>16 minutes</td>

                    <td>Bacon ipsum dolor amet capicola ball tip turducken biltong shank, ham alcatra...</td>
                    <td class="text-center">
                        <i class="icon icon-notes"></i> 10</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">
                        <ul class="alarmicons">
                            <li>
                                <a href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">
                                    <span class="icon-stack">
                                        <i class="icon-tri_bg"></i>
                                        <i class="icon-alert color-alert"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </td>
                    <td>20223</td>

                    <td>16.05.2018</td>
                    <td>4 hours</td>

                    <td>Bacon ipsum dolor amet capicola ball tip turducken biltong shank, ham alcatra...</td>
                    <td class="text-center">
                        <i class="icon icon-notes"></i> 10</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">
                        <ul class="alarmicons">
                            <li>
                                <a href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">
                                    <span class="icon-stack">
                                        <i class="icon-tri_bg"></i>
                                        <i class="icon-alert color-alert"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </td>
                    <td>102236</td>

                    <td>12.05.2018</td>
                    <td>3 days</td>

                    <td>Bacon ipsum dolor amet capicola ball tip turducken biltong shank, ham alcatra...</td>
                    <td class="text-center">
                        <i class="icon icon-notes"></i> 10</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>



<div class="modal  fade alarmmodal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width:1000px;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    <i class="icon icon-alert"></i> Alarm on unit: TB03</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">

                    <div class="row">
                        <div class="col-4 dark">
                            <table>
                                <tr>
                                    <td>Set time:</td>
                                    <td>12.05.2018 - 20:12</td>
                                </tr>
                                <tr>
                                    <td>Duration:</td>
                                    <td>4 hours</td>
                                </tr>
                                <tr>
                                    <td>Identifier:</td>
                                    <td>546541</td>
                                </tr>
                                <tr>
                                    <td>Status:</td>
                                    <td>none:</td>

                                </tr>
                                <tr>
                                    <td>Owner:</td>
                                    <td>-</td>

                                </tr>
                                <tr>
                                    <td>Time reset:</td>
                                    <td>-</td>

                                </tr>
                            </table>

                        </div>
                        
               
                        <div class="col-8 note">
                            <p>Note</p>
                            <textarea>Type here...</textarea>
                            <button type="button" class="btn" data-dismiss="modal">Save and close</button>


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

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