{% extends 'base/ebase.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.ename|lower == "snowboard" %}
           <h1><img src="{{ vich_uploader_asset(category, 'iconFile')| imagine_filter('tiny') }}"
               class="mr-3 pb-2">{{category.ename}}</h1>
           <ol>
             <li><a href="{{path('home')}}">Home</a></li>
             <li>{{category.ename}}</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.ename|lower == "snowboard" %}
           {% if img.display == 1 %}
           <div class='card'>
             <header class='ml-2 cardHeader'>{{img.etitle}}</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.ealtText}}" class="img_cat img-fluid">
                 {% else %}
                 <img src="{{ '/build/img/icons/pa_icon.jpg' | imagine_filter('category')}}" alt="{{img.ealtText}}"
                   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.ename|lower == "snowboard" %}
           <h5>{{ categoryText.etitle}}</h5>
           <pre class="pre">
           {{categoryText.etext}} </pre>
           <a href="{{categoryText.elink}}" class="btn btn-ask"><b>{{categoryText.ebutton}}</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.eprice|upper }}</h2>
             <p>{{ section.epriceTitle|upper }}</p>
           </div>
           {% endfor %}
           <div class="row">
             {% for package in packages %}
             {% if package.category.ename|lower == "snowboard" %}
             {% if package.display == 1 %}
             <div class="col-lg-3 col-md-6 mt-4 mt-md-0">
               <div class="box featured" data-aos="zoom-in" data-aos-delay="100">
                 <h3>{{package.ename}}</h3>
                 <h4>{{package.price|format_currency('EUR', {fraction_digit: 0})}}
                   {% if ((package.ename) starts with '2 or 3') or ((package.ename) starts with '2 to 3') %}
                   <span>/ hour</span>
                   {% endif %}</h4>
                 <ul class="priceLine">
                   <li></li>
                   <li>{{package.elineOne}}</li>
                   <li>{{package.elineTwo}}</li>
                   <li>{{package.elineThree}}</li>
                 </ul>
                 <div class="btn-wrap">
                   <a href="{{package.elink}}" class="btn-buy">{{package.ebutton}}</a>
                 </div>
               </div>
             </div>
             {% endif %}
             {% endif %}
             {% endfor %}
           </div>
         </div>
       </section><!-- End Pricing Section -->
     </container>
   </main><!-- End #main -->
   {% endblock %}