[% WRAPPER 'master_templates/master.tmpl'
    theme="bootstrap"
    header = locale.maketext('Graceful Server Reboot')
    breadcrumburl = '/scripts/graceful_reboot_landing'
    app_key = 'graceful_server_reboot'
    extrastyle = '
       .dialog-content {
            color: #333333;
        }
       .dialog-submit {
            margin-top: 20px;
            text-align: right;
        }
        .dialog-box {
            background-color: #F3F3F3;
            border: 1px solid #DCDFE3;
            margin: 10px 0 10px 0;
            padding: 10px;
        }
        .cjt-pagenotice-container {
            display:none;
        }
        .hide {
            display: none!important;
        }
        .show {
            display: block;
        }
        .callout a.btn.no-margin-top {
            margin-top:0;
        }
'
%]
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <div id="initialMessage" class="dialog-box">
                <div>
                    <h4>[% locale.maketext("Warning: This will reboot your system!") %]</h4>
                    <div class="dialog-submit">
                        <input id="proceedBtn" type="submit" class="btn btn-primary" value="[% locale.maketext('Proceed') %] &gt;&gt;" onclick="performAction();">
                    </div>
                </div>
            </div>
            <div id="actionMsg" class="callout callout-warning callout-top hide" role="alert">
                <h4>
                    <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                    [% locale.maketext("A reboot is now in progress …") %]
                </h4>
            </div>
            [% IF data.kernelcare_suggestion %]
            <div class="callout callout-info callout-top"  role="alert">
                <h4>[% data.kernelcare_suggestion.title %]</h4>
                <p>
                    [% data.kernelcare_suggestion.details %]
                    <div>
                        <a
                            class="btn btn-link no-margin-top"
                            href="[% data.kernelcare_suggestion.link.url %]"
                            title="[% data.kernelcare_suggestion.link.label %]"
                            target="[% data.kernelcare_suggestion.link.target %]">
                                [% data.kernelcare_suggestion.link.label %]
                                <i class="fas fa-external-link-alt" aria-hidden="true"></i>
                        </a>
                    </div>
                </p>
                [% IF data.kernelcare_suggestion.note %]
                    <p><strong>[% locale.maketext('Note:') %]</strong> <em>[% data.kernelcare_suggestion.note %]</em></p>
                [% END %]
            </div>
            [% END %]
        </div>
    </div>

    <script>
    function performAction(){
        var xmlhttp = new XMLHttpRequest();

        xmlhttp.open("GET","[% cp_security_token %]/scripts/reboot",true);
        xmlhttp.send();
        document.getElementById("proceedBtn").setAttribute("disabled",true);
        document.getElementById("actionMsg").classList.remove("hide");
        document.getElementById("initialMessage").className += " hide";
    }
    </script>
[% END -%]