{% extends 'base.html.twig' %}

{% block title %} {{ 'login.title'|trans }} {% endblock %}
{% block description %}  {% endblock %}

{% block body %}
{% include "front/inc/breadcrumb.html.twig" with 
        {
            'content_title': 'Mon compte',
            'current_page' : 'Accueil',
            'image'        : ''
        } 
  %}

   <div class="container mon_compte">
   
      <!-- Login Card -->
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">{{ 'login.title'|trans }}</h2>
        </div>
        <div class="card-content " id="password-form">
          {% if error %}
            <div class="alert alert-danger">
              {{ error.messageKey|trans(error.messageData, 'security') }}
              </div>
          {% endif %}
          <form method="POST" action="#">
            <div class="input-group">
              <input type="text" name="email" placeholder="{{ 'login.email'|trans }} / Username" class="input-field">
            </div>
            <div class="input-group password-group">
              <input type="password" id="password" name="password" placeholder="{{ 'login.password'|trans }}" class="input-field">
              <button type="button" id="toggle-password" class="password-toggle">
                <svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                  <circle cx="12" cy="12" r="3"></circle>
                </svg>
                <svg id="eye-off-icon" class="hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                  <line x1="1" y1="1" x2="23" y2="23"></line>
                </svg>
              </button>
            </div>
            <div class="bottom_card">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"> 
            <button type="submit" class="button button-primary">{{ 'login.submit'|trans }}</button>
              <div class="forgot-password">
              <span class="forgot-link">{{ 'login.forgot_password'|trans }}</span>
            </div>
            </div>         
          </form>
        </div>

        <div id="forgot-password-form" class="forgot-password-form hidden-element ">
          <h3>{{ 'login.reset_password_title'|trans }}</h3>
          <div class="msg_error"></div>
          <form method="POST" action="{{ path('app_resetpassword',{'_locale': app.request.locale }) }}" id="resetpassword">
            <div class="input-group">
              <input type="email" name="email" placeholder="{{ 'login.reset_password_email'|trans }}" class="input-field">
            </div>
            <div class="bottom_card">
              <button type="submit" class="button button-primary">{{ 'login.reset_password_submit'|trans }}</button>
              <div class="forgot-password">
                <span class="forgot-link">{{ 'login.reset_password_login'|trans }}</span>
              </div>
            </div>
          </form>   
        </div>
      </div>

      <!-- Register Card -->
      <div class="card register-card">
        <div class="card-header">
          <h2 class="card-title">{{ 'login.new_client_title'|trans }}</h2>
        </div>
        <div class="card-content register-content">
          <a href="{{ path('app_register',{'_locale': app.request.locale }) }}" class="button button-outline">{{ 'login.register_button'|trans }}</a>
        </div>
        <div class="card-content register-content">
        {% set cartUrl = (app.session.get('cartCalendar', [])|length > 0) ? 'app_confirmation' : 'app_reservation' %}
          <a href="{{ path(cartUrl,{'_locale': app.request.locale }) }}" class="button button-outline">{{ 'login.guest_button'|trans }}</a>
        </div>
      </div>
    </div>  
    
{% endblock %}