
    <div id="filterbuttons">
        <button class="btn alarm">Alarms</button>
        <button class="btn warning">Warnings</button>
        <button class="btn operations">Operations</button>
        <button class="btn virtual">Virtual</button>
        <button class="btn communication">No communication</button>
        <button class="btn service">Service</button>
        <button class="btn predictor">Predictor</button>
        <button class="btn ticket">Tickets</button>
    </div>

    <div id="tablewrapper">
    <!-- @import "/app/loader/components/loader.html" -->

    <div class="hiddenwhileloading" style="display:none;">
        <div class="parksection">
            <h1>Denmark<i class="icon icon-stop" style="margin-left:30px;"></i><i class="icon icon-start"></i></h1>
        </div>
        <table class="itemtable" id="Denmark">
            <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="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>
                <th>

                    <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>
                    <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 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>
                    <span>Date</span>
                    <div class="sort-arrows">
                        <div class="arrow-up"></div>
                        <div class="arrow-down"></div>
                    </div>
                </th>

                <th>
                    <input placeholder="Energy Factor">
                    <div class="sort-arrows">
                        <div class="arrow-up"></div>
                        <div class="arrow-down"></div>
                    </div>
                </th>
                <th>
                    <input placeholder="Budget">
                    <div class="sort-arrows">
                        <div class="arrow-up"></div>
                        <div class="arrow-down"></div>
                    </div>
                </th>
                <th>
                    <input placeholder="Availability">
                    <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="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">22&deg;&nbsp;&nbsp;
                        <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                    </td>
                    <td class="text-center">
                        <img src="/app/core/images/redalert.svg">
                    </td>
                    <td>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>
                            <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="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">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center">
                            <img src="/app/core/images/warningtriangle.svg">
                        </td>
                        <td>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>
                            <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="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">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center">
                            <img src="/app/core/images/communication.svg">
                        </td>
                        <td>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>
                            <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="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">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center">
                            <img src="/app/core/images/service.svg">
                        </td>
                        <td>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>
                            <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="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">22&deg;&nbsp;&nbsp;
                            <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                        </td>
                        <td class="text-center">
                            <img src="/app/core/images/status_ok.svg">
                        </td>
                        <td>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 class="parksection">
            <h1>Sweden<i class="icon icon-stop" style="margin-left:30px;"></i><i class="icon icon-start"></i></h1>

    </div>
    <table class="itemtable">
        <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="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>
            <th>

                <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>
                <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 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>
                <span>Date</span>
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>

            <th>
                <input placeholder="Energy Factor">
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>
            <th>
                <input placeholder="Budget">
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>
            <th>
                <input placeholder="Availability">
                <div class="sort-arrows">
                    <div class="arrow-up"></div>
                    <div class="arrow-down"></div>
                </div>
            </th>

        </tr>
        <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="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">22&deg;&nbsp;&nbsp;
                    <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                </td>
                <td class="text-center">
                    <img src="/app/core/images/redalert.svg">
                </td>
                <td>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>


            <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="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">22&deg;&nbsp;&nbsp;
                    <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                </td>
                <td class="text-center">
                    <img src="/app/core/images/warningtriangle.svg">
                </td>
                <td>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>
                    <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="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">22&deg;&nbsp;&nbsp;
                    <img src="/app/core/images/winddirection.svg" class="windarrow" style="transform: rotate(305deg)" />
                </td>
                <td class="text-center">
                    <img src="/app/core/images/communication.svg">
                </td>
                <td>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="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>

