templates/pages/_includes/details/_cabin-modal-instance.html.twig line 1

Open in your IDE?
  1. {# Instance de modale cabine (un sous-type) #}
  2. <div class="cabin-modal-overlay cabin-modal-instance"
  3. data-cabin-id="{{ cabinTypeId }}"
  4. data-subtype-id="{{ subTypeId }}">
  5. <div class="cabin-modal" id="cabin-modal-{{ cabinTypeId }}-{{ subTypeId }}">
  6. <nav>
  7. <div class="modale-title text-lg-sbd color-secondary-dark">
  8. <div>
  9. {{ getLucidIcon('bed') }}
  10. <span>{{ subTypeName }} - {{ cabinTypeName }}</span>
  11. </div>
  12. <div class="cabin-modal-close" id="close-cabin-modal" aria-label="{{ 'ddd.cabin_modal.close_modal'|trans }}">
  13. {{ getLucidIcon('x') }}
  14. </div>
  15. </div>
  16. </nav>
  18. <div class="box">
  19. <div class="carousel-wrapper" id="cabin-carousel-wrapper">
  20. <div class="carousel-container">
  21. <div class="carousel" id="cabin-carousel-{{ cabinTypeId }}-{{ subTypeId }}">
  22. {% if allPhotos|length > 0 %}
  23. {% for photo in allPhotos %}
  24. {% set finalUrl = photo.url ? photo.url : placeholderImage %}
  25. <div class="carousel-slide">
  26. <img src="{{ finalUrl }}"
  27. alt="{{ subTypeName }}"
  28. class="carousel-media"
  29. onerror="this.onerror=null; this.src='{{ placeholderImage }}';" />
  30. <div class="carousel-label">{{ subTypeName }}</div>
  31. </div>
  32. {% endfor %}
  33. {% else %}
  34. <div class="carousel-slide">
  35. <img src="{{ placeholderImage }}"
  36. alt="{{ 'common.default_image'|trans }}"
  37. class="carousel-media" />
  38. <div class="carousel-label">{{ 'common.default_image'|trans }}</div>
  39. </div>
  40. {% endif %}
  41. </div>
  42. </div>
  43. <button class="carousel-arrow left" aria-label="{{ 'common.previous'|trans }}">{{ getLucidIcon('circle-chevron-left') }}</button>
  44. <button class="carousel-arrow right" aria-label="{{ 'common.next'|trans }}">{{ getLucidIcon('circle-chevron-right') }}</button>
  45. </div>
  47. {% if allPhotos|length > 1 %}
  48. <div class="carousel-thumbnails" id="cabin-thumbnails-{{ cabinTypeId }}-{{ subTypeId }}">
  49. {% for photo in allPhotos %}
  50. {% set finalUrl = photo.url ? photo.url : placeholderImage %}
  51. <div class="thumbnail">
  52. <img src="{{ finalUrl }}"
  53. alt="{{ subTypeName }}"
  54. onerror="this.onerror=null; this.src='{{ placeholderImage }}';" />
  55. </div>
  56. {% endfor %}
  57. </div>
  58. {% elseif allPhotos|length == 0 %}
  59. <div class="carousel-thumbnails" id="cabin-thumbnails-{{ cabinTypeId }}-{{ subTypeId }}">
  60. <div class="thumbnail">
  61. <img src="{{ placeholderImage }}" alt="{{ 'common.default_image'|trans }}" />
  62. </div>
  63. </div>
  64. {% endif %}
  66. <div class="cabin-modal-content-grid">
  67. <div class="cabin-info-column">
  68. <div class="cabin-info">
  69. <div class="cabin-section-title text-sm-md color-secondary-dark">{{ 'ddd.summary.your_cabin'|trans }}</div>
  70. <div class="cabin-description text-xs-md color-secondary-dark cabin-section-content">
  71. {% if subTypeDescription %}
  72. "{{ subTypeDescription|striptags|raw }}"
  73. {% else %}
  74. {{ 'ddd.cabin_modal.default_description'|trans }}
  75. {% endif %}
  76. </div>
  78. <div class="cabin-info-details warning cabin-section-content text-xs-rg color-secondary-dark">
  79. {{ 'details.cabin_modal.warning'|trans }}
  80. </div>
  81. </div>
  82. </div>
  84. <div class="cabin-atmosphere-column">
  85. {% if entityAtmospheres|default([])|length > 0 %}
  86. <div class="cabin-atmospheres-list">
  87. <div class="cabin-section-title text-sm-md color-secondary-dark">{{ 'details.cabin_modal.available_in_atmospheres'|trans({'%count%': entityAtmospheres|length, '%plural%': entityAtmospheres|length > 1 ? 's' : ''}) }}</div>
  88. <div class="atmospheres-container cabin-section-content">
  89. {% for atmosphere in entityAtmospheres %}
  90. <div class="cabin-atmosphere-info">
  91. <div class="atmosphere-desc shimmered">
  92. <div class="title">
  93. <h3 class="atmosphere-name text-sm-bd color-card-background">{{ atmosphere.name|default('') }}</h3>
  94. <div class="atmosphere-marketing-name text-xs-md color-secondary-dark">{{ atmosphere.marketingName|default('')|striptags|raw }}</div>
  95. </div>
  96. <div class="atmosphere-description text-2xs-md color-grey-text">{{ atmosphere.shortDescription|default('')|striptags|raw }}</div>
  97. </div>
  98. </div>
  99. {% endfor %}
  100. </div>
  101. </div>
  102. {% endif %}
  103. </div>
  104. </div>
  105. </div>
  107. <div class="cabin-modal-footer">
  108. <div class="cabin-modal-price">
  109. <span class="price-label text-xl-md color-primary-dark">{{ 'common.from'|trans }}</span>
  110. <span class="price-value text-4xl-bd color-primary-dark" data-default-price="{{ (minPrice ?? 0)|round(0, 'ceil') }}">
  111. {{ (minPrice ?? 0)|number_format(0, ',', ' ') }}€
  112. </span>
  113. <span class="price-per-person text-md-lt color-primary-dark">{{ 'common.per_person_short'|trans }}</span>
  114. </div>
  115. <div class="cabin-modal-actions">
  116. <button class="btn medium cabin-modal-back">
  117. <span>{{ 'common.back'|trans }}</span>
  118. </button>
  119. </div>
  120. </div>
  121. </div>
  122. </div>