templates/facility/partials/facilities-overview.html.twig line 1

Open in your IDE?
  1. <section class="{{ className|default('container content-block') }}">
  2.     <div class="row g-3">
  3.         <div class="col-md-6">
  4.             <div class="live-item live-item--box-shadow h-100">
  5.                 {% if editmode or not pimcore_input('overviewTopTitle').empty %}
  6.                     <div class="live-item__toptitle">
  7.                         {{ pimcore_input('overviewTopTitle', { 'placeholder': 'Top Title' }) }}
  8.                     </div>
  9.                 {% endif %}
  10.                 {% if editmode or not pimcore_input('overviewTitle').empty %}
  11.                     <div class="live-item__title mb-md-3">
  12.                         {{ pimcore_input('overviewTitle', { 'placeholder': 'Title' }) }}
  13.                     </div>
  14.                 {% endif %}
  15.                 <div class="d-flex align-items-center w-100 justify-content-md-between">
  16.                     <div class="d-md-flex flex-column align-items-center d-none">
  17.                         <img width="24" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/flags/ch.svg') }}"
  18.                              alt="{{ ('icon.flag-ch')|trans }}"
  19.                         >
  20.                         <span class="font-default-bold text-primary mt-2 text-nowrap">
  21.                             {{ 'general.zermatt'|trans }}
  22.                         </span>
  23.                     </div>
  24.                     <div class="live-item__directions w-100">
  25.                         <div class="position-relative">
  26.                             <div class="live-item__direction live-item__direction--right {{ connectionByFootIsOpen ? '' : 'is-closed' }}"></div>
  27.                             <span class="live-item__direction__text">
  28.                                 <button type="button" class="btn-popover {{ connectionByFootIsOpen ? 'bg-success' : 'bg-danger' }} ms-1 live-item__direction__button">
  29.                                     <span
  30.                                         class="icon {{ connectionByFootIsOpen ? 'icon-checkmark' : 'icon-close' }} " aria-label="{{ connectionByFootIsOpen ? 'open' : 'closed' }}" title="{{ connectionByFootIsOpen ? 'open' : 'closed' }}">
  31.                                     </span>
  32.                                 </button>
  33.                                 {{ 'facility.overview.by-foot'|trans }}
  34.                             </span>
  35.                             <div class="live-item__direction live-item__direction--left {{ connectionByFootIsOpen ? '' : 'is-closed' }}"></div>
  36.                         </div>
  37.                         <div class="d-flex d-md-none justify-content-between my-3">
  38.                             <div class="d-flex align-items-center">
  39.                                 <img width="24" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/flags/ch.svg') }}"
  40.                                      alt="{{ ('icon.flag-ch')|trans }}"
  41.                                 >
  42.                                 <span class="font-default-bold text-primary text-nowrap ms-2">
  43.                                     {{ 'general.zermatt'|trans }}
  44.                                 </span>
  45.                             </div>
  46.                             <div class="d-flex align-items-center">
  47.                                 <span class="font-default-bold text-primary text-nowrap me-2">
  48.                                     {{ 'general.cervinia'|trans }}
  49.                                 </span>
  50.                                 <img width="24" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/flags/it.svg') }}"
  51.                                      alt="{{ ('icon.flag-it')|trans }}"
  52.                                 >
  53.                             </div>
  54.                         </div>
  55.                         <div class="position-relative mt-md-32">
  56.                             <div class="live-item__direction live-item__direction--right {{ connectionBySkiIsOpen ? '' : 'is-closed' }}"></div>
  57.                             <span class="live-item__direction__text">
  58.                                 <button type="button" class="btn-popover {{ connectionBySkiIsOpen ? 'bg-success' : 'bg-danger' }} ms-1 live-item__direction__button">
  59.                                     <span
  60.                                         class="icon {{ connectionBySkiIsOpen ? 'icon-checkmark' : 'icon-close' }} " aria-label="{{ connectionBySkiIsOpen ? 'open' : 'closed' }}" title="{{ connectionBySkiIsOpen ? 'open' : 'closed' }}">
  61.                                     </span>
  62.                                 </button>
  63.                                 {{ 'facility.overview.by-ski'|trans }}
  64.                             </span>
  65.                             <div class="live-item__direction live-item__direction--left {{ connectionBySkiIsOpen ? '' : 'is-closed' }}"></div>
  66.                         </div>
  67.                     </div>
  69.                     <div class="d-md-flex flex-column align-items-center d-none">
  70.                         <img width="24" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/flags/it.svg') }}"
  71.                              alt="{{ ('icon.flag-it')|trans }}"
  72.                         >
  73.                         <span class="font-default-bold text-primary mt-2 text-nowrap">
  74.                             {{ 'general.cervinia'|trans }}
  75.                         </span>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.         <div class="col-6 col-md-3">
  81.             <div class="live-item live-item--box-shadow h-100">
  82.                 <div>
  83.                     {% if facilitiesCount.openLifts > 0 %}
  84.                         <span class="me-2 ms-1 live-item__status"></span>
  85.                         {{ 'facility.status.open'|trans }}
  86.                     {% else %}
  87.                         <span class="me-2 ms-1 live-item__status is-closed"></span>
  88.                         {{ 'facility.status.closed'|trans }}
  89.                     {% endif %}
  90.                 </div>
  91.                 <div class="live-item__title">{{ 'facility.overview.lifts'|trans }}</div>
  92.                 <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-start">
  93.                     <span class="icon live-item__lift-icon icon-lift"></span>
  94.                     <div class="text-primary mt-2 mt-md-0">
  95.                         <span class="live-item__status-text js-number-count-animation {{ facilitiesCount.openLifts|length == 3 ? 'number-count-animation-digits-3' : facilitiesCount.openLifts|length == 2 ? 'number-count-animation-digits-2' : 'number-count-animation-digits-1'}}"
  96.                               data-number-count-animation-target="{{ facilitiesCount.openLifts }}">0</span>
  97.                         <span class="mx-1">{{ 'facility.overview.of'|trans }}</span>
  98.                         <span class="live-item__status-text">{{ facilitiesCount.totalLifts }}</span>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         </div>
  103.         <div class="col-6 col-md-3">
  104.             <div class="live-item live-item--box-shadow h-100">
  105.                 <div>
  106.                     {% if facilitiesCount.openSlopes > 0 %}
  107.                         <span class="me-2 ms-1 live-item__status"></span>
  108.                         {{ 'facility.status.open'|trans }}
  109.                     {% else %}
  110.                         <span class="me-2 ms-1 live-item__status is-closed"></span>
  111.                         {{ 'facility.status.closed'|trans }}
  112.                     {% endif %}
  113.                 </div>
  114.                 <div class="live-item__title">{{ 'facility.overview.slopes'|trans }}</div>
  115.                 <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-start">
  116.                     <span class="icon live-item__lift-icon icon-slope"></span>
  117.                     <div class="text-primary mt-2 mt-md-0">
  118.                         <span class="live-item__status-text js-number-count-animation {{ facilitiesCount.openSlopes|length == 3 ? 'number-count-animation-digits-3' : facilitiesCount.openSlopes|length == 2 ? 'number-count-animation-digits-2' : 'number-count-animation-digits-1'}}"
  119.                               data-number-count-animation-target="{{ facilitiesCount.openSlopes }}">0</span>
  120.                         <span class="">{{ 'general.km'|trans }}</span>
  121.                     </div>
  122.                 </div>
  123.             </div>
  124.         </div>
  125.     </div>
  126.     {% if editmode %}
  127.         {{ pimcore_link('overview-link', { 'class': 'arrow-link mt-32' }) }}
  128.     {% elseif not pimcore_link('overview-link').empty %}
  129.         <a class="arrow-link mt-32" href="{{ pimcore_link('overview-link').href }}" target="{{ pimcore_link('overview-link').target }}">
  130.             <span>{{ pimcore_link('overview-link').text }}</span>
  131.             <span class="arrow-link__icon icon icon-arrow-right"></span>
  132.         </a>
  133.     {% endif %}
  134. </section>