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

{% block title %}parapente{% endblock %}

{% block body %}
<main id="paragliding-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 == "parapente" %}
        <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 -->

  <container class="para-page container">
    <section class="inner-page row d-flex justify-content-around align-content-center">
      <!-- ======= Text Section ======= -->
      <div class="innertext_container col-lg-7 col-sm-12">
        {% for categoryText in categoryTexts %}
        {% if categoryText.category|lower == "parapente" %}
        <h5>{{ categoryText.title}}</h5>
        <pre class="pre" id="pre">
        {{categoryText.text}} </pre>
        <a href="{{categoryText.link}}" class="btn btn-ask"><b>{{categoryText.button}}</b></a>
        {% endif %}
        {% endfor %}
      </div>
      <!-- ======= End Text Section ======= -->

      <!-- ======= Images Section ======= -->
      <div id="para_card" class="picture_container col-5">
        {% for img in imgs %}
        {% if img.category.name|lower == "parapente" %}
        {% if img.display == 1 %}
        <div class='card'>
          <header class='ml-2 cardHeader'>{{img.title}}</header>
          <div class='cardBody'>
            <picture>
              {% set path = '/build/img/images/para/' %}
              {% set id = (img.id) %}
              {% set file = '.webp' %}
              {% set filepath = path ~ id ~ file %}
              <source srcset="{{ filepath }}" type="image/webp">
              {% if img.imageName %}
              <source srcset="{{ vich_uploader_asset(img, 'imageFile')| imagine_filter('category')}}" type="image/jpeg"
                class="img_cat img-fluid">
              <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 %}
            </picture>
          </div>
        </div>
        {% endif %}
        {% endif %}
        {% endfor %}
      </div>
      <!-- ======= End Images Section ======= -->
    </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 d-flex justify-content-center">
          {% for package in packages %}
          {% if package.category.name|lower == "parapente" %}
          {% 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.name}}</h3>
              <h4>{{package.price|format_currency('EUR', {fraction_digit: 0})}} {% if (package.name) starts with '2' %}
                <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 %}
{% block javascripts %}
<script>
  //insert hyperlinks in db text
  let text = document.getElementById('pre').innerHTML;
  let result = text.replace('Chaux Fleurie',
    '<a href = "https://www.valleedaulps.com/telesiege-de-chaux-fleurie.html" target="_blank" title="Lien vers la carte du télésiège.">Chaux Fleurie</a>'
    );
  //document.getElementById('pre').innerHTML = result;

  let result2 = result.replace('Lac Intrets',
    '<a href = "https://www.remontees-mecaniques.net/bdd/reportage-tsd4-du-lac-intrets-poma-5413.html" target="_blank" title="Lien vers la carte du télésiège.">lac Intrets</a>'
    );
  document.getElementById('pre').innerHTML = result2;
</script>
{% endblock %}