<!DOCTYPE html>
<html>

<head>
    <%- include("header") %>
    <script>
        $(document).ready(function() {
            // Retry button functionality
            $(document).on("click", "#retryBtn", function() {
                $.get("retry", function(response) {
                    document.getElementsByTagName("html")[0].innerHTML = response;
                    window.location = window.location;
                });
            });

            // Pressing enter to proceed
            $(document).bind("keyup", function(e) {
                if (e.keyCode == 13) {
                    $("#retryBtn").trigger("click");
                }
            });
        });
    </script>
</head>

<body>
    <div class="ui middle aligned grid">
        <div class="eight column wide">
            <div class="ui raised very padded text container segment">
                <div class="ui form" id="module">
                    <h2 class="ui header">
                        <% if (errorTitle) { %>
                            <%=errorTitle%>
                        <% } else { %>
                            Oops, that seems incorrect.
                        <% } %>
                    </h2>
                    <% if (errorImgDir) { %>
                        <img class="ui fluid image" src="<%=errorImgDir%>">
                    <% } %>
                    <p>
                        <% if (errorMsg) { %>
                            <%=errorMsg%>
                        <% } else { %>
                            The input(s) you made is/are incorrect. How about you try again?
                        <% } %>
                    </p>
                    <button class="ui button purple fluid" id="retryBtn">Retry</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
