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

   {% block title %}snowboard{% endblock %}

   {% block body %}
   <main id="snowboard-page">

     <!-- ======= Breadcrumbs ======= -->
     <section class="breadcrumbs">
       <div class="container">
         <div class="d-flex justify-content-between align-items-center">
           {% for category in categories %}
           {% if category.name|lower == "snowboard" %}
           <h1><img src="{{ vich_uploader_asset(category, 'iconFile')| imagine_filter('tiny') }}"
               class="mr-3 pb-2">{{category.name}}</h1>
           <ol>
             <li><a href="{{path('accueil')}}">Accueil</a></li>
             <li>{{category.name}}</li>
           </ol>
           {% endif %}
           {% endfor %}
         </div>
       </div>
     </section>
     <!-- End Breadcrumbs -->

     <!-- ======= Images Section ======= -->
     <container class="snow-page container">
       <section class="inner-page row d-flex justify-content-around align-content-center">
         <div id="snow_card" class="picture_container col-5">
           {% for img in imgs %}
           {% if img.category.name|lower == "snowboard" %}
           {% if img.display == 1 %}
           <div class='card'>
             <header class='ml-2 cardHeader'>{{img.title}}</header>
             <div class='cardBody'>
                 {% if img.imageName %}
                 <img src="{{ vich_uploader_asset(img, 'imageFile')| imagine_filter('thumb') }}"
                   {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', { src: vich_uploader_asset(img, 'imageFile')| imagine_filter('category') }) }}
                   alt="{{img.altText}}" class="img_cat img-fluid">
                 {% else %}
                 <img src="{{ '/build/img/icons/pa_icon.jpg' | imagine_filter('category')}}" alt="{{img.altText}}"
                   class="img_cat img-fluid">
                 {% endif %}
              </div>
           </div>
           {% endif %}
           {% endif %}
           {% endfor %}
         </div>

         <!-- ======= Text Section ======= -->
         <div class="innertext_container col-lg-7 col-sm-12">
           {% for categoryText in categoryTexts %}
           {% if categoryText.category|lower == "snowboard" %}
           <h5>{{ categoryText.title}}</h5>
           <pre class="pre">
           {{categoryText.text}} </pre>
           <a href="{{categoryText.link}}" class="btn btn-ask"><b>{{categoryText.button}}</b></a>
           {% endif %}
           {% endfor %}
         </div>
       </section>
       <!-- ======= End Text Section ======= -->

       <!-- ======= Pricing Section ======= -->
       <section id="pricing" class="pricing">
         <div class="container">
           {% for section in sections %}
           <div class="section-title" data-aos="zoom-out">
             <h2>{{ section.price|upper }}</h2>
             <p>{{ section.priceTitle|upper }}</p>
           </div>
           {% endfor %}
           <div class="row">
             {% for package in packages %}
             {% if package.category.name|lower == "snowboard" %}
             {% if package.display == 1 %}
             <div class="col-lg-3 col-md-6 mt-4 mt-md-0">
               <div class="snow_pack box featured" data-aos="zoom-in" data-aos-delay="100">
                 <h3>{{package.name}}</h3>
                 <h4>{{package.price|format_currency('EUR', {fraction_digit: 0})}}
                  {% if ((package.name) starts with '2 ou 3') or ((package.name) starts with '2 à 3') %}
                   <span>/ heure</span>
                   {% endif %}</h4>
                 <ul class="priceLine">
                   <li></li>
                   <li>{{package.lineOne}}</li>
                   <li>{{package.lineTwo}}</li>
                   <li>{{package.lineThree}}</li>
                 </ul>
                 <div class="btn-wrap">
                   <a href="{{package.link}}" class="btn-buy">{{package.button}}</a>
                 </div>
               </div>
             </div>
             {% endif %}
             {% endif %}
             {% endfor %}
           </div>
         </div>
       </section><!-- End Pricing Section -->
     </container>
   </main><!-- End #main -->
   {% endblock %}