<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <meta name="robots" content="noindex, nofollow"/>
        <title><?php echo $title; ?></title>
        <style>
            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed,
            figure, figcaption, footer, header, hgroup,
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font: inherit;
                font-size: 100%;
                vertical-align: baseline;
            }

            html {
                line-height: 1;
            }

            ol, ul {
                list-style: none;
            }

            table {
                border-collapse: collapse;
                border-spacing: 0;
            }

            caption, th, td {
                text-align: left;
                font-weight: normal;
                vertical-align: middle;
            }

            q, blockquote {
                quotes: none;
            }

            q:before, q:after, blockquote:before, blockquote:after {
                content: "";
                content: none;
            }

            article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
                display: block;
            }

            body {
                color: #666;
                width: 100%;
                font: 12px Arial, Helvetica, sans-serif;
                background: url("data:image/png;base64, ") repeat;
            }

            a {
                color: #000;
                text-decoration: underline;
            }

            a:hover {
                text-decoration: underline;
            }

            a:focus {
                outline: none;
            }

            #wrapper {
                width: 100%;
                max-width: <?php echo isset($max_width) ? $max_width : 360; ?>px;
                margin: 20px auto 80px auto;
                background: #fff;
                padding: 30px 30px 10px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                -ms-border-radius: 4px;
                -o-border-radius: 4px;
                border-radius: 4px;
                -webkit-box-shadow: 0px 0px 7px #cccccc;
                -moz-box-shadow: 0px 0px 7px #cccccc;
                box-shadow: 0px 0px 7px #cccccc;
            }

            #header-area {
                width: 100%;
                max-width: 420px;
                margin: 80px auto 20px;
                text-align: center;
            }

            #header-area .logo {
                overflow: hidden;
                width: 100%;
                font-size: 36px;
                line-height: 38px;
                text-align: center;
                margin-bottom: 30px;
                color: #142c35;
                padding-bottom: 1px;
                font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
                text-shadow: 0 2px #fff;
            }

            @media all and (max-width: 768px) {
                #header-area {
                    margin-top: 30px;
                }
            }

            img {
                border: 0 !important;
            }

            small {
                font-size: 0.85em;
            }

            h1, h2, h3, h4, h4 {
                color: #5D5751;
            }

            h2 {
                text-align: center;
                font-size: 22px;
                margin: 0 0 1em 0;
            }

            p {
                text-align: center;
                font-size: 16px;
                line-height: 1.4em;
                margin-bottom: 1em;
            }

            p.known-error {
                text-align: left;
            }

            .btn {
                color: white !important;
                text-shadow: none;
                border: 0;
                font-size: 14px !important;
                font-weight: 700 !important;
                text-decoration: none;
                border-radius: 4px;
                text-shadow: 1px 1px 1px #4da0cc;
                cursor: pointer;
                line-height: 1.4em;
                padding: 10px 16px;
                background: #29abe2;
                display: inline-block;
                width: <?php echo isset($max_width) ? ($max_width - 32 ) : 328; ?>px;

                -webkit-transition: width 500ms cubic-bezier(0.565, 0, 0.415, 1); /* older webkit */
                -webkit-transition: width 500ms cubic-bezier(0.565, -0.325, 0.415, 1.565);
                -moz-transition: width 500ms cubic-bezier(0.565, -0.325, 0.415, 1.565);
                -o-transition: width 500ms cubic-bezier(0.565, -0.325, 0.415, 1.565);
                transition: width 500ms cubic-bezier(0.565, -0.325, 0.415, 1.565); /* custom */
            }

            .btn.success, .btn.success:hover {
                width: 50px;
                background-color: #5cb85c;
                text-shadow: 1px 1px 1px #3d8b3d;
                cursor: default;
            }

            .btn.success.wide-success {
                width: 228px;
            }

            .btn.waiting, .btn.waiting:hover {
                width: 150px;
                background-color: #ccc;
                text-shadow: 1px 1px 1px #aaa;
                cursor: default;
            }

            .btn:hover {
                background: #0071bc;
                color: #fff;
                text-decoration: none;
            }

            code {
                font-family: monospace;
                margin: 0 2px;
                padding: 0 5px;
                word-wrap: break-word;
                border: 1px solid #eaeaea;
                background-color: #f8f8f8;
                border-radius: 3px;
            }

        </style>
    </head>
    <body>
        <div id="header-area">
            <h1 class='logo'><?php echo defined('ENV_TITLE') ? ENV_TITLE : $title; ?></h1>
        </div>
        <div id="wrapper">
            <div id="main" class="form-holder">
                <?php if (isset($subtitle) && !empty($subtitle)): ?>
                    <h2 style="max-width: 360px; margin-left: auto; margin-right: auto;"><?php echo $subtitle; ?></h2>
                <?php endif; ?>
                <?php echo $enduser_message; ?>
            </div>
        </div>
        <?php if (class_exists("Pancake_Exceptions")): ?>
            <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
            <script>
                $(".btn").on("click", function (event) {
                    event.preventDefault();
                    var $btn = $(this);
                    if (!$btn.is(".success") && !$btn.is(".waiting")) {
                        $btn.addClass("waiting").html("<?php echo Pancake_Exceptions::translate("error:sending_details"); ?>");
                        $.getJSON($btn.attr("href")).done(function (data) {
                            if (data.success) {
                                if (typeof(data.email) !== "undefined") {
                                    $("<p style='margin-top: 1em;'><?php echo Pancake_Exceptions::translate("error:response_will_be_sent_to_email"); ?></p>".split("{email}").join(data.email)).insertAfter($btn);
                                } else if (typeof(data.version) !== "undefined") {
                                    $("<p style='margin-top: 1em;'><?php echo Pancake_Exceptions::translate("error:fixed_in_version"); ?></p>".split("{version}").join(data.version)).insertAfter($btn);
                                } else {
                                    $("<p style='margin-top: 1em;'><?php echo Pancake_Exceptions::translate("error:already_being_dealt_with"); ?></p>").insertAfter($btn);
                                }
                                $btn.removeClass("waiting").addClass("success").html("&#x2713;");
                            } else {
                                alert(data.error);
                            }
                        }).fail(function () {
                            alert("<?php echo Pancake_Exceptions::translate("error:unknown_error_reporting"); ?>");
                        });
                    }
                });
            </script>
        <?php endif; ?>
    </body>
</html>