{#
 # This file is part of MedShakeEHR.
 #
 # Copyright (c) 2017
 # Bertrand Boutillier <b.boutillier@gmail.com>
 # http://www.medshake.net
 #
 # MedShakeEHR is free software: you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # any later version.
 #
 # MedShakeEHR is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with MedShakeEHR.  If not, see <http://www.gnu.org/licenses/>.
 #/

/##
 # Template > login
 #
 # @author Bertrand Boutillier <b.boutillier@gmail.com>
 # @contrib fr33z00 <https://github.com/fr33z00>
 #}

{% extends "page.html.twig" %}
{% import "macroForm.html.twig" as f %}
{% block title %}{{ config.designAppName }} : login{% endblock %}

{% block jsFiles %}
  <script src="{{ config.protocol }}{{ config.host }}{{ config.urlHostSuffixe }}/thirdparty/jquery/jquery/dist/jquery.min.js?{{ modules.base }}"></script>
{% endblock %}

{% block cssEmbed %}
  {{ parent() }}
  .form-signer {text-align:center;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-pack:center;align-items:center;-webkit-box-pack:center;justify-content:center;}
  .form-signin {width:100%;max-width:330px;margin:0 auto;}
  .form-img {animation:shake 10s normal 1s infinite; margin-top:100px;}
  @keyframes shake {
    from {margin-left:0}
    0.2% {margin-left:-2px}
    0.6% {margin-left:4px}
    1% {margin-left:-6px}
    1.4% {margin-left:6px}
    1.8% {margin-left:-4px}
    2.1% {margin-left:2px}
    2.4% {margin-left:0}
    40% {margin-left:0}
    40.2% {margin-left:-2px}
    40.6% {margin-left:4px}
    41% {margin-left:-6px}
    41.4% {margin-left:6px}
    41.8% {margin-left:-4px}
    42.1% {margin-left:2px}
    42.4% {margin-left:0}
    80% {transform:rotate(0deg)}
    85% {transform:rotate(360deg)}
    to {transform:rotate(360deg)}
  }
{% endblock %}

{% block jsEmbed %}
  $(document).ready(function() {
    $('input').on('keypress', function (e) {
      if (e.which == 13) {
        $('#formName_baseLogin').submit();
        return false;
      }
    });
  });
{% endblock %}

{% block body %}
{# validation error display bloc #}
{{ f.errorFormDiv( session['form'][page.formIN]['validationErrorsMsg'] ) }}

  <div class="form-signer">
    {# form display #}
    <div class="row justify-content-md-center align-items-center" style="height: calc(100vh - 300px); min-height: 250px">
      <div class="col-md-4">
        {% if config.designAppName == 'MedShakeEHR' %}
        <img class="form-img" src="{{ config.protocol }}{{ config.host }}{{ config.urlHostSuffixe }}/img/logo.svg" width=128 height=128/>
        {% endif %}
        <h3>Identifiez-vous</h3>
        {{ f.formbuilder(page.form , page.formIN , session) }}

        {% if config.optionGeLoginPassOnlineRecovery == 'true' %}
        <div class="mt-3 small">
          <a href="{{ config.protocol }}{{ config.host }}{{ config.urlHostSuffixe }}/public/lostPassword/emailAsk/" >Mot de passe perdu ?</a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock %}