<div class="owl-carousel owl-loaded mb-3" id="owl-carousel" data-document="{% if document is not null %}{{ document.id }}{% endif %}" data-langue="{% if document is not null %}{{ document.langue }}{% endif %}" {% if bg_color is defined %}data-bg-color="{{bg_color}}"{% endif %} {% if color2 is defined %}data-color2="{{color2}}"{% endif %}>
<div class="d-flex justify-content-center align-items-center">
<div class="owl-prev text-success h1">
<i class="fas fa-chevron-left"></i>
</div>
<div class="owl-stage-outer">
<div class="owl-stage">
{% if document is not null %}
{% set countJours = 0 %}
{% for page in document.documentGeneratorPages|sort((a, b) => a.position <=> b.position) %}
{% if page.template.id == 2 %}
{% set countJours = countJours+1 %}
{% endif %}
<div class="card owl-item owl-item-sortable text-white p-0 {{ page.html is not empty ? 'bg-success' : 'bg-custom-owl' }}" data-position="{{ page.position }}" style="height:52px;" data-document='{{document.id}}' data-id='{{page.id}}' data-type='{{page.template.id}}'>
<div class="card-body p-0">
<p class="text-center font-weight-bold owl-item-title mb-0" style="">
{% if page.template.id == 2 %}J{{ page.numeroPage }}{% else %}{{ page.position }}{% endif %}<br>
</p>
<p class="text-center font-weight-bold mb-0"><span id="title-nav-voyage_document_page_form_libelle_{{ document.id}}_{{ page.id }}">{{ page.libelle|slice(0,8) }}{% if page.libelle|length > 8 %}...{% endif %}</span></p>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
<div class="owl-next text-success h1 pl-2">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<input type="hidden" id="current-nav-page" name="current-nav-page" value="{{ app.session.get('voyage-nav-page') ? app.session.get('voyage-nav-page') : 0 }}">
<div style="display:none;">
<nav class="nav nav-tabs">
{% if document is not null %}
{% for page in document.documentGeneratorPages %}
<a class="nav-item nav-link" href="#p{{ page.id }}" id="page-{{ page.id }}" data-toggle="tab"></a>
{% endfor %}
{% endif %}
</nav>
</div>