<!-- @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/reports/components/breadcrumb_templates.html" -->
    </div>
    <div class="row">
        <div class="col-12">
            <div class="scadacard level1" id="reportwrapper">
                <div class="row contentrow">
                    <div class="col-12 ">
                        <div class="row">
                            <div class="col-12">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#reportsettings" role="tab"
                                            data-toggle="tab">Report
                                            Archive</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#subscriptionsettings" role="tab"
                                            data-toggle="tab">Report
                                            Subscriptions</a>
                                    </li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="reportsettings">
                                        <div>
                                            <div class="row">
                                                <div class="col-12 text-right">
                                                    <button class="btn" data-toggle="modal"
                                                        data-target="#generateReportModal">+
                                                        New report</button>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12 ">
                                                    <div id="tablewrapper">
                                                        <!-- @import "/app/loader/components/loader.html" -->
                                                        <div class="hiddenwhileloading" style="display:none;">
                                                            <table class="itemtable">
                                                                <thead>
                                                                    <tr>
                                                                        <th>
                                                                            <div class="material-input">
                                                                                <input required>
                                                                                <label>Name</label>
                                                                            </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>Template</label>
                                                                            </div>
                                                                            <div class="sort-arrows">
                                                                                <div class="arrow-up"></div>
                                                                                <div class="arrow-down"></div>
                                                                            </div>
                                                                        </th>
                                                                        <th class="noinput">
                                                                            Units
                                                                        </th>
                                                                        <th class="noinput">
                                                                            Date Range
                                                                        </th>
                                                                        <th class="noinput">
                                                                            <a href="javascript:void(0);" role="button">
                                                                                Age
                                                                            </a>
                                                                            <div class="sort-arrows">
                                                                                <div class="arrow-up"></div>
                                                                                <div class="arrow-down"></div>
                                                                            </div>
                                                                        </th>
                                                                        <th class="noinput text-center">
                                                                            Data
                                                                        </th>
                                                                        <th class="noinput">
                                                                            <a href="javascript:void(0);" role="button">
                                                                                Creator
                                                                            </a>

                                                                            <div class="sort-arrows">
                                                                                <div class="arrow-up"></div>
                                                                                <div class="arrow-down"></div>
                                                                            </div>
                                                                        </th>
                                                                        <th>
                                                                        </th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr class="datarow">
                                                                        <td>
                                                                            Gloabal site report
                                                                        </td>
                                                                        <td>Performance Report</td>
                                                                        <td>All units of KK Park</td>
                                                                        <td>2018</td>
                                                                        <td>1 day, created 02. september 2018</td>
                                                                        <td class="text-center"> <i
                                                                                class="icon-lock"></i>
                                                                        </td>
                                                                        <td>tbagger</td>
                                                                        <td class="text-right"> <i class="icon-export"
                                                                                data-toggle="modal"
                                                                                data-target="#downloadReportModal"></i><i
                                                                                class="icon-minus" data-toggle="modal"
                                                                                data-target="#deleteReportModal"></i>
                                                                        </td>
                                                                    </tr>
                                                                    <tr class="datarow">
                                                                        <td>
                                                                            Gloabal site report
                                                                        </td>
                                                                        <td>Performance Report</td>
                                                                        <td>All units of KK Park</td>
                                                                        <td>2018</td>
                                                                        <td>1 day, created 02. september 2018</td>
                                                                        <td class="text-center"> <i
                                                                                class="icon-lock"></i>
                                                                        </td>
                                                                        <td>tbagger</td>
                                                                        <td class="text-right"> <i class="icon-export"
                                                                                data-toggle="modal"
                                                                                data-target="#downloadReportModal"></i><i
                                                                                class="icon-minus" data-toggle="modal"
                                                                                data-target="#deleteReportModal"></i>
                                                                        </td>
                                                                    </tr>
                                                                    <tr class="datarow">
                                                                        <td>
                                                                            Gloabal site report
                                                                        </td>
                                                                        <td>Performance Report</td>
                                                                        <td>All units of KK Park</td>
                                                                        <td>2018</td>
                                                                        <td>1 day, created 02. september 2018</td>
                                                                        <td class="text-center"> <i
                                                                                class="icon-lock"></i>
                                                                        </td>
                                                                        <td>tbagger</td>
                                                                        <td class="text-right"> <i class="icon-export"
                                                                                data-toggle="modal"
                                                                                data-target="#downloadReportModal"></i><i
                                                                                class="icon-minus" data-toggle="modal"
                                                                                data-target="#deleteReportModal"></i>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="subscriptionsettings">
                                        <div>
                                            <div class="row">
                                                <div class="col-12 text-right">
                                                    <button class="btn" data-toggle="modal"
                                                        data-target="#subscribeReportModal">+
                                                        New subscription</button>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12 ">
                                                    <div id="tablewrapper">
                                                        <!-- @import "/app/loader/components/loader.html" -->
                                                        <div class="hiddenwhileloading" style="display:none;">
                                                            <table class="itemtable">
                                                                <thead>
                                                                    <tr>
                                                                        <th>
                                                                            <div class="material-input">
                                                                                <input required>
                                                                                <label>Name</label>
                                                                            </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>Template</label>
                                                                            </div>
                                                                            <div class="sort-arrows">
                                                                                <div class="arrow-up"></div>
                                                                                <div class="arrow-down"></div>
                                                                            </div>
                                                                        </th>
                                                                        <th class="noinput">
                                                                            Units
                                                                        </th>
                                                                        <th class="noinput">
                                                                            Date Range
                                                                        </th>

                                                                        <th class="noinput">
                                                                            Recipients
                                                                        </th>

                                                                        <th>

                                                                        </th>

                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr class="datarow">
                                                                        <td>
                                                                            Global site report
                                                                        </td>
                                                                        <td>Performance Report</td>
                                                                        <td>All units of KK Park</td>
                                                                        <td>Weekly</td>
                                                                        <td>tbagger, fhoeg and 6 more</td>
                                                                        <td class="text-right"> <i class="icon-edit"
                                                                                data-toggle="modal"
                                                                                data-target="#subscribeReportModal"></i><i
                                                                                class="icon-minus" data-toggle="modal"
                                                                                data-target="#deleteSubscriptionModal"></i>
                                                                        </td>

                                                                    </tr>
                                                                    <tr class="datarow">
                                                                        <td>
                                                                            Global site report
                                                                        </td>
                                                                        <td>Performance Report</td>
                                                                        <td>All units of KK Park</td>
                                                                        <td>Daily</td>
                                                                        <td>tbagger, fhoeg</td>

                                                                        <td class="text-right"> <i class="icon-edit"
                                                                                data-toggle="modal"
                                                                                data-target="#subscribeReportModal"></i><i
                                                                                class="icon-minus" data-toggle="modal"
                                                                                data-target="#deleteSubscriptionModal"></i>
                                                                        </td>

                                                                    </tr>
                                                                    <tr class="datarow">
                                                                        <td>
                                                                            Global site report
                                                                        </td>
                                                                        <td>Performance Report</td>
                                                                        <td>All units of KK Park</td>
                                                                        <td>Monthly</td>
                                                                        <td>tbagger, fhoeg, botheman</td>

                                                                        <td class="text-right"> <i class="icon-edit"
                                                                                data-toggle="modal"
                                                                                data-target="#subscribeReportModal"></i><i
                                                                                class="icon-minus" data-toggle="modal"
                                                                                data-target="#deleteSubscriptionModal"></i>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Download report -->
