<% include ../general/header %>
<body>
    <div class="form mt-5 mx-auto">
        <% include ../general/logo %>
        <% include ../general/msg %>

        <form method="post" action="/forgot">
            <h3 class="mt-3 mb-3 text-center">
                <%= i18n._resetYourPassword %>
            </h3>
            <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="<%= i18n._email %>" value="<%- flash.email %>"/>
            <input type="submit" id="send" value="<%= i18n._sendPasswordResetEmail %>">
        </form>

        <div class="max-auto text-center clearfix mt-3">
            <span class="note"><%= i18n._loginWith %></span>
            <a href="/auth/facebook" class="btn btn-social-icon btn-facebook"><span class="fa fa-facebook"></span></a>
            <a href="/auth/google" class="btn btn-social-icon btn-google"><span class="fa fa-google"></span></a>
            <a href="/auth/twitter" class="btn btn-social-icon btn-twitter"><span class="fa fa-twitter"></span></a>
        </div>

        <div class="max-auto text-center clearfix mt-3">
            <a class="float-left" href="/login"><%= i18n._login %></a>
            <a class="float-right" href="/signup"><%= i18n._signup %></a>
        </div>
    </div>

    <% include ../general/lang %>
    <% include ../general/footer %>

    <script>
        $('#email').focus();
        $('#send').prop('disabled', true);

        $('#email, #password').keyup(function(){
            var isDisabled = ($('#password').val() == '' || $('#email').val() == '');
            $('#send').prop('disabled', isDisabled);
        });
    </script>
</body>
</html>