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


    {% block stylesheets %}

    {# Favicons #}
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/img/logo/m.png')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/img/logo/m.png')}}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/img/logo/m.png')}}">
    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('assets/img/logo/m.png')}}">
    <link rel="manifest" href="{{ asset('assets/img/favicons/manifest.json')}}">

    {# lib #}
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <link href="{{ asset('assets/lib/loaders.css/loaders.min.css')}}" rel="stylesheet">
    <!-- <link
        href="https://fonts.googleapis.com/css?family=PT+Mono%7cPT+Serif:400,400i%7cEpitet:100,300,400,700,800,900"
        rel="stylesheet"> -->
    <!-- <link href="{{ asset('assets/lib/remodal/remodal.css')}}" rel="stylesheet">
    <link href="{{ asset('assets/lib/remodal/remodal-default-theme.css')}}" rel="stylesheet"> -->
    <link href="{{ asset('assets/lib/owl.carousel/owl.carousel.css')}}" rel="stylesheet">
    <link href="{{ asset('assets/lib/lightbox2/css/lightbox.css')}}" rel="stylesheet">
    <link href="{{ asset('assets/lib/semantic-ui-accordion/accordion.min.css')}}" rel="stylesheet">
    <link href="{{ asset('assets/lib/semantic-ui-transition/transition.min.css')}}" rel="stylesheet">




    {# CSS Global #}
    <link href="{{ asset('assets/css/theme.css') }}" rel="stylesheet" type="text/css" media="all" />

    {% endblock %}

{% block header %}

{% endblock %}

{% block body %}
</section>
<!-- ============================================-->
<!-- Preloader ==================================-->
<div class="preloader" id="preloader">
  <img src="{{asset('assets/img/logo/m.png')}}" class="img-fluid pb-4" width="80" style="height:auto!important">
  <div class="loader">
    <div class="line-scale-pulse-out-rapid">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>
<!-- ============================================-->
<!-- End of Preloader ===========================-->

<!-- ============================================-->
<!-- <section> begin ============================-->
<section class="py-0 bg-light" id="page-coming-soon">

  <div class="container-fluid">
    <div class="row">
      <div
        class="col-lg-6 px-0 order-lg-2 min-vh-40 min-vh-sm-50 min-vh-lg-100 align-items-center justify-content-center text-center">
        <div class="position-relative h-100" data-zanim-lg='{"animation":"slide-left","delay":0.4}'
          data-zanim-trigger="scroll">
          <div class="bg-holder bg-overlay bg-warning" id="parallax" data-zanim-trigger="scroll"
            data-zanim-lg='{"animation":"zoom-out","delay":0}'
            style='opacity: 0.2;background-image: url("assets/img/app/exterior.jpg");'>


          </div>
          <!--/.bg-holder-->

        </div>
      </div>
      <div class="col-lg-6 bg-light py-5 py-lg-7 order-1 order-sm-1">
        <div class="row h-100 align-items-center justify-content-center text-center">
          <div class="col-lg-10 col-xl-8" data-zanim-timeline='{"delay":0.4}' data-zanim-trigger="scroll">
            <h3 class='mb-4'>
            </h3>
            <a class="mb-4" href="{{path('index')}}">
              <img src="{{ asset('assets/img/logo/moreno.png')}}" alt="" width="280"
                data-zanim-xs='{"delay":0.1,"animation":"zoom-in"}' />
            </a>
            <!-- Form -->
            <form class="form-login" action="{{ path('login') }}" method='post'
              style='border-radius:0.1875rem;background-color:transparent'>

              {# Heading #}
              <h4 class="font-weight-light text-uppercase text-center mt-4 mb-4" data-toggle="animation"
                data-animation="fadeUp" data-animation-order="2" data-animation-trigger="load">
                Welcome
              </h4>

              <!-- Email -->
              <div class="form-group" data-zanim-xs='{"delay":0.2,"animation":"zoom-in"}'>


                <input class='form-control' type="text" name="_username" value="{{ last_username }}"
                  placeholder='E-mail'>

              </div>

              <!-- Password -->
              <div class="form-group" style='background-color:transparent'
                data-zanim-xs='{"delay":0.2,"animation":"zoom-in"}'>



                <input class='form-control' type="password" name="_password" placeholder='Password'>

              </div>

              {% if error %}
              <div class='mb-3'>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
              {% endif %}


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

                <div class="col-md">

                  <!-- Button -->
                  <button class="form-control text-center text-md-center login"
                    data-zanim-xs='{"delay":0.2,"animation":"zoom-in"}' type="submit"
                    style='box-shadow: 0 1px 4px 0 #fafafa;border:none;'>

                    <p class="login" style='-webkit-appearance:none;border:none;'>Sign in<span class="d-inline-block"
                        style='color:#fd7e14;'>&xrarr;</span></p>
                  </button>

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

              <!-- Link -->
              <p class="text-center text-muted mt-2 mb-0 font-weight-bold">
                <small class="text-sans-serif">
                  <span>Any issue? </span> <a class="text-dark" href="mailto:steveumuhire@gmail.com">Contact an
                    administrator</a>.
                </small>
              </p>

            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end of .container-->

</section>
<!-- <section> close ============================-->
<!-- ============================================-->

{% endblock %}

{% block footer %}

{% endblock %}

    {% block javascripts %}



    {# Jquery #}
    <!-- <script src="{{ asset('assets/js/jquery.min.js')}}" async></script> -->
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- cdnjs -->
    {# <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.plugins.min.js"
        crossorigin="anonymous"></script> #}



    <script src="https://kit.fontawesome.com/528623a9de.js" crossorigin="anonymous"></script>


    <script src="{{ asset('assets/js/popper.min.js')}}"></script>
    <script src="{{ asset('assets/js/bootstrap.js')}}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD14GRtbNv-6U9nSRZcDZTAnLgCP57Il5w"
        type="text/javascript"></script>

    {# JS Lib #}
    <script src="{{ asset('assets/lib/loaders.css/loaders.css.js')}}"></script>
    <script src="{{ asset('assets/lib/remodal/remodal.js')}}"></script>
    <script src="{{ asset('assets/lib/owl.carousel/owl.carousel.js')}}"></script>
    <script src="{{ asset('assets/lib/lightbox2/js/lightbox.js')}}"></script>
    <script src="{{ asset('assets/lib/isotope-layout/isotope.pkgd.min.js')}}"></script>
    <script src="{{ asset('assets/lib/isotope-packery/packery-mode.pkgd.min.js')}}"></script>

    {# JS Plugins #}
    <script src="{{ asset('assets/js/list.min.js') }}"></script>
    <script src="{{ asset('assets/js/autosize.min.js') }}"></script>


    <script src="{{ asset('assets/js/stickyfill.min.js')}}"></script>
    <script src="{{ asset('assets/js/rellax.min.js')}}"></script>
    <script src="{{ asset('assets/js/progressbar.min.js')}}"></script>
    <script src="{{ asset('assets/js/imagesloaded.pkgd.js')}}"></script>
    <script src="{{ asset('assets/js/CustomEase.js')}}"></script>
    <script src="{{ asset('assets/js/DrawSVGPlugin.js')}}"></script>
    <script src="{{ asset('assets/js/fontawesome-all.js')}}"></script>
    <script src="{{ asset('assets/js/ScrollToPlugin.js')}}"></script>
    <script src="{{ asset('assets/js/TweenMax.js')}}"></script>
    <script src="{{ asset('assets/js/jquery.lazy.min.js')}}"></script>
    <script src="{{ asset('assets/js/jquery.lazy.plugins.js')}}"></script>

    <script src="{{ asset('assets/js/map.js')}}"></script>
    {# <script src="{{ asset('assets/js/map.min.js')}}"></script> #}
    <script src="{{ asset('assets/lib/semantic-ui-accordion/accordion.min.js')}}"></script>
    <script src="{{ asset('assets/lib/semantic-ui-transition/transition.min.js')}}"></script>


    {# JS global #}
    <script src="{{ asset('assets/js/theme.js')}}" async></script>





    {# <script>
        document.getElementById("client_form_logo").required = false;
    </script> #}

    <script src="{{ asset('assets/js/a2lix_sf_collection.min.js') }}"></script>

    <script type="text/javascript">
        a2lix_lib.sfCollection.init({
            collectionsSelector: 'form div[data-prototype]',
            manageRemoveEntry: true
        })
    </script>


    {% endblock %}