<div class="modal fade" id="downloadReportModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">
                    Download report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-6 downloadreport">
                            <div>
                                <p><i class="icon-file-pdf"></i>Download “Scada international site report.pdf</p>
                                <p><i class="icon-file-excel"></i>Download “Scada international site report.xslx</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4>Preview</h4>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                viewBox="0 0 595.28 841.89">
                                <title>Front page preview</title>
                                <rect class="previewWhitebox" width="595.28" height="841.89" />
                                <image xlink:href="/app/core/images/front.jpg" x="0" y="55" height="841.89"
                                    width="595.28" />
                                <g class="previewTitlebox">
                                    <rect y="566.93" width="595.28" height="119.05" />
                                </g>
                                <text class="previewTitle" transform="translate(36.85 612.84)">SCADA INTERNATIONAL SITE
                                    REPORT</text>
                                <text class="previewLocation" transform="translate(36.85 656.04)">KK Park,
                                    Denmark</text>
                                <g class="datebox">
                                    <rect class="previewWhitebox" y="685.98" width="595.28" height="53.86" />
                                </g>
                                <text class="previewDate" transform="translate(36.85 709.84)">Report generated 18.
                                    january 2019</text>
                                <text class="previewDate" transform="translate(36.85 723.84)">Time span: 09. july 2018,
                                    00:00 - 10. july 2018,
                                    23:59</text>
                                <text class="previewIntro" transform="translate(297.64 46.27)">Lorem ipsum dolor sit
                                    amet, consectetur
                                    adipiscing</text>
                                <text class="previewIntro" transform="translate(297.64 59.27)">elit. Morbi urna diam,
                                    ultricies in sagittis eu,
                                    rhoncus </text>
                                <text class="previewIntro" transform="translate(297.64 72.26)">sed libero. Nulla
                                    accumsan arcu risus, sed
                                    condime.</text>
                                <rect class="previewLogo" x="25.51" y="27.64" width="221.1" height="53.86" />
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-12">
                    <button class="btn" style="width:100%" id="cancelReport" data-dismiss="modal">Close this window and
                        return to the report archive</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Generate report -->
<div class="modal fade" id="generateReportModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="stepwizard">
                <div class="stepwizard-row setup-panel">
                    <div class="modal-header">
                        <h5 class="modal-title" id="reportModalLabel">
                            Generate report -
                            <div class="stepwizard-step">

                                <a href="#step-1" class="primary">1</a>
                            </div>
                            <div class="stepwizard-step">
                                <a href="#step-2" class="default" disabled="disabled">2</a>
                            </div>
                            <div class="stepwizard-step">
                                <a href="#step-3" class="default" disabled="disabled">3</a>
                            </div>
                            <div class="stepwizard-step">
                                <a href="#step-4" class="default" disabled="disabled">4</a>
                            </div>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form role="form" action="" method="post">
                        <div class="modal-body">
                            <div class="container-fluid">


                                <div class="row setup-content" id="step-1">
                                    <div class="col-6">
                                        <h3>Report setings</h3>
                                        <div class="form-group material-input">
                                            <div class="inputwrapper">

                                                <p>Name your report:</p>
                                                <input maxlength="100" required="required" class=""
                                                    placeholder="Report name" type="text">
                                            </div>
                                        </div>
                                        <div class="form-group">

                                            <div class="inputwrapper">
                                                <p>Report type:</p>
                                                <div class="imageinput dropdown show">
                                                    <input type="text" class="dropdown-toggle"
                                                        placeholder="Choose report type" data-toggle="dropdown"
                                                        role="button" aria-expanded="false">
                                                    <i class="icon icon-down"></i>
                                                    <div class="dropdown-menu dropdown"
                                                        aria-labelledby="reportDropdown">
                                                        <table>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Site report</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Portfolio report</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="inputwrapper">
                                                <p>Template:</p>
                                                <div class="imageinput dropdown show">
                                                    <input type="text" class="dropdown-toggle"
                                                        placeholder="Choose template" data-toggle="dropdown"
                                                        role="button" aria-expanded="false">
                                                    <i class="icon icon-down"></i>
                                                    <div class="dropdown-menu dropdown"
                                                        aria-labelledby="reportDropdown">
                                                        <table>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Template 1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Template 2</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="inputwrapper">
                                                <p>Description:</p>
                                                <div class="imageinput dropdown show">
                                                    <textarea style="height:200px;">Bacon ipsum dolor amet pork chop groucapicola porchetta chicken tri-tip boudin hamburger shoulder pork. Turducken pork chop fatback sausage drumstick. Flank bresaola cupim pork belly, chuck corned beef meatloaf. Corned beef pig tri-tip beef, drumstick doner short ribs fatback pork belly ribeye.
                                                      </textarea>
                                                </div>
                                            </div>
                                            <div class="inputwrapper">
                                                <p>Date range:</p>
                                                <div class="imageinput dropdown show">
                                                    <input type="text" class="dropdown-toggle"
                                                        placeholder="Select dat range" data-toggle="dropdown"
                                                        role="button" aria-expanded="false">
                                                    <i class="icon icon-down"></i>
                                                    <div class="dropdown-menu dropdown"
                                                        aria-labelledby="reportDropdown">
                                                        <table>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Today</td>
                                                                    <td>January 21</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Last 7 days</td>
                                                                    <td>January 12 - January 19</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Last 14 days</td>
                                                                    <td>January 5 - January 19</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>This month</td>
                                                                    <td>January 1 - January 19</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Last month</td>
                                                                    <td>December 19 - January 19</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Custom range</td>
                                                                    <td></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>

                                            <br>
                                            <p><i class="icon-lock"></i> The data in the selected period is locked</p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <!-- @import "/app/reports/components/previewsnippet.html" -->
                                    </div>
                                    <div class="modal-footer">
                                        <div class="col-4">
                                            <button class="btn prevBtn btn-lg" data-dismiss="modal" aria-label="Close"
                                                type="button">Cancel</button>
                                        </div>
                                        <div class="col-4 text-center">
                                            <button class="btn prevBtn btn-lg" type="button" disabled>Generate report</button>
                                        </div>
                                        <div class="col-4 text-right">
                                            <button class="btn nextBtn btn-lg" type="button">Next <i
                                                    class="icon-right-open"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row setup-content" id="step-2">
                                    <div class="col-6 reportUnitSelector">
                                        <h3> Select units</h3>
                                        <ul class="nav nav-list nav-menu-list-style">
                                            <li>
                                                <div class="checkboxwrapper nav-header">
                                                    <input class="styled-checkbox" id="styled-checkbox-700"
                                                        type="checkbox" value="value1">
                                                    <label for="styled-checkbox-700">
                                                        <i class="icon icon-turbinepark"></i>18 characters park with
                                                        more than 18 charactaers</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
                                                                wiubr ieuhg iuerh</label>
                                                        </div>
                                                    </li>
                                                    <li class="disabled">
                                                        <div class="checkboxwrapper">
                                                            <input class="styled-checkbox" id="styled-checkbox-16111"
                                                                type="checkbox" value="value1">
                                                            <label for="styled-checkbox-16111">
                                                                <i class="icon icon-turbine"></i>TB02</label>
                                                        </div>
                                                    </li>
                                                    <li class="disabled">
                                                        <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                    <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">
                                                    <input class="styled-checkbox" id="styled-checkbox-770"
                                                        type="checkbox" value="value1">
                                                    <label for="styled-checkbox-770">
                                                        <i class="icon icon-turbinepark"></i>GE 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-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-6">
                                        <!-- @import "/app/reports/components/previewsnippet.html" -->
                                    </div>
                                    <div class="modal-footer">

                                        <div class="col-4">
                                            <button class="btn prevBtn btn-lg" type="button"><i
                                                class="icon-left-open"></i> Previous</button>
                                        </div>
                                        <div class="col-4 text-center">
                                            <button class="btn prevBtn btn-lg" type="button" disabled>Generate report</button>
                                        </div>
                                        <div class="col-4 text-right">
                                            <button class="btn nextBtn btn-lg" type="button">Next <i
                                                class="icon-right-open"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row setup-content" id="step-3">
                                    <div class="col-12">
                                        <h3>Notes</h3>

                                        <div class="editorwrapper">
                                            <div class="editortools text-right"><img src="/app/core/images/editortoolbar.png">
                                            </div>
                                            <div class="editor" contenteditable="true"> Enter content</div>
                                        </div>
                                        <br />
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="inputwrapper">
                                                    <p>Document size:</p>
                                                    <div class="imageinput dropdown show">
                                                        <input type="text" class="dropdown-toggle"
                                                            placeholder="Choose size" data-toggle="dropdown"
                                                            role="button" aria-expanded="false">
                                                        <i class="icon icon-down"></i>
                                                        <div class="dropdown-menu dropdown"
                                                            aria-labelledby="reportDropdown">
                                                            <table>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>A4</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Letter</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="inputwrapper ">

                                                    <p>Include data file:</p>

                                                    <div class="datafile active">
                                                        <svg id="pageorientationPortrait"
                                                            xmlns="http://www.w3.org/2000/svg"
                                                            viewBox="0 0 29.09 29.09">
                                                            <path
                                                                d="M2.91,0V29.09H26.18V8.81L17.53,0ZM4.43,1.54H16v8.64h8.4v17.3h-20Z" />
                                                        </svg>
                                                        <p>None</p>
                                                    </div>
                                                    <div class="datafile">
                                                        <svg version="1.1" id="pageorientationPortrait"
                                                            xmlns="http://www.w3.org/2000/svg"
                                                            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                            viewBox="0 0 29.1 29.1"
                                                            style="enable-background:new 0 0 29.1 29.1;"
                                                            xml:space="preserve">
                                                            <path
                                                                d="M2.9,0v29.1h23.3V8.8L17.5,0H2.9z M4.4,1.5H16v8.6h8.4v17.3h-20L4.4,1.5z" />
                                                            <g>
                                                                <path
                                                                    d="M13,25l-1.7-2.6L9.6,25H6.9l3.1-4.2L7,16.6h2.7l1.7,2.4l1.7-2.4h2.6l-2.9,4.1l3.1,4.3H13z" />
                                                            </g>
                                                        </svg>
                                                        <p>Excel</p>
                                                    </div>
                                                    <div class="datafile">
                                                        <svg version="1.1" id="pageorientationPortrait"
                                                            xmlns="http://www.w3.org/2000/svg"
                                                            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                            viewBox="0 0 29.1 29.1"
                                                            style="enable-background:new 0 0 29.1 29.1;"
                                                            xml:space="preserve">
                                                            <path
                                                                d="M2.9,0v29.1h23.3V8.8L17.5,0H2.9z M4.4,1.5H16v8.6h8.4v17.3h-20L4.4,1.5z" />
                                                            <g>
                                                                <path d="M7.7,24.7c-0.5-0.2-0.8-0.6-1.1-1s-0.4-0.9-0.4-1.4c0-0.5,0.1-1,0.4-1.4s0.6-0.7,1.1-1c0.5-0.2,1-0.4,1.5-0.4
		c0.6,0,1.1,0.1,1.5,0.4c0.4,0.2,0.7,0.6,0.9,1l-1.2,0.6c-0.3-0.5-0.7-0.7-1.2-0.7c-0.4,0-0.7,0.1-1,0.4s-0.4,0.6-0.4,1.1
		s0.1,0.8,0.4,1.1s0.6,0.4,1,0.4c0.5,0,0.9-0.2,1.2-0.7l1.2,0.7c-0.2,0.4-0.5,0.8-0.9,1c-0.4,0.2-0.9,0.4-1.5,0.4
		C8.6,25.1,8.1,25,7.7,24.7z" />
                                                                <path d="M13,24.9c-0.4-0.1-0.8-0.2-1-0.4l0.5-1.1c0.2,0.2,0.5,0.3,0.9,0.4s0.7,0.1,1,0.1c0.7,0,1-0.2,1-0.5c0-0.2-0.1-0.3-0.3-0.3
		c-0.2-0.1-0.5-0.1-0.8-0.2c-0.4-0.1-0.8-0.1-1.1-0.2c-0.3-0.1-0.5-0.2-0.7-0.5c-0.2-0.2-0.3-0.5-0.3-0.9c0-0.3,0.1-0.6,0.3-0.9
		s0.5-0.5,0.9-0.6c0.4-0.1,0.8-0.2,1.3-0.2c0.4,0,0.8,0,1.1,0.1s0.7,0.2,0.9,0.3l-0.5,1.1c-0.5-0.3-1-0.4-1.5-0.4
		c-0.3,0-0.6,0-0.8,0.1c-0.2,0.1-0.2,0.2-0.2,0.4c0,0.2,0.1,0.3,0.3,0.4s0.5,0.1,0.9,0.2c0.4,0.1,0.8,0.2,1.1,0.2
		c0.3,0.1,0.5,0.2,0.7,0.5c0.2,0.2,0.3,0.5,0.3,0.9c0,0.3-0.1,0.6-0.3,0.9c-0.2,0.3-0.5,0.5-0.9,0.6c-0.4,0.1-0.8,0.2-1.4,0.2
		C13.9,25.1,13.5,25,13,24.9z" />
                                                                <path
                                                                    d="M23.1,19.6L20.8,25h-1.6l-2.3-5.4h1.6l1.5,3.7l1.5-3.7H23.1z" />
                                                            </g>
                                                        </svg>
                                                        <p>CSV</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <div class="col-6">
                                            <button class="btn prevBtn btn-lg" type="button"><i
                                                class="icon-left-open"></i> Previous</button>
                                        </div>

                                        <div class="col-6 text-right">
                                            <button class="btn nextBtn btn-lg" type="button">Generate report</button>
                                      
                                        </div>
                                    </div>
                                </div>
                                <div class="row setup-content" id="step-4">
                                    <div class="col-6 downloadreport">
                                        <div id="reportGenerating">
                                            <h3> Generating report</h3>
                                            <div class="progress">
                                                <div class="progress-bar" id="progressbar" role="progressbar"
                                                    aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                                    xx %
                                                </div>
                                            </div>
                                        </div>
                                        <div id="reportDone" style="display:none;">
                                            <h1 class="text-center">
                                                <i class=" icon-ok-circle" style="font-size:120px;"></i><br><br>
                                                Success!<br>
                                                Your report has been generated
                                                and is ready for download:
                                            </h1><br>
                                            <p><i class="icon-file-pdf"></i>Download “Scada international site
                                                report.pdf</p>
                                            <p><i class="icon-file-excel"></i>Download “Scada international site
                                                report.xslx</p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <!-- @import "/app/reports/components/previewsnippet.html" -->
                                    </div>
                                    <div class="modal-footer">
                                        <div class="col-12">
                                            <button class="btn prevBtn btn-lg" id="abortGeneration"
                                                type="button">Abort</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Delete Report Modal -->
