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

{% block title %}Register{% endblock %}

{% block body %}
<style>
    input#registration_form_email{margin-left: 2.4em;}
    input#registration_form_plainPassword{margin-left: 0.4em;}
    input#registration_form_agreeTerms{margin-left: 0.3em;}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<header class="d-flex flex-wrap justify-content-center pt-3 pb-1 border-bottom" style="position:fixed; z-index: 99; background-color: #ffffff; left: 0; right: 0;">
      <a href="/home" class="d-flex align-items-center mb-2 md-0 me-md-auto text-dark text-decoration-none">
        <img style="margin-left: 20px; margin-right: 20px;" class="bd-placeholder-img rounded-circle" width="50" height="50" src="https://scontent-cdt1-1.xx.fbcdn.net/v/t1.6435-9/150198245_401599697624263_6382796652237736084_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=_v5Vmsjmg7cAX-6KpUq&_nc_ht=scontent-cdt1-1.xx&oh=00_AT8wNPnd6vDTAfJMvQUZglwUdhGGNoo5kkeoirmGFEL_7w&oe=6239907A" alt="Logo food culture street">   
        <span class="fs-4">Food Culture Street</span>
      </a>

      <ul class="nav nav-pills">
        <form method="post" role="form">
            {# {% if error %}
                <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
            {% endif %}

            {% if app.user %}
                <div class="mb-3">
                    You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
                </div>
            {% endif %} #}

            <ul class="nav nav-pills">
                <li class="nav-item" style="margin-right:1em"><a class="btn btn-primary" href="/">Log in</a></li>
            </ul>

            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
        </form>
      </ul>
</header>
<main>


<section class="vh-100" style="background-color: #eee;">
  <div class="container h-100">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-lg-12 col-xl-11">
        <div class="card text-black" style="border-radius: 25px;">
          <div class="card-body p-md-5">
            <div class="row justify-content-center">
              <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
              
                {{ form_start(registrationForm) }}
                <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>

                <form class="mx-1 mx-md-4">

                  <div class="d-flex flex-row align-items-center mb-4">
                    <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
                    <div class="form-outline flex-fill mb-0">
                      {{ form_row(registrationForm.email) }} 
                    </div>
                  </div>

                  <div class="d-flex flex-row align-items-center mb-4">
                    <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
                    <div class="form-outline flex-fill mb-0">
                      {{ form_row(registrationForm.plainPassword, {label: 'Password'}) }}
                    </div>
                  </div>

                  <div class="form-check d-flex justify-content-left mb-5">
                    {{ form_row(registrationForm.agreeTerms) }}
                  </div>

                  <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
                    <button type="submit" class="btn btn-primary btn-lg">Register</button>
                  </div>
                {{ form_end(registrationForm) }}
                </form>

              </div>
              <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">

                <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp" class="img-fluid" alt="Sample image">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

</main>

<footer class="pt-4 my-md-5 pt-md-5 border-top">
    <div class="row">
      <div class="col-12 col-md logoFooter">
        <img class="rounded-circle" width="80" height="80" src="https://scontent-cdt1-1.xx.fbcdn.net/v/t1.6435-9/150198245_401599697624263_6382796652237736084_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=_v5Vmsjmg7cAX-6KpUq&_nc_ht=scontent-cdt1-1.xx&oh=00_AT8wNPnd6vDTAfJMvQUZglwUdhGGNoo5kkeoirmGFEL_7w&oe=6239907A" alt="" width="24" height="19">
        <small class="d-block mb-3 text-muted">© 2021–2022</small>
      </div>
      <div class="col-6 col-md">
        <h5>À PROPOS</h5>
        <ul class="list-unstyled text-small">
          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Food Culture Street</a></li>
          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Notre chef</a></li>
          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Nos menus</a></li>
          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Nos producteurs</a></li>
          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">l'Arrière cuisine</a></li>
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>CONTACT</h5>
        <ul class="list-unstyled text-small">
          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Food Culture Street</a></li>
          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">l'Arrière cuisine</a></li>
          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Communication et Évenements</a></li>
          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Carrière</a></li>
        </ul>
      </div>
    </div>
  </footer>
{% endblock %}