<!-- @import "/kitparts/head.html" -->


<!-- @import "/app/nav/components/nav.html" -->
<div class="container-fluid">
    <!-- @import "/app/settings/components/settings.html" -->
    <div class="row">
        <!-- @import "/app/breadcrumb/components/breadcrumb.html" -->
    </div>
    <div class="row">
        <div class="col-12">
            <div class="scadacard level1" id="reportwrapper">
                
                <div class="row contentrow">
                    <div class="col-3 reportsidebar">
                        <h3 style="margin-top:0px;">Global</h3>

                        <div class="checkboxwrapper">
                            <a href="#">
                                <i class="icon icon-plus"></i> Select all parks</a>
                        </div>
                        <div class="checkboxwrapper">
                            <a href="#">
                                <i class="icon icon-plus"></i> Select all units</a>
                        </div>
                        <div class="divider"></div>
                        <br/>
                        <h3>Parks</h3>
                        <ul class="nav nav-list nav-menu-list-style">
                            <li>
                                <div class="checkboxwrapper nav-header">
                                        <i class="icon icon-turbinepark"></i>18 characters park</label>
                                    <span class="tree-toggle">
                                        <i class="icon icon-down"></i>
                                    </span>
                                    <span class="selectall">Select all
                                        <i class="icon icon-plus"></i>
                                    </span>

                                </div>
                                <ul class="nav nav-list tree">
                                    <li>
                                        <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-160" type="checkbox" value="value1">
                                            <label for="styled-checkbox-160">
                                                <i class="icon icon-turbine"></i>18 characters unit</label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-161" type="checkbox" value="value1">
                                            <label for="styled-checkbox-161">
                                                <i class="icon icon-turbine"></i>TB02</label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-162" type="checkbox" value="value1">
                                            <label for="styled-checkbox-162">
                                                <i class="icon icon-turbine"></i>TB03</label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-163" type="checkbox" value="value1">
                                            <label for="styled-checkbox-163">
                                                <i class="icon icon-turbine"></i>TB04</label>
                                        </div>
                                    </li>
                                </ul>
                            </li>

                            <li class="divider"></li>

                            <li>
                                <div class="checkboxwrapper nav-header">
                                        <i class="icon icon-turbinepark"></i>GE Park
                                    <span class="tree-toggle">
                                        <i class="icon icon-down"></i>
                                    </span>
                                    <span class="selectall">Select all
                                        <i class="icon icon-plus"></i>
                                    </span>
                                </div>
                                <ul class="nav nav-list tree">
                                    <li>
                                        <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-1600" type="checkbox" value="value1">
                                            <label for="styled-checkbox-1600">
                                                <i class="icon icon-turbine"></i>TB01</label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-1601" type="checkbox" value="value1">
                                            <label for="styled-checkbox-1601">
                                                <i class="icon icon-turbine"></i>TB02</label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-1602" type="checkbox" value="value1">
                                            <label for="styled-checkbox-1602">
                                                <i class="icon icon-turbine"></i>TB03</label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="checkboxwrapper">
                                            <input class="styled-checkbox" id="styled-checkbox-1603" type="checkbox" value="value1">
                                            <label for="styled-checkbox-1603">
                                                <i class="icon icon-turbine"></i>TB04</label>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li class="divider"></li>
                        </ul>
                    </div>
                    <div class="col-9 reportcontent">

                            <div class="row" style="padding-bottom:20px;">
                   
                                    <div class="col-8">
                                        <div class="material-input">
                                            <input required style="width:450px;">
                                            <label>Notification title</label>
                                        </div>
                                    </div>
                                    <div class="col-4 text-right">
                                        <button class="btn">Cancel</button>
                                        <button class="btn">Save notification</button>
                                    </div>
                                </div>

                        <div class="row">
                            <div class="col-12">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#alarmtypes" role="tab" data-toggle="tab">Select alarm types</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#alarmrecipients" role="tab" data-toggle="tab">Recipients</a>
                                    </li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="alarmtypes">
                                        <div class="recipientwrapper">
                                            <h3>You have 4 selected alarm types</h3>
                                            <div id="selectednotificationwrapper">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter" style="width:auto; opacity:1;">Also send notification when event is reset.
                                                        <br>
                                                        <input type="checkbox"> Wait
                                                        <input type="text" style="width:50px; padding:0px 8px; margin:0 5px; display:inline;"> seconds before sending a notification.
                                                    </div>
                                                    <div class="col-6 text-right">
                                                        <p id="showallalarms">
                                                            <i class="icon icon-all"></i><span>Show all</span></p>
                                                    </div>
                                                </div>
                                                <table class="itemtable">
                                                    <thead>
                                                        <tr>
                                                            <th class="no-input">
                                                                Type
                                                                <div class="sort-arrows">
                                                                    <div class="arrow-up"></div>
                                                                    <div class="arrow-down"></div>
                                                                </div>
                                                            </th>
                                                            <th class="no-input text-center">
                                                                Number
                                                                <div class="sort-arrows">
                                                                    <div class="arrow-up"></div>
                                                                    <div class="arrow-down"></div>
                                                                </div>
                                                            </th>
                                                            <th class="no-input text-center">
                                                                Category
                                                                <div class="sort-arrows">
                                                                    <div class="arrow-up"></div>
                                                                    <div class="arrow-down"></div>
                                                                </div>
                                                            </th>
                                                            <th class="no-input text-center">
                                                                Reset Type
                                                                <div class="sort-arrows">
                                                                    <div class="arrow-up"></div>
                                                                    <div class="arrow-down"></div>
                                                                </div>
                                                            </th>
                                                            <th class="no-input text-center">
                                                                Severity
                                                                <div class="sort-arrows">
                                                                    <div class="arrow-up"></div>
                                                                    <div class="arrow-down"></div>
                                                                </div>
                                                            </th>
                                                            <th class="no-input text-center">
                                                                Remove

                                                            </th>
                                                            <th class="no-input text-right removeall">
                                                               <i class="icon icon-minus"></i> Remove all
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>

                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>

                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>

                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>

                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                    </tbody>
                                                </table>


                                            </div>

                                            <h3>Add alarm types to your notification</h3>

                                            <div id="notificationwrapper">
                                                <table class="itemtable">
                                                    <thead>
                                                        <tr>
                                                            <th>
                                                                <div class="material-input">
                                                                    <input required="">
                                                                    <label>Type</label>
                                                                    <i class="icon disabled icon-filter"></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>Number</label>
                                                                    <i class="icon disabled icon-filter"></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>Category</label>
                                                                    <i class="icon disabled icon-filter"></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>Reset type</label>
                                                                    <i class="icon disabled icon-filter"></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>Severity</label>
                                                                    <i class="icon disabled icon-filter"></i>
                                                                </div>
                                                                <div class="sort-arrows">
                                                                    <div class="arrow-up"></div>
                                                                    <div class="arrow-down"></div>
                                                                </div>
                                                            </th>
                                                            <th class="no-input no-sort text-center">
                                                                Add to selected

                                                            </th>
                                                            <th class="no-input no-sort  text-right addall">
                                                                <i class="icon icon-plus"></i> Add all
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>

                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>

                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>

                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>

                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                        <tr class="datarow">
                                                            <td>
                                                                <span class="icon-stack">
                                                                    <i class="icon-tri_bg"></i>
                                                                    <i class="icon-alert color-alert"></i>
                                                                </span>
                                                            </td>
                                                            <td class="text-center">5</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">-</td>
                                                            <td class="text-center">
                                                                <i class="icon icon-minus"></i>
                                                            </td>
                                                            <td></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>




                                        </div>



                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="alarmrecipients">
                                        <div class="recipientwrapper">

                                            <table class="itemtable">
                                                <thead>
                                                    <tr>
                                                        <th class="no-input">
                                                            <div class="material-input">

                                                                <input class="unitsearch" required="">

                                                                <label>Recipients</label>
                                                                <i class="icon icon-search"></i>

                                                            </div>
                                                        </th>
                                                        <th class="no-input text-center">
                                                            Recieve sms
                                                            <div class="sort-arrows">
                                                                <div class="arrow-up"></div>
                                                                <div class="arrow-down"></div>
                                                            </div>
                                                        </th>
                                                        <th class="no-input text-center">
                                                            Recieve email
                                                            <div class="sort-arrows">
                                                                <div class="arrow-up"></div>
                                                                <div class="arrow-down"></div>
                                                            </div>
                                                        </th>
                                                        <th class="no-input">
                                                            Phone
                                                            <div class="sort-arrows">
                                                                <div class="arrow-up"></div>
                                                                <div class="arrow-down"></div>
                                                            </div>
                                                        </th>
                                                        <th class="no-input">
                                                            Email
                                                            <div class="sort-arrows">
                                                                <div class="arrow-up"></div>
                                                                <div class="arrow-down"></div>
                                                            </div>
                                                        </th>

                                                    </tr>
                                                </thead>
                                                <tbody>

                                                    <tr class="datarow">
                                                        <td>Admin</td>
                                                        <td class="text-center">
                                                            <input type="checkbox" checked>
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="checkbox">
                                                        </td>
                                                        <td>+45 223965</td>
                                                        <td>mfr@scada-international.com</td>
                                                    </tr>
                                                    <tr class="datarow">
                                                        <td>Holger</td>
                                                        <td class="text-center">
                                                            <input type="checkbox" >
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="checkbox" checked>
                                                        </td>
                                                        <td>+45 223965</td>
                                                        <td>mfr@scada-international.com</td>
                                                    </tr>
                                                    <tr class="datarow">
                                                        <td>Admin</td>
                                                        <td class="text-center">
                                                            <input type="checkbox" checked>
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="checkbox">
                                                        </td>
                                                        <td>+45 223965</td>
                                                        <td>mfr@scada-international.com</td>
                                                    </tr>
                                                    <tr class="datarow">
                                                        <td>Admin</td>
                                                        <td class="text-center">
                                                            <input type="checkbox" checked>
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="checkbox">
                                                        </td>
                                                        <td>+45 223965</td>
                                                        <td>mfr@scada-international.com</td>
                                                    </tr>
                                                    <tr class="datarow">
                                                        <td>Jason</td>
                                                        <td class="text-center">
                                                            <input type="checkbox" checked>
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="checkbox" checked>
                                                        </td>
                                                        <td>+45 223965</td>
                                                        <td>mfr@scada-international.com</td>
                                                    </tr>
                                                    <tr class="datarow">
                                                        <td>Admin</td>
                                                        <td class="text-center">
                                                            <input type="checkbox" checked>
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="checkbox">
                                                        </td>
                                                        <td>+45 223965</td>
                                                        <td>mfr@scada-international.com</td>
                                                    </tr>
                                                </tbody>
                                            </table>

                                        </div>



                                    </div>
                                </div>

                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- @import "/kitparts/end.html" -->