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



    {% block body %}

    <!-- NAVBAR
    ==================================================  --> 
    <nav class="navbar navbar-light navbar-expand-lg fixed-top">
        <div class="container">

            <!-- Navbar: Brand  --> 
            <a class="navbar-brand d-lg-none" href="{{ path('index') }}">
                <img src="assets/img/Riccio_caffé.png" class="img-fluid" alt="..." >
            </a>
      
            <!-- Navbar: Toggler  --> 
            <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>  --> 
            
            <!-- Navbar: Collapse  --> 
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
      
              <!-- Navbar navigation: Left  --> 
              <ul class="navbar-nav mr-auto">
                <!--  <li class="nav-item">
                  <a class="nav-link" href="about-us.html">About Us</a>
                </li>  --> 
                <li class="nav-item dropdown">
                    <!-- <a class="nav-link" href="http://example.com" id="nav-item__menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Menu
                    </a>
                   <a class="nav-link dropdown-toggle" href="http://example.com" id="nav-item__menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Menu
                  </a>
                  <div class="dropdown-menu" aria-labelledby="nav-item__menu">
                    <a class="dropdown-item" href="menu.html">Menu: Standard</a>
                    <a class="dropdown-item" href="menu_no-images.html">Menu: No Images</a>
                  </div> 
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="reservation.html">Reservation</a>
                </li> --> 
              </ul>
      
              <!-- Navbar: Brand  --> 
              <a class="navbar-brand d-none d-lg-flex" href="{{ path('index') }}">
                  <img src="assets/img/logo/ilriccio.png"  alt="..." >
              </a>
      
              <!-- Navbar navigation: Right  --> 
              <ul class="navbar-nav ml-auto">
                <!--<li class="nav-item">
                  <a class="nav-link" href="news-and-events.html">News & Events</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="gallery.html">Gallery</a>
                </li> 
                <li class="nav-item">
                  <a class="nav-link" href="contact-us.html">Contact</a>
                </li> --> 
              </ul>
      
            </div> <!-- / .navbar-collapse  --> 
      
          </div> <!-- / .container  --> 
        </nav> <!-- / .navbar  --> 
      
    {% if error %}
        <div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
    {% endif %}


    <!--  HERO
    ================================================== -->
    <section class="section section_welcome" data-parallax="scroll" style='background-image:url(assets/img/landing1.jpg);height: 450px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;'>
      <!--  style='background-image:url("../images/1.jpg");-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;' -->
      <!--  Overlay -->
      <div class="bg-overlay" ></div>

      <!--  Triangles -->
      <!--  <div class="bg-triangle bg-triangle-light bg-triangle-bottom bg-triangle-left"></div>
      <div class="bg-triangle bg-triangle-light bg-triangle-bottom bg-triangle-right"></div> -->

      <!--  Content -->
      <div class="container">
        <div class="row justify-content-center align-items-center">
          <div class="col-md-8 col-lg-7" >

            <!--  Preheading -->


           

          </div>
        </div> <!--  / .row -->
      </div> <!--  / .container -->

    </section>

    <section class="section section-full section-top bg-light" style='background-color:white!important'>

      <!-- Content  --> 
      <div class="container">
        <div class="row justify-content-center" >
         
          <div class="col-md-8 col-lg-6" style='margin-top:-25%;opacity:0.97;'>
           

            <!-- Form  --> 
            <form class="form-styled bg-white" action="{{ path('login') }}" method='post' >

              <!--  Heading -->
            <h1 class="text-center mb-4" data-toggle="animation" data-animation="fadeUp" data-animation-order="1" data-animation-trigger="load" style='letter-spacing: 0.1em;color:#3a1107'>
              Bienvenu
            </h1>

              <!-- Heading  --> 
              <h4 class="text-center mb-4" style='letter-spacing: 0.1em;'>
                Login
              </h4>

              <!-- Subheading  --> 
              <p class="text-center text-muted mb-5">
                  Pour accéder à votre compte, merci de remplir le formulaire suivant.
              </p>

              <!-- Email  --> 
              <div class="form-group">
                
                <!-- Email  --> 
                <div class="input-group">
                  <input type="text" name="_username" value="{{ last_username }}" class="form-control order-1" placeholder='E-mail'>
                  <div class="input-group-append order-0">
                    <div class="input-group-text" style='background-color:white;;padding:2px;border-right:none'>
                      <img src='assets/img/Gi beige.png'style='height:40px;width:43px'>
                    </div>
                  </div>
                </div>

              </div>

              <!-- Password  --> 
              <div class="form-group">
                
                <!-- Name  --> 
                <label style="font-size:12px">Password</label>
                <div class="input-group">
                  <input type="password" name="_password" class="form-control order-1" placeholder='Mot de passe'>
                  <div class="input-group-append order-0">
                    <div class="input-group-text" style='background-color:white;;padding:2px;border-right:none'>
                      <img src='assets/img/Gi beige.png'style='height:40px;width:43px'>
                    </div>
                  </div>
                </div>

              </div>

              <!-- Footer  --> 
              <div class="form-row align-items-center">
                <div class="col-md-auto">

                  <!-- Checkbox  --> 
                  <div class="custom-control custom-checkbox mb-3 mb-md-0">
                    <!--  <input type="checkbox" class="custom-control-input" id="sign-in-checkbox">
                    <label class="custom-control-label" for="sign-in-checkbox">
                      Remember me
                    </label> -->
                  </div>

                </div>
                <div class="col-md">

                  <!-- Button  --> 
                  <div class="text-center">
                    <button type="submit" class="btn btn-primary" style="letter-spacing: 0.1em">
                      Sign in now
                    </button>
                  </div>

                </div>
              </div> <!-- / .form-row  --> 

              <!-- Link  --> 
              <p class="text-center text-muted mt-5 mb-0">
                <small>
                  Any issue? <a href="mailto:steveumuhire@gmail.com">Contact an administrator</a>.
                </small>
              </p>

            </form>
            
          </div>
        </div> <!-- / .row  --> 
      </div> <!-- / .container  --> 
      
    </section>
{% endblock %}