<div class="modal alarmmodal fade" id="deleteReportModal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width:1000px;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">
                    <i class="icon icon-minus"></i>
                    Delete report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <h3>Warning</h3>
                                            You are about to delete a report! <br>
                                            Deleting a report can’t be undone!<br>
                                            Are you sure you want to delete the report "Global site report"?
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col-6">
                        <button class="btn" data-dismiss="modal">No!</button>
                    </div>
                    <div class="col-6 text-right">
                        <button class="btn" data-dismiss="modal">Yes, delete the report</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Subscription Modal -->
<div class="modal alarmmodal fade" id="deleteSubscriptionModal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width:1000px;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">
                    <i class="icon icon-minus"></i>
                    Delete subscription</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <h3>Warning</h3>
                                            You are about to delete a subscription! <br>
                                            Deleting a subscription can’t be undone!<br>
                                            Are you sure you want to delete the subscription "Global site report"?
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col-6">
                        <button class="btn" data-dismiss="modal">No!</button>
                    </div>
                    <div class="col-6 text-right">
                        <button class="btn" data-dismiss="modal">Yes, delete the subscription</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal alarmmodal fade" id="configerrorModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width:1000px;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">
                    <i class="icon icon-alert"></i>
                    Unit Configuration Error</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-4 dark">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>Some of the selected units are not configured correctly for the chosen
                                            report type.
                                            <br>
                                            <br> These units will be deselected if you proceed.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col-6">
                        <button class="btn" data-dismiss="modal">Cancel</button>
                    </div>
                    <div class="col-6 text-right">
                        <button class="btn" data-dismiss="modal">Accept</button>
                    </div>

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