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

{% block title %}Asfalt Erken Uyarı Sistemi{% endblock %}


{% block body %}


            <video autoplay muted loop  class="login-video">
              <source src="{{ asset('assets/video/video.mp4') }}" type="video/mp4">
            </video>

            <div class="login-form-container">
              <div class="login">
                        <div class="row">
                              <div class="col-md-4 col-12 left text-center">

                                

                                    <form class="signin" action="{{ url('login') }}" method="post" autocomplete="off" id="login-form">

                                      {% if error %}
                                      <div class="alert alert-danger">
                                      {{ error.messageKey|trans }}
                                      </div>
                                      {% endif %}
                                      
                                      {% for message in app.flashes('danger') %}
                                      <div class="alert alert-danger">
                                      {{ message }}
                                      </div>
                                      {% endfor %}
                                      {% for message in app.flashes('logout') %}
                                      <div class="alert alert-success">
                                      {{ message }}
                                      </div>
                                      {% endfor %}
                        
                                          <i class="fa fa-lock fa-4x"></i>
                                          <h1>ADES LOGIN</h1>
                                        
                                          <div class="form-group">
                                                <i class="fa fa-user"></i>
                                               <input type="text" name="_username" class="form-control" placeholder="Username / E-mail" required />
                                          </div>
                                          <div class="form-group">
                                                <i class="fa fa-lock"></i>
                                                <input type="password" name="_password"  class="form-control" placeholder="Password" required />
                                          </div>

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

                                          <button type="submit" class="btn btn-purple btn-block" >Sign in</button>
                                          

<div class="authent ">

  <img src="{{ asset('assets/images/loading.svg') }}" /> Authenticating... 
  
</div>

                                    </form>

                              </div>
                              <div class="col-md-8 right d-none d-sm-none d-md-block">
                                    <div id="slider" class="carousel slide" data-ride="carousel">
                                          <div class="carousel-inner">
                                                <div class="carousel-item active" style="background-image:url({{ asset('assets/images/slider-1.jpeg') }});">

                                                      <div class="carousel-caption">
                                                            <h1>İSTANBUL</h1>
                                                            <ul>
                                                                  
                                                      {% for Item in IST.forecasts|slice(0,7) %}

                                                          <li>
                                                              <span>{{ Item.day }}</span>
                                                              <img src="{{ icons[Item.text] }}" />
                                                              <strong>{{ Item.high }}°C</strong>
                                                              <small>{{ Item.low }}°C</small>
                                                          </li>

                                                      {% endfor %}
                                                      
                                                      

                                                                        
                                                                
                                                            </ul>
                                                      </div>
                                                </div>
                                                <div class="carousel-item " style="background-image:url({{ asset('assets/images/slider-2.jpeg') }});">

                                                      <div class="carousel-caption">
                                                            <h1>İZMİR</h1>
                                                            <ul>
                                                                {% for Item in IZM.forecasts|slice(0,7) %}
                                                                  
                                                                  <li>
                                                                  <span>{{ Item.day }}</span>
                                                                  <img src="{{ icons[Item.text] }}" />
                                                                  <strong>{{ Item.high }}°C</strong>
                                                                  <small>{{ Item.low }}°C</small>
                                                                  </li>
                                                                  
                                                                {% endfor %}
                                                            </ul>
                                                      </div>
                                                </div>
                                                <div class="carousel-item " style="background-image:url({{ asset('assets/images/slider-3.jpeg') }});">

                                                      <div class="carousel-caption">
                                                            <h1>ANKARA</h1>
                                                            <ul>
                                                                  {% for Item in ANK.forecasts|slice(0,7) %}
                                                                  
                                                                  <li>
                                                                  <span>{{ Item.day }}</span>
                                                                  <img src="{{ icons[Item.text] }}" />
                                                                  <strong>{{ Item.high }}°C</strong>
                                                                  <small>{{ Item.low }}°C</small>
                                                                  </li>
                                                                  
                                                                 {% endfor %}
                                                            </ul>
                                                      </div>
                                                </div>
                                          </div>
                                    </div>



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


{% endblock %}

{% block js %}

        <script>
              $('#slider').carousel({
              interval: 4000
              });
        </script>  

{% endblock %}