{% extends "base.html" %}
{% load i18n %}

{% block sub_title %}{% trans "Password Reset" %} - {% endblock %}
{% block header_css_class %}hide{% endblock %}
{% block extra_base_style %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
{% endblock %}
{% block extra_style %}
<style type="text/css">
html, body, #wrapper { height:100%; }
#wrapper {
    background: url('{{ MEDIA_URL }}{{login_bg_image_path}}') center top no-repeat scroll;
    background-size: cover;
    padding-top:1px;
}
.login-panel-hd {
  margin-bottom: 34px;
}
#back-to-login {
  margin: 31px 0 41px;
}
</style>
{% endblock %}

{% block main_content %}
<div class="login-panel-outer-container vh">
  <div class="login-panel text-center" id="log-in-panel">
    <h1 class="login-panel-hd">{% trans "Password Reset" %}</h1>
    <img src="{{ MEDIA_URL }}img/email.png" alt="" width="100" />
    <p>{% trans "We've sent a password reset email to your mailbox." %}</p>
    <a class="btn btn-primary" href="{{ SITE_ROOT }}accounts/login/" id="back-to-login">{% trans "Back to login page" %}</a>
  </div>
</div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$('.login-panel-outer-container').prepend($($('#logo').html()).attr({'height': 40}).addClass('login-panel-logo'));

var $el = $('.login-panel-outer-container');
var elHeight = $el.outerHeight();
var wdHeight = $(window).height();
if (wdHeight > elHeight) {
    $el.css({'margin-top': (wdHeight - elHeight)/2});
}
$el.removeClass('vh');
</script>
{% endblock %}
