% layout 'default';
% title 'Login';
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<h1>Login</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<form action="<%= url_for '/' %>" method="POST" class="form">
<div class="form-group">
<%= label_for 'email' => 'Email' %>
<%= text_field 'email' => (class => 'form-control', id => 'email') %>
</div>
<div class="form-group">
<%= label_for 'password' => 'Password' %>
<%= password_field 'password' => (class => 'form-control', id => 'password') %>
</div>
<%= csrf_field %>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
<div class="row justify-content-center">
    <div class="col-auto mt-3">
        <button class="btn btn-link" data-toggle="collapse" data-target="#recovery-form" href="#">Lost Password?</button>
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-auto collapse" id="recovery-form">
        <form action="<%= url_for '/recover' %>" method="post">
            <div class="form-group">
                <%= label_for 'recovery_email' => 'Email' %>
                <%= text_field 'recovery_email' => (class => 'form-control', id => 'recovery_email') %>
            </div>
            <%= csrf_field %>
            <button type="submit" class="btn btn-primary btn-block">Send Recovery Email</button>
        </form>
    </div>
</div>
</div>
</div>
</div>