<!-- @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 serverselector" id="reportwrapper">

                <!--

                <table class="itemtable">
                    <thead>
                        <tr>

                            <th>
                                <div class="material-input">
                                    <input required>
                                    <label>ID</label>
                                    <i class="icon icon-filter disabled"></i>
                                </div>
                                <div class="sort-arrows">
                                    <div class="arrow-up"></div>
                                    <div class="arrow-down"></div>
                                </div>
                            </th>

                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            -->





                <div class="row contentrow">
                   <!-- <div class="col-3 reportsidebar">
                        <h3 style="margin-top:0px;">Servers</h3>

                        <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">
                                        Server 01</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkboxwrapper">
                                    <input class="styled-checkbox" id="styled-checkbox-161" type="checkbox" value="value1">
                                    <label for="styled-checkbox-161">
                                        Server 02</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkboxwrapper">
                                    <input class="styled-checkbox" id="styled-checkbox-162" type="checkbox" value="value1">
                                    <label for="styled-checkbox-162">
                                        Server 03</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkboxwrapper">
                                    <input class="styled-checkbox" id="styled-checkbox-163" type="checkbox" value="value1">
                                    <label for="styled-checkbox-163">
                                        Server 04</label>
                                </div>
                            </li>
                        </ul>



                    </div>-->
                    <div class="col-12">

                        <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" onclick="window.location.href='serverinfo.html'">Cancel</button>
                                <button class="btn" onclick="window.location.href='serverinfo.html'">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="report" id="serveralarmtypes">


                                            <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">
                                                    <h3>You have selected 4 of 45 possible alarm types</h3>
                                                </div>
                                            </div>


                                            <table class="itemtable">
                                                <thead>
                                                    <tr>
                                                        <th>
                                                            <div class="material-input" data-toggle="tooltip"
                                                                data-placement="right" title="">
                                                                <input required>
                                                                <label>Type</label>
                                                                <i class="icon icon-filter disabled"></i>
                                                            </div>
                                                        </th>
                                                        <th>
                                                            <div class="material-input" data-toggle="tooltip"
                                                                data-placement="right" title="">
                                                                <input required>
                                                                <label>Number</label>
                                                                <i class="icon icon-filter disabled"></i>
                                                            </div>
                                                        </th>

                                                        <th>
                                                            <div class="material-input" data-toggle="tooltip"
                                                                data-placement="right" title="">
                                                                <input required>
                                                                <label>Name</label>
                                                                <i class="icon icon-filter disabled"></i>
                                                            </div>
                                                        </th>
                                                        <th>
                                                            <div class="material-input" data-toggle="tooltip"
                                                                data-placement="right" title="">
                                                                <input required>
                                                                <label>Category</label>
                                                                <i class="icon icon-filter disabled"></i>
                                                            </div>
                                                        </th>

                                                        <th>
                                                            <div class="material-input" data-toggle="tooltip"
                                                                data-placement="right" title="">
                                                                <input required>
                                                                <label> Reset Type
                                                                </label>
                                                                <i class="icon icon-filter disabled"></i>
                                                            </div>
                                                        </th>

                                                        <th class="no-input text-center">
                                                            <button class="btn"><i class="icon-plus"></i> Check
                                                                all</button>


                                                        </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </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">
                                                            <input type="checkbox"> </td>
                                                    </tr>

                                                </tbody>
                                            </table>










                                        </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" -->