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

{% block title %}Restos{% endblock %}

{% block body %}
<style>
  
.portfolio-item {
    display: block;
    position: relative;
    overflow: hidden;
    max-width: 530px;
    margin: auto auto 1rem;
}

.portfolio-item .caption {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
}

.portfolio-item .caption .caption-content .cat {
    color: #fff;
    background-color: #D42355!important;
    padding-top: 20px!important;
}

.portfolio-item img {
    padding: 10px;
}

@media (min-width: 992px) {
    .portfolio-item {
        max-width: none;
        margin: 0;
    }
    .portfolio-item .caption {
        transition: background-color 0.7s, -webkit-clip-path 0.25s ease-out;
        transition: clip-path 0.25s ease-out, background-color 0.7s;
        transition: clip-path 0.25s ease-out, background-color 0.7s, -webkit-clip-path 0.25s ease-out;
        -webkit-clip-path: inset(0px);
        clip-path: inset(0px);
    }
    .portfolio-item .caption .caption-content .img {
        /* transition: opacity 0.25s;
      top: 40px;
      left: 20px; */
        display: none;
    }
    .portfolio-item .img-fluid {
        transition: -webkit-clip-path 0.25s ease-out;
        transition: clip-path 0.25s ease-out;
        transition: clip-path 0.25s ease-out, -webkit-clip-path 0.25s ease-out;
        -webkit-clip-path: inset(-1px);
        clip-path: inset(-1px);
    }
    .portfolio-item:hover .img-fluid {
        -webkit-clip-path: inset(2rem);
        clip-path: inset(2rem);
    }
    .portfolio-item:hover .caption {
        background-color: rgba(16, 22, 24, 0.911);
        -webkit-clip-path: inset(2rem);
        clip-path: inset(2rem);
    }
    .portfolio-item:hover .caption .caption-content .img-brand {
        position: absolute;
        z-index: 2;
        display: block!important;
    }
}

</style>
<header class="mobile">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height:100%">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            {% for resto in restos %}
            <div class="carousel-item {% if loop.index == 1 %}active{% endif %}" style="background-image: url('{{ vich_uploader_asset(resto, 'imageFile') }}')"></div>
            {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</header>
<div class="container">
  <section id="" class="fullscreen .d-xl-none mt-3">
          <div class="row">
              <div class="col-12">
                  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="2000">
                      <ol class="carousel-indicators">
                          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                          <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
                      </ol>
                      <div class="carousel-inner">
                          {% for resto in restos %}
                          <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                              <img class="d-block w-100" src="{{ vich_uploader_asset(resto, 'imageFile') }}" alt="{{resto.name}}" style="height: 450px!important;">
                          </div>
                          {% endfor %}
                      </div>
                      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                          <span class="" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                      </a>
                      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                          <span class="" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                      </a>
                  </div>
              </div>
          </div>
      </div>
  </section>
</div>
<section class="content-section" id="portfolio">
    <div class="container">
        <div class="row">
            <!-- single Tem -->
            <div class="col-xl-6 col-lg-4 col-md-6 col-sm-">
                <div class="single-team">
                    <div class="team-img">
                        <img class="img-fluid fullscreen" src="{{asset('img/resto/Restau@2x.png')}}" alt="">
                    </div>
                    <div style="position: relative; margin-top: -145px;" class="team-caption">
                        {% for resto in restos %}
                            {% if 'CAT_REST' in resto.categorie %}
                                {% if resto.logo %}
                                    <a href="{{path('resto_show', {'id': resto.id}) }}">
                                        <img id="pin" class="img img-brand fullscreen mr-2" style="margin-left:60px; width: 41px; top: {{resto.marginTop}}px; left: {{resto.marginLeft}}px;" src="{{ vich_uploader_asset(resto, 'logoFile') }}" alt="">
                                    </a>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-4 col-md-6 col-sm-">
                <div class="single-team">
                <div class="team-img">
                    <img class="img-fluid" src="{{asset('img/resto/Snack@2x.png')}}" alt="">
                </div>
                <div style="position: relative; margin-top: -145px;" class="team-caption">
                        {% for resto in restos %}
                            {% if 'CAT_SNACK' in resto.categorie %}
                                {% if resto.logo %}
                                    <a href="{{path('resto_show', {'id': resto.id}) }}">
                                        <img id="pin" class="img img-brand fullscreen mr-2" style="margin-left:60px; width: 41px; top: {{resto.marginTop}}px; left: {{resto.marginLeft}}px;" src="{{ vich_uploader_asset(resto, 'logoFile') }}" alt="">
                                    </a>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="single-team">
                    <div class="team-img"  >
                        <img width="100%" src="{{asset('img/resto/Coffee@2x.png')}}" alt="">
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div style="position: relative; margin-top: -225px; margin-left:60px" class="team-caption">
                            {% for resto in restos %}
                                {% if 'CAT_CAFE' in resto.categorie %}
                                    {% if resto.logo %}
                                        <a href="{{path('resto_show', {'id': resto.id}) }}">
                                            <img  class="img img-brand fullscreen mr-4" style="width: 130px; top: {{resto.marginTop}}px; left: {{resto.marginLeft}}px;" src="{{ vich_uploader_asset(resto, 'logoFile') }}" alt="">
                                        </a>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}