{% 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;
}
#lang {
    margin:0;
}
#lang-context {
    font-weight:normal;
}
#lang-context-selector {
    text-align:left;
}
#log-in-panel .input {
  width: 284px;
}
</style>
{% endblock %}

{% block main_content %}
<div class="login-panel-outer-container vh">
  <div class="login-panel" id="log-in-panel">
    <h1 class="login-panel-hd">{% trans "Password Reset" %}</h1>
    <form action="" method="post" id="login-form">{% csrf_token %}
      <p>{% trans "We will send you an email to set new password" %}</p>
      <input type="email" name="email" maxlength="255" required="" id="id_email" class="input" placeholder="{% trans "Your email used in login" %}" />
      {{ form.email.errors }}
      <button type="submit" class="submit btn btn-primary btn-block h-auto mb-3">{% trans "Submit" %}</button>
    </form>
    <div class="login-panel-bottom-container d-flex justify-content-center" id="login-bottom">
    </div>
  </div>
</div>
{% endblock %}

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

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');

$('#lang-context').on('click', function() {
    var langTop = $('#lang').offset().top;
    var langSelectorTop;
    var langSelectorHeight = $('#lang-context-selector .sf-popover-con').outerHeight();
    if (langSelectorHeight > langTop) {
        langSelectorTop = '-' + (langTop - 5) + 'px';
    } else {
        langSelectorTop = '-' + (langSelectorHeight + 5) + 'px';
    }
    $('#lang-context-selector').css({
        'top': langSelectorTop,
        'right': 0
    });
    $('#lang-context-selector .sf-popover-con').css({
        'max-height': $('#lang').offset().top - 10
    });
});
</script>
{% endblock %}
