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

{%block title%} Product | {{parent()}} {%endblock%}

{%block body%}

<!-- *******ESORINA IO IF IS_GRANTED IO A MAX*********
**************************************************** -->
{#%if is_granted('ROLE_ADMIN')%#}
<!-- *************HATRETO****************
**************************************************** -->
<div class="wrapper">
  <div id="carouselExampleIndicators" class="carousel slide">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <div class="page-header header-filter mt-0" style="background:rgba(0,0,0,0.3);">
          <div class="page-header-image" style="background-image: url('{{asset(section7.getWebPath())}}');">
          </div>
          <div class="container pt-0 pb-0">
              {% if app.request.hasPreviousSession %}
                  {% for type, messages in app.session.flashbag.all %}
                      {% for message in messages %}
                      <div class="al1">
                          <div class="alert alert-{{ type }} alert-dismissable mb-0">
                              <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                              {{ message|raw }}
                          </div>
                      </div>
                      {% endfor %}
                  {% endfor %}
              {% endif %}
          </div>
          <div class="content-center text-center">
            <div class="row">
              <div class="col-md-8 ml-auto mr-auto">
                <h1 class="title">{%if section7.subtitle1 is not null%}{{section7.subtitle1}}{%endif%}</h1>
                <h4 class="description text-white">{%if section7.text1 is not null%}{{section7.text1 | raw}}{%endif%}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="page-header header-filter mt-0" style="background:rgba(0,0,0,0.3);">
          <div class="page-header-image" style="background-image: url('{{asset(section8.getWebPath())}}');">
          </div>
          <div class="container pt-0 pb-0">
              {% if app.request.hasPreviousSession %}
                  {% for type, messages in app.session.flashbag.all %}
                      {% for message in messages %}
                      <div class="al1">
                          <div class="alert alert-{{ type }} alert-dismissable mb-0">
                              <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                              {{ message|raw }}
                          </div>
                      </div>
                      {% endfor %}
                  {% endfor %}
              {% endif %}
          </div>
          <div class="content-center">
            <div class="row">
              <div class="col-md-8 ml-auto mr-auto text-center">
                <h1 class="title">{%if section7.subtitle2 is not null%}{{section7.subtitle2}}{%endif%}</h1>
                <h4 class="description text-white">{%if section7.text2 is not null%}{{section7.text2 | raw}}{%endif%}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="page-header header-filter mt-0" style="background:rgba(0,0,0,0.3);">
          <div class="page-header-image" style="background-image: url('{{asset(section14.getWebPath())}}');">
          </div>
          <div class="container pt-0 pb-0">
              {% if app.request.hasPreviousSession %}
                  {% for type, messages in app.session.flashbag.all %}
                      {% for message in messages %}
                      <div class="al1">
                          <div class="alert alert-{{ type }} alert-dismissable mb-0">
                              <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                              {{ message|raw }}
                          </div>
                      </div>
                      {% endfor %}
                  {% endfor %}
              {% endif %}
          </div>
          <div class="content-center text-center">
            <div class="row">
              <div class="col-md-8 ml-auto mr-auto">
                <h1 class="title">{%if section7.subtitle3 is not null%}{{section7.subtitle1}}{%endif%}</h1>
                <h4 class="description text-white">{%if section7.text3 is not null%}{{section7.text3 | raw}}{%endif%}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <i class="fa fa-chevron-left"></i>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <i class="fa fa-chevron-right"></i>
    </a>
  </div>
  <div class="bg-gray">
        <div class="container">
            <ul class="breadcrumb mb-0 pl-0">
                <li class="breadcrumb-item">
                    <a class="link-gray" href="{{ path('imax_site_homepage') }}">Home</a>
                </li>
                <li class="breadcrumb-item active">
                    {{section7.title}}
                </li>
            </ul>
        </div>
    </div>
  <!-- ***********CONTENT*********** -->
  <div class="main">
    <div class="section">
      <div class="container">
        <h2 class="section-title">{%if section14.subtitle1 is not null%}{{section14.subtitle1 | raw}}{%endif%}</h2>
        <div class="row">
          <div class="col-md-3">
            <div class="collapse-panel">
              <div class="card-body">
                <div class="card card-refine card-plain">
                  <h4 class="card-title text-center">
                    {%if section14.text1 is not null%}{{section14.text1 | raw}}{%endif%}
                    <button data-original-title="Reset Filter" class="btn btn-default btn-icon btn-neutral pull-right"
                      rel="tooltip" title="">
                      <i class="arrows-1_refresh-69 now-ui-icons"></i>
                    </button>
                  </h4>
                  <div class="card-header" role="tab" id="headingOne">
                    <h6 class="mb-0">
                      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                        aria-controls="collapseOne">
                        {%if section14.subtitle2 is not null%}{{section14.subtitle2 | raw}}{%endif%}
                        <i class="now-ui-icons arrows-1_minimal-down"></i>
                      </a>
                    </h6>
                  </div>
                  <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                    <div class="card-body">
                      <span id="price-left" class="price-left float-left" data-currency="€">{%if section14.text2 is not null%}{{section14.text2 | raw}}{%endif%}</span>
                      <hr style="width: 50px; margin-top: 15px; margin-left: 55px">
                      <span id="price-right" class="price-right float-right" data-currency="€" style="margin-top: -33px">{%if section14.subtitle3 is not null%}{{section14.subtitle3 | raw}}{%endif%}</span>
                      <div class="clearfix"></div>
                      <div id="sliderRefine" class="slider slider-refine noUi-target noUi-ltr noUi-horizontal">
                      </div>
                    </div>
                    <div class="card-footer text-center" style="background-color: white">
                      {%if is_granted('IS_AUTHENTICATED_FULLY')%}
                      <a href="{{path('imax_site_contact')}}" class="btn btn-info mr-3 text-white">Send a message</a>
                      {%else%}
                      <a data-toggle="modal" data-target="#modalSignUp" href="#" class="btn btn-info mr-3 text-white">Send a message</a>
                      {%endif%}
                    </div>
                    <!-- ******MODAL****** 
                       ************************ -->
                    {% if is_granted('IS_AUTHENTICATED_FULLY') == 0 %}
                    <div class="modal fade" id="modalSignUp" role="dialog" style="padding-right: 17px">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div data-modal="modalSignIn" style="display: block;">
                                    <div class="modal-header">
                                        <h4 class="modal-title">Sign Up as customer</h4>
                                        <button aria-label="Fermer" arria-hidden="true" class="close" data-dismiss="modal" type="button"> &times; </button>
                                    </div>
                                    <div class="modal-body facebook-content">
                                        <div class="mb-3" data-component="facebook-login">
                                            <a class="btn btn-block btn-lg btn-social btn-facebook" data-fb-login-btn="" href="#">
                                                <span class="fab fa-facebook" style="padding-top: 0; margin-top: 0"></span>
                                                <div class="font-size-4">Sign Up with Facebook</div>
                                            </a>
                                        </div>
                                        <div class="strike mb-3"><span>OR</span></div>
                                        <div class="new_signup_form" style="text-align: left">
                                            {{ form_start(form) }}
                                            {{ form_errors(form) }}
                                            <div class="form-group">
                                                {{ form_errors(form.civility) }}
                                                {{ form_widget(form.civility) }}
                                            </div>
                                            <div class="form-group">
                                                {{ form_errors(form.surname) }}
                                                {{ form_widget(form.surname) }}
                                            </div>
                                            <div class="form-group">
                                                {{ form_errors(form.name) }}
                                                {{ form_widget(form.name) }}
                                            </div>
                                            <div class="form-group">
                                                {{ form_errors(form.email) }}
                                                {{ form_widget(form.email) }}
                                            </div>
                                            {{form_errors(form.plainPassword.first)}}
                                            <div class="form-group">
                                                {{form_widget(form.plainPassword.first)}}
                                            </div>
                                            <div class="form-group">
                                                {{form_widget(form.plainPassword.second)}}
                                            </div>
                                            <div class="mt-3 mb-2">
                                                {{form_widget(form.submit)}}
                                            </div>
                                            <div class="">
                                                {{form_widget(form.state)}}
                                                {{form_errors(form.state)}}
                                                {{form_label(form.state)}}
                                            </div>
                                            {{ form_end(form) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {%endif%}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- *******LOOP PRODUCT********
               **************************************** -->
          <div class="col-md-9">
            <div class="row">
              {%for product in last_products%}
              <div class="col-lg-4 col-md-6">
                <div class="card card-product card-plain">
                  <div class="card-image">
                    <a href="{{path('imax_product_by_category',{'slug':product.category.slug})}}">
                      <img src="{{asset(product.getWebPath())}}" alt="{{product.subtitle}}" width="100%" height="100%">
                    </a>
                  </div>
                  <div class="card-body">
                    <a href="#">
                      <h4 class="card-title">{{product.subtitle}}</h4>
                    </a>
                    <p class="card-description">
                      {{product.text | raw}}
                    </p>
                    <div class="card-footer">
                      <div class="price-container">
                        <span class="price price-old">{{product.oldPrice}}</span>
                        <span class="price price-new">{{product.price}}</span>
                      </div>
                      </div>
                  </div>
                </div>
              </div>
              {%endfor%}
            </div>
            <!-- NUMERO DE PAGE -->
            <div class="text-center mt-5">
                <button id="btn" class="btn btn-info load-btn">Load More..</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- *********SECTION********
         ************************************* -->
    <div class="container mb-3">
      <h2 class="section-title">{%if section8.description is not null%}{{section8.description}}{%endif%}</h2>
    </div>
    <div class="projects-4">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6 px-0">
            <div class="card card-fashion card-background" style="background-image: url({{asset(section8.img1 | raw)}}); background-position: 50% center; background-size: cover;">
              <div class="card-body">
                <div class="card-title text-left">
                  <h2>
                    <a href="#">
                      {%if section8.text1 is not null%}{{section8.text1}}{%endif%}
                    </a>
                  </h2>
                </div>
                <div class="card-footer text-left">
                  <div class="stats">
                    <span>
                      <i class="now-ui-icons users_circle-08"></i>{%if section8.subtitle1 is not null%}{{section8.subtitle1}}{%endif%}
                    </span>
                    <span>
                      <i class="now-ui-icons tech_watch-time"></i> {%if section8.date is not null%} {{section8.date | date('M d, Y')}} {%endif%}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 px-0">
            <div class="card-container">
              <div class="card card-fashion">
                <div class="card-title">
                  <a href="#pablo">
                  </a>
                  <h4>
                    <a href="#"></a>
                    <a href="#">
                      {%if section8.text2 is not null%}{{section8.text2}}{%endif%}
                    </a>
                  </h4>

                </div>
                <div class="card-body">
                  <div class="card-footer text-left">
                    <div class="stats">
                      <span>
                        <i class="now-ui-icons users_circle-08"></i>{%if section8.subtitle1 is not null%}{{section8.subtitle1}}{%endif%}
                      </span>
                      <span>
                        <i class="now-ui-icons tech_watch-time"></i> {%if section8.date is not null%} {{section8.date | date('M d, Y')}} {%endif%}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card card-fashion card-background"
                style="background-image: url({{asset(section8.img2 | raw)}}); background-position: 50% center; background-size: cover;">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ***************LATEST OFFERS*************** -->
    <div class="section mt-5">
      <div class="container">
        <h2 class="section-title">Latest Offers</h2>
        <div class="row">
          {%for product in lastProducts%}
          <div class="col-md-4">
            <div class="card card-product card-plain">
              <div class="card-image">
                  <a href="{{path('imax_product_by_category',{'slug':product.category.slug})}}"><img class="img rounded" src="{{asset(product.getWebPath())}}" alt="{{product.subtitle}}" width="100%"></a>
              </div>
              <div class="card-body">
                <h4 class="card-title">
                  <a href="#pablo">{{product.subtitle}}</a>
                </h4>
                <p class="card-description">{{product.text | raw}}</p>
                <div class="card-footer">
                  <div class="price-container">
                    <span class="price price-old">{{product.oldPrice}}</span>
                    <span class="price price-new">{{product.price}}</span>
                  </div>
                 </div>
              </div>
            </div>
          </div>
          {%endfor%}
        </div>
      </div>
    </div>
  </div>
<!-- *******ESORINA IO ELSE KATRAMIN' IO ENDIF IO A MAX*********
**************************************************************************** -->
{#%else%#}
<!-- <p class="available text-warning">This page is not again available!</p> -->
{#%endif%#}
<!-- *********************HATRETO*********************
***************************************************************************** -->
{%endblock%}
{%block javascripts%}
<script>
    $("#list").loadMore({
        selector: 'li',
        loadBtn: '#btn',
        limit: 3,
        load: 3,
        animate: true,
        animateIn: 'fadeInUp'
    });
</script>
{%endblock%}