custom/plugins/C108Hotspots/src/Resources/views/storefront/element/cms-element-hotspots.html.twig line 1

Open in your IDE?
  1. {% block element_hotspots %}
  2.     {% set id = element.id %}
  3.     {% set legend =  element.config.legend.value %}
  4.     {% set c108hdesign = element.config.c108hdesign.value %}
  5.     {% set c108hnrhotspots = element.config.c108hnrhotspots.value %}
  6.     {% set currMediaId = element.config.media.value %}
  7.     {% set currMediaCollection = searchMedia([currMediaId], context.context) %}
  8.     {% set currMediaObject = currMediaCollection.get(currMediaId) %}
  9.     {% set currImgPath = currMediaObject.url %}
  10.     {% set currImgAlt = currMediaObject.translated.alt %}
  11.     {% set currImgTitle = currMediaObject.translated.title %}
  12.     {% set c108hhighlightcol = element.config.c108hhighlightcol.value %}
  13.     {% set c108htitle01 = element.config.c108htitle01.value %}
  14.     {% set c108htitle02 = element.config.c108htitle02.value %}
  15.     {% set c108htitle03 = element.config.c108htitle03.value %}
  16.     {% set c108htitle04 = element.config.c108htitle04.value %}
  17.     {% set c108htitle05 = element.config.c108htitle05.value %}
  18.     {% set c108htitle06 = element.config.c108htitle06.value %}
  19.     {% set c108hdescr01 = element.config.c108hdescr01.value %}
  20.     {% set c108hdescr02 = element.config.c108hdescr02.value %}
  21.     {% set c108hdescr03 = element.config.c108hdescr03.value %}
  22.     {% set c108hdescr04 = element.config.c108hdescr04.value %}
  23.     {% set c108hdescr05 = element.config.c108hdescr05.value %}
  24.     {% set c108hdescr06 = element.config.c108hdescr06.value %}
  25.     {% set c108hlink01bool = element.config.c108hlink01bool.value %}
  26.     {% set c108hlink02bool = element.config.c108hlink02bool.value %}
  27.     {% set c108hlink03bool = element.config.c108hlink03bool.value %}
  28.     {% set c108hlink04bool = element.config.c108hlink04bool.value %}
  29.     {% set c108hlink05bool = element.config.c108hlink05bool.value %}
  30.     {% set c108hlink06bool = element.config.c108hlink06bool.value %}
  31.     {% set c108hlink01internal = element.config.c108hlink01internal.value %}
  32.     {% set c108hlink02internal = element.config.c108hlink02internal.value %}
  33.     {% set c108hlink03internal = element.config.c108hlink03internal.value %}
  34.     {% set c108hlink04internal = element.config.c108hlink04internal.value %}
  35.     {% set c108hlink05internal = element.config.c108hlink05internal.value %}
  36.     {% set c108hlink06internal = element.config.c108hlink06internal.value %}
  37.     {% set c108hlink01url = element.config.c108hlink01url.value %}
  38.     {% set c108hlink02url = element.config.c108hlink02url.value %}
  39.     {% set c108hlink03url = element.config.c108hlink03url.value %}
  40.     {% set c108hlink04url = element.config.c108hlink04url.value %}
  41.     {% set c108hlink05url = element.config.c108hlink05url.value %}
  42.     {% set c108hlink06url = element.config.c108hlink06url.value %}
  43.     {% set c108hlink01title = element.config.c108hlink01title.value %}
  44.     {% set c108hlink02title = element.config.c108hlink02title.value %}
  45.     {% set c108hlink03title = element.config.c108hlink03title.value %}
  46.     {% set c108hlink04title = element.config.c108hlink04title.value %}
  47.     {% set c108hlink05title = element.config.c108hlink05title.value %}
  48.     {% set c108hlink06title = element.config.c108hlink06title.value %}
  49.     {% set c108hmarker01xpos = element.config.c108hmarker01xpos.value %}
  50.     {% set c108hmarker01ypos = element.config.c108hmarker01ypos.value %}
  51.     {% set c108hmarker02xpos = element.config.c108hmarker02xpos.value %}
  52.     {% set c108hmarker02ypos = element.config.c108hmarker02ypos.value %}
  53.     {% set c108hmarker03xpos = element.config.c108hmarker03xpos.value %}
  54.     {% set c108hmarker03ypos = element.config.c108hmarker03ypos.value %}
  55.     {% set c108hmarker04xpos = element.config.c108hmarker04xpos.value %}
  56.     {% set c108hmarker04ypos = element.config.c108hmarker04ypos.value %}
  57.     {% set c108hmarker05xpos = element.config.c108hmarker05xpos.value %}
  58.     {% set c108hmarker05ypos = element.config.c108hmarker05ypos.value %}
  59.     {% set c108hmarker06xpos = element.config.c108hmarker06xpos.value %}
  60.     {% set c108hmarker06ypos = element.config.c108hmarker06ypos.value %}
  61.     {% set c108hhoverpos01 = element.config.c108hhoverpos01.value %}
  62.     {% set c108hhoverpos02 = element.config.c108hhoverpos02.value %}
  63.     {% set c108hhoverpos03 = element.config.c108hhoverpos03.value %}
  64.     {% set c108hhoverpos04 = element.config.c108hhoverpos04.value %}
  65.     {% set c108hhoverpos05 = element.config.c108hhoverpos05.value %}
  66.     {% set c108hhoverpos06 = element.config.c108hhoverpos06.value %}
  68.     {# EXTENDED #}
  70.     {% set c108htitle07 = element.config.c108htitle07.value %}
  71.     {% set c108htitle08 = element.config.c108htitle08.value %}
  72.     {% set c108htitle09 = element.config.c108htitle09.value %}
  73.     {% set c108htitle10 = element.config.c108htitle10.value %}
  74.     {% set c108htitle11 = element.config.c108htitle11.value %}
  75.     {% set c108htitle12 = element.config.c108htitle12.value %}
  76.     {% set c108htitle13 = element.config.c108htitle13.value %}
  77.     {% set c108htitle14 = element.config.c108htitle14.value %}
  79.     {% set c108hdescr07 = element.config.c108hdescr07.value %}
  80.     {% set c108hdescr08 = element.config.c108hdescr08.value %}
  81.     {% set c108hdescr09 = element.config.c108hdescr09.value %}
  82.     {% set c108hdescr10 = element.config.c108hdescr10.value %}
  83.     {% set c108hdescr11 = element.config.c108hdescr11.value %}
  84.     {% set c108hdescr12 = element.config.c108hdescr12.value %}
  85.     {% set c108hdescr13 = element.config.c108hdescr13.value %}
  86.     {% set c108hdescr14 = element.config.c108hdescr14.value %}
  88.     {% set c108hlink07bool = element.config.c108hlink07bool.value %}
  89.     {% set c108hlink08bool = element.config.c108hlink08bool.value %}
  90.     {% set c108hlink09bool = element.config.c108hlink09bool.value %}
  91.     {% set c108hlink10bool = element.config.c108hlink10bool.value %}
  92.     {% set c108hlink11bool = element.config.c108hlink11bool.value %}
  93.     {% set c108hlink12bool = element.config.c108hlink12bool.value %}
  94.     {% set c108hlink13bool = element.config.c108hlink13bool.value %}
  95.     {% set c108hlink14bool = element.config.c108hlink14bool.value %}
  98.     {% set c108hlink07internal = element.config.c108hlink07internal.value %}
  99.     {% set c108hlink08internal = element.config.c108hlink08internal.value %}
  100.     {% set c108hlink09internal = element.config.c108hlink09internal.value %}
  101.     {% set c108hlink10internal = element.config.c108hlink10internal.value %}
  102.     {% set c108hlink11internal = element.config.c108hlink11internal.value %}
  103.     {% set c108hlink12internal = element.config.c108hlink12internal.value %}
  104.     {% set c108hlink13internal = element.config.c108hlink13internal.value %}
  105.     {% set c108hlink14internal = element.config.c108hlink14internal.value %}
  107.     {% set c108hlink07url = element.config.c108hlink07url.value %}
  108.     {% set c108hlink08url = element.config.c108hlink08url.value %}
  109.     {% set c108hlink09url = element.config.c108hlink09url.value %}
  110.     {% set c108hlink10url = element.config.c108hlink10url.value %}
  111.     {% set c108hlink11url = element.config.c108hlink11url.value %}
  112.     {% set c108hlink12url = element.config.c108hlink12url.value %}
  113.     {% set c108hlink13url = element.config.c108hlink13url.value %}
  114.     {% set c108hlink14url = element.config.c108hlink14url.value %}
  117.     {% set c108hlink07title = element.config.c108hlink07title.value %}
  118.     {% set c108hlink08title = element.config.c108hlink08title.value %}
  119.     {% set c108hlink09title = element.config.c108hlink09title.value %}
  120.     {% set c108hlink10title = element.config.c108hlink10title.value %}
  121.     {% set c108hlink11title = element.config.c108hlink11title.value %}
  122.     {% set c108hlink12title = element.config.c108hlink12title.value %}
  123.     {% set c108hlink13title = element.config.c108hlink13title.value %}
  124.     {% set c108hlink14title = element.config.c108hlink14title.value %}
  126.     {% set c108hmarker07xpos = element.config.c108hmarker07xpos.value %}
  127.     {% set c108hmarker07ypos = element.config.c108hmarker07ypos.value %}
  128.     {% set c108hmarker08xpos = element.config.c108hmarker08xpos.value %}
  129.     {% set c108hmarker08ypos = element.config.c108hmarker08ypos.value %}
  130.     {% set c108hmarker09xpos = element.config.c108hmarker09xpos.value %}
  131.     {% set c108hmarker09ypos = element.config.c108hmarker09ypos.value %}
  132.     {% set c108hmarker10xpos = element.config.c108hmarker10xpos.value %}
  133.     {% set c108hmarker10ypos = element.config.c108hmarker10ypos.value %}
  134.     {% set c108hmarker11xpos = element.config.c108hmarker11xpos.value %}
  135.     {% set c108hmarker11ypos = element.config.c108hmarker11ypos.value %}
  136.     {% set c108hmarker12xpos = element.config.c108hmarker12xpos.value %}
  137.     {% set c108hmarker12ypos = element.config.c108hmarker12ypos.value %}
  138.     {% set c108hmarker13xpos = element.config.c108hmarker13xpos.value %}
  139.     {% set c108hmarker13ypos = element.config.c108hmarker13ypos.value %}
  140.     {% set c108hmarker14xpos = element.config.c108hmarker14xpos.value %}
  141.     {% set c108hmarker14ypos = element.config.c108hmarker14ypos.value %}
  143.     {% set c108hhoverpos07 = element.config.c108hhoverpos07.value %}
  144.     {% set c108hhoverpos08 = element.config.c108hhoverpos08.value %}
  145.     {% set c108hhoverpos09 = element.config.c108hhoverpos09.value %}
  146.     {% set c108hhoverpos10 = element.config.c108hhoverpos10.value %}
  147.     {% set c108hhoverpos11 = element.config.c108hhoverpos11.value %}
  148.     {% set c108hhoverpos12 = element.config.c108hhoverpos12.value %}
  149.     {% set c108hhoverpos13 = element.config.c108hhoverpos13.value %}
  150.     {% set c108hhoverpos14 = element.config.c108hhoverpos14.value %}
  152.     <div id="{{ id }}-hfi-wrapper" class="c108-hfi-wrapper {{ c108hdesign }}"  {%  if legend %}display-legend{% endif %}>
  153.        {% if legend %}
  154.         <div class="hfi-legend-container">
  155.             <ul class="hfi-legend">
  156.                 <li class="hfi-legend-item"><span class="hfi-number">1</span>{{ c108htitle01 }}</li>
  157.                 {% if c108hnrhotspots >= 2 %}
  158.                 <li class="hfi-legend-item"> <span class="hfi-number">2</span>{{ c108htitle02 }}</li>
  159.                 {% endif %}
  160.                 {% if c108hnrhotspots >= 3 %}
  161.                     <li class="hfi-legend-item"><span class="hfi-number">3</span>{{ c108htitle03 }}</li>
  162.                 {% endif %}
  163.                 {% if c108hnrhotspots >= 4 %}
  164.                     <li class="hfi-legend-item"><span class="hfi-number">4</span>{{ c108htitle04 }}</li>
  165.                 {% endif %}
  166.                 {% if c108hnrhotspots >= 5 %}
  167.                     <li class="hfi-legend-item"><span class="hfi-number">5</span>{{ c108htitle05 }}</li>
  168.                 {% endif %}
  169.                 {% if c108hnrhotspots >= 6 %}
  170.                     <li class="hfi-legend-item"><span class="hfi-number">6</span>{{ c108htitle06 }}</li>
  171.                 {% endif %}
  172.                 {% if c108hnrhotspots >= 7 %}
  173.                     <li class="hfi-legend-item"><span class="hfi-number">7</span>{{ c108htitle07 }}</li>
  174.                 {% endif %}
  175.                 {% if c108hnrhotspots >= 8 %}
  176.                     <li class="hfi-legend-item"><span class="hfi-number">8</span>{{ c108htitle08 }}</li>
  177.                 {% endif %}
  178.                 {% if c108hnrhotspots >= 9 %}
  179.                     <li class="hfi-legend-item"><span class="hfi-number">9</span>{{ c108htitle09 }}</li>
  180.                 {% endif %}
  181.                 {% if c108hnrhotspots >= 10 %}
  182.                     <li class="hfi-legend-item"><span class="hfi-number">10</span>{{ c108htitle10 }}</li>
  183.                 {% endif %}
  184.                 {% if c108hnrhotspots >= 11 %}
  185.                     <li class="hfi-legend-item"><span class="hfi-number">11</span>{{ c108htitle11 }}</li>
  186.                 {% endif %}
  187.                 {% if c108hnrhotspots >= 12 %}
  188.                     <li class="hfi-legend-item"><span class="hfi-number">12</span>{{ c108htitle12 }}</li>
  189.                 {% endif %}
  190.                 {% if c108hnrhotspots >= 13 %}
  191.                     <li class="hfi-legend-item"><span class="hfi-number">13</span>{{ c108htitle13 }}</li>
  192.                 {% endif %}
  193.                 {% if c108hnrhotspots >= 14 %}
  194.                     <li class="hfi-legend-item"><span class="hfi-number">14</span>{{ c108htitle14 }}</li>
  195.                 {% endif %}
  196.             </ul>
  197.         </div>
  198.         {% endif %}
  199.         <div class="c108-hfi-inner">
  200.             <img class="c108-hfi-bgimg" src="{{ currImgPath }}" alt="{{ currImgAlt }}" title="{{ currImgTitle }}">
  202.             {% if element.config.mainUrl.value %}
  203.                 <a href="{{ element.config.mainUrl.value }}" class="sw-cms-el-marker-link"></a>
  204.             {% endif %}
  205.             {# Desktop version #}
  206.             {# Marker element 1 #}
  207.             <div id="{{ id }}-c108-hfi-element-01"
  208.                  style="top: {{ c108hmarker01ypos }}%; left: {{ c108hmarker01xpos }}%;"
  209.                  class="c108-hfi-element {{ c108hhoverpos01 }}">
  210.                 <div class="c108-hfi-element-inner" style="position:relative;">
  211.                     <div data-element-id="{{ id }}" class="c108-hfi-marker"
  212.                          style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">1</span><span
  213.                                 class="hfi-plus">+</span></div>
  214.                     <div id="{{ id }}-explanation-01" class="c108-hfi-explanation desktop">
  215.                         <span class="c108-hfi-explanation-close">×</span>
  216.                         <img src="{{ element.config.mediaMarkerUrl.value[1] }}" alt="{{ c108hlink01title }}">
  217.                         <span class="expl-title">{{ c108htitle01 }}</span>
  218.                         {% if  c108hdescr01 %}<p>{{ c108hdescr01 }}</p> {% endif %}
  219.                         {% if c108hlink01bool %}
  220.                             {% if c108hlink01internal == false %}
  221.                                 <a class="btn btn-primary" href="{{ c108hlink01url }}"
  222.                                    title="{{ c108hlink01title }}">{{ c108hlink01title }}</a>
  223.                             {% else %}
  224.                                 <a class="btn btn-primary" href="{{ c108hlink01url }}" rel="noopener" target="_blank"
  225.                                    title="{{ c108hlink01title }}">{{ c108hlink01title }}</a>
  226.                             {% endif %}
  227.                         {% endif %}
  228.                     </div>
  229.                 </div>
  230.             </div>
  232.             {# Marker element 2 #}
  233.             {% if c108hnrhotspots >= 2 %}
  234.                 <div id="{{ id }}-c108-hfi-element-02"
  235.                      style="top: {{ c108hmarker02ypos }}%; left: {{ c108hmarker02xpos }}%;"
  236.                      class="c108-hfi-element {{ c108hhoverpos02 }}">
  237.                     <div class="c108-hfi-element-inner" style="position:relative;">
  238.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  239.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">2</span><span
  240.                                     class="hfi-plus">+</span></div>
  241.                         <div id="{{ id }}-explanation-02" class="c108-hfi-explanation desktop">
  242.                             <span class="c108-hfi-explanation-close">×</span>
  243.                             <img src="{{ element.config.mediaMarkerUrl.value[2] }}" alt="{{ c108hlink02title }}">
  245.                             <span class="expl-title">{{ c108htitle02 }}</span>
  246.                             <p>{{ c108hdescr02 }}</p>
  247.                             {% if c108hlink02bool %}
  248.                                 {% if c108hlink02internal == false %}
  249.                                     <a class="btn btn-primary" href="{{ c108hlink02url }}"
  250.                                        title="{{ c108hlink02title }}">{{ c108hlink02title }}</a>
  251.                                 {% else %}
  252.                                     <a class="btn btn-primary" href="{{ c108hlink02url }}" rel="noopener"
  253.                                        target="_blank" title="{{ c108hlink02title }}">{{ c108hlink02title }}</a>
  254.                                 {% endif %}
  255.                             {% endif %}
  256.                         </div>
  257.                     </div>
  258.                 </div>
  259.             {% endif %}
  261.             {# Marker element 3 #}
  262.             {% if c108hnrhotspots >= 3 %}
  263.                 <div id="{{ id }}-c108-hfi-element-03"
  264.                      style="top: {{ c108hmarker03ypos }}%; left: {{ c108hmarker03xpos }}%;"
  265.                      class="c108-hfi-element {{ c108hhoverpos03 }}">
  266.                     <div class="c108-hfi-element-inner" style="position:relative;">
  267.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  268.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">3</span><span
  269.                                     class="hfi-plus">+</span></div>
  270.                         <div id="{{ id }}-explanation-03" class="c108-hfi-explanation desktop">
  271.                             <span class="c108-hfi-explanation-close">×</span>
  272.                             <img src="{{ element.config.mediaMarkerUrl.value[3] }}" alt="{{ c108hlink03title }}">
  274.                             <span class="expl-title">{{ c108htitle03 }}</span>
  275.                             <p>{{ c108hdescr03 }}</p>
  276.                             {% if c108hlink03bool %}
  277.                                 {% if c108hlink03internal == false %}
  278.                                     <a class="btn btn-primary" href="{{ c108hlink03url }}"
  279.                                        title="{{ c108hlink03title }}">{{ c108hlink03title }}</a>
  280.                                 {% else %}
  281.                                     <a class="btn btn-primary" href="{{ c108hlink03url }}" rel="noopener"
  282.                                        target="_blank" title="{{ c108hlink03title }}">{{ c108hlink03title }}</a>
  283.                                 {% endif %}
  284.                             {% endif %}
  285.                         </div>
  286.                     </div>
  287.                 </div>
  288.             {% endif %}
  290.             {# Marker element 4 #}
  291.             {% if c108hnrhotspots >= 4 %}
  292.                 <div id="{{ id }}-c108-hfi-element-04"
  293.                      style="top: {{ c108hmarker04ypos }}%; left: {{ c108hmarker04xpos }}%;"
  294.                      class="c108-hfi-element {{ c108hhoverpos04 }}">
  295.                     <div class="c108-hfi-element-inner" style="position:relative;">
  296.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  297.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">4</span><span
  298.                                     class="hfi-plus">+</span></div>
  299.                         <div id="{{ id }}-explanation-04" class="c108-hfi-explanation desktop">
  300.                             <span class="c108-hfi-explanation-close">×</span>
  301.                             <img src="{{ element.config.mediaMarkerUrl.value[4] }}" alt="{{ c108hlink04title }}">
  303.                             <span class="expl-title">{{ c108htitle04 }}</span>
  304.                             <p>{{ c108hdescr04 }}</p>
  305.                             {% if c108hlink04bool %}
  306.                                 {% if c108hlink04internal == false %}
  307.                                     <a class="btn btn-primary" href="{{ c108hlink04url }}"
  308.                                        title="{{ c108hlink04title }}">{{ c108hlink04title }}</a>
  309.                                 {% else %}
  310.                                     <a class="btn btn-primary" href="{{ c108hlink04url }}" rel="noopener"
  311.                                        target="_blank" title="{{ c108hlink04title }}">{{ c108hlink04title }}</a>
  312.                                 {% endif %}
  313.                             {% endif %}
  314.                         </div>
  315.                     </div>
  316.                 </div>
  317.             {% endif %}
  319.             {# Marker element 5 #}
  320.             {% if c108hnrhotspots >= 5 %}
  321.                 <div id="{{ id }}-c108-hfi-element-05"
  322.                      style="top: {{ c108hmarker05ypos }}%; left: {{ c108hmarker05xpos }}%;"
  323.                      class="c108-hfi-element {{ c108hhoverpos05 }}">
  324.                     <div class="c108-hfi-element-inner" style="position:relative;">
  325.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  326.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">5</span><span
  327.                                     class="hfi-plus">+</span></div>
  328.                         <div id="{{ id }}-explanation-05" class="c108-hfi-explanation desktop">
  329.                             <span class="c108-hfi-explanation-close" >×</span>
  330.                             <img src="{{ element.config.mediaMarkerUrl.value[5] }}" alt="{{ c108hlink05title }}">
  332.                             <span class="expl-title">{{ c108htitle05 }}</span>
  333.                             <p>{{ c108hdescr05 }}</p>
  334.                             {% if c108hlink05bool %}
  335.                                 {% if c108hlink05internal == false %}
  336.                                     <a class="btn btn-primary" href="{{ c108hlink05url }}"
  337.                                        title="{{ c108hlink05title }}">{{ c108hlink05title }}</a>
  338.                                 {% else %}
  339.                                     <a class="btn btn-primary" href="{{ c108hlink05url }}" rel="noopener"
  340.                                        target="_blank" title="{{ c108hlink05title }}">{{ c108hlink05title }}</a>
  341.                                 {% endif %}
  342.                             {% endif %}
  343.                         </div>
  344.                     </div>
  345.                 </div>
  346.             {% endif %}
  348.             {# Marker element 6 #}
  349.             {% if c108hnrhotspots >= 6 %}
  350.                 <div id="{{ id }}-c108-hfi-element-06"
  351.                      style="top: {{ c108hmarker06ypos }}%; left: {{ c108hmarker06xpos }}%;"
  352.                      class="c108-hfi-element {{ c108hhoverpos06 }}">
  353.                     <div class="c108-hfi-element-inner" style="position:relative;">
  354.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  355.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">6</span><span
  356.                                     class="hfi-plus">+</span></div>
  357.                         <div id="{{ id }}-explanation-06" class="c108-hfi-explanation desktop">
  358.                             <span class="c108-hfi-explanation-close" >×</span>
  359.                             <img src="{{ element.config.mediaMarkerUrl.value[6] }}" alt="{{ c108hlink06title }}">
  361.                             <span class="expl-title">{{ c108htitle06 }}</span>
  362.                             <p>{{ c108hdescr06 }}</p>
  363.                             {% if c108hlink06bool %}
  364.                                 {% if c108hlink06internal == false %}
  365.                                     <a class="btn btn-primary" href="{{ c108hlink06url }}"
  366.                                        title="{{ c108hlink06title }}">{{ c108hlink06title }}</a>
  367.                                 {% else %}
  368.                                     <a class="btn btn-primary" href="{{ c108hlink06url }}" rel="noopener"
  369.                                        target="_blank" title="{{ c108hlink06title }}">{{ c108hlink06title }}</a>
  370.                                 {% endif %}
  371.                             {% endif %}
  372.                         </div>
  373.                     </div>
  374.                 </div>
  375.             {% endif %}
  377.             {# Marker element 7 #}
  378.             {% if c108hnrhotspots >= 7 %}
  379.                 <div id="{{ id }}-c108-hfi-element-07"
  380.                      style="top: {{ c108hmarker07ypos }}%; left: {{ c108hmarker07xpos }}%;"
  381.                      class="c108-hfi-element {{ c108hhoverpos07 }}">
  382.                     <div class="c108-hfi-element-inner" style="position:relative;">
  383.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  384.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">7</span><span
  385.                                     class="hfi-plus">+</span></div>
  386.                         <div id="{{ id }}-explanation-07" class="c108-hfi-explanation desktop">
  387.                             <span class="c108-hfi-explanation-close" >×</span>
  388.                             <img src="{{ element.config.mediaMarkerUrl.value[7] }}" alt="{{ c108hlink07title }}">
  389.                             <span class="expl-title">{{ c108htitle07 }}</span>
  390.                             {% if  c108hdescr07 %}<p>{{ c108hdescr07 }}</p> {% endif %}
  391.                             {% if c108hlink07bool %}
  392.                                 {% if c108hlink07internal == false %}
  393.                                     <a class="btn btn-primary" href="{{ c108hlink07url }}"
  394.                                        title="{{ c108hlink07title }}">{{ c108hlink01title }}</a>
  395.                                 {% else %}
  396.                                     <a class="btn btn-primary" href="{{ c108hlink07url }}" rel="noopener"
  397.                                        target="_blank"
  398.                                        title="{{ c108hlink07title }}">{{ c108hlink07title }}</a>
  399.                                 {% endif %}
  400.                             {% endif %}
  401.                         </div>
  402.                     </div>
  403.                 </div>
  404.             {% endif %}
  406.             {# Marker element 8 #}
  407.             {% if c108hnrhotspots >= 8 %}
  408.                 <div id="{{ id }}-c108-hfi-element-08"
  409.                      style="top: {{ c108hmarker08ypos }}%; left: {{ c108hmarker08xpos }}%;"
  410.                      class="c108-hfi-element {{ c108hhoverpos08 }}">
  411.                     <div class="c108-hfi-element-inner" style="position:relative;">
  412.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  413.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">8</span><span
  414.                                     class="hfi-plus">+</span></div>
  415.                         <div id="{{ id }}-explanation-08" class="c108-hfi-explanation desktop">
  416.                             <span class="c108-hfi-explanation-close" >×</span>
  417.                             <img src="{{ element.config.mediaMarkerUrl.value[8] }}" alt="{{ c108hlink08title }}">
  418.                             <span class="expl-title">{{ c108htitle08 }}</span>
  419.                             {% if  c108hdescr08 %}<p>{{ c108hdescr08 }}</p> {% endif %}
  420.                             {% if c108hlink08bool %}
  421.                                 {% if c108hlink08internal == false %}
  422.                                     <a class="btn btn-primary" href="{{ c108hlink08url }}"
  423.                                        title="{{ c108hlink08title }}">{{ c108hlink08title }}</a>
  424.                                 {% else %}
  425.                                     <a class="btn btn-primary" href="{{ c108hlink08url }}" rel="noopener"
  426.                                        target="_blank"
  427.                                        title="{{ c108hlink08title }}">{{ c108hlink08title }}</a>
  428.                                 {% endif %}
  429.                             {% endif %}
  430.                         </div>
  431.                     </div>
  432.                 </div>
  433.             {% endif %}
  435.             {# Marker element 9 #}
  436.             {% if c108hnrhotspots >= 9 %}
  437.                 <div id="{{ id }}-c108-hfi-element-09"
  438.                      style="top: {{ c108hmarker09ypos }}%; left: {{ c108hmarker09xpos }}%;"
  439.                      class="c108-hfi-element {{ c108hhoverpos09 }}">
  440.                     <div class="c108-hfi-element-inner" style="position:relative;">
  441.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  442.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">9</span><span
  443.                                     class="hfi-plus">+</span></div>
  444.                         <div id="{{ id }}-explanation-09" class="c108-hfi-explanation desktop">
  445.                             <span class="c108-hfi-explanation-close">×</span>
  446.                             <img src="{{ element.config.mediaMarkerUrl.value[9] }}" alt="{{ c108hlink08title }}">
  447.                             <span class="expl-title">{{ c108htitle09 }}</span>
  448.                             {% if  c108hdescr09 %}<p>{{ c108hdescr09 }}</p> {% endif %}
  449.                             {% if c108hlink09bool %}
  450.                                 {% if c108hlink09internal == false %}
  451.                                     <a class="btn btn-primary" href="{{ c108hlink09url }}"
  452.                                        title="{{ c108hlink09title }}">{{ c108hlink09title }}</a>
  453.                                 {% else %}
  454.                                     <a class="btn btn-primary" href="{{ c108hlink09url }}" rel="noopener"
  455.                                        target="_blank"
  456.                                        title="{{ c108hlink09title }}">{{ c108hlink09title }}</a>
  457.                                 {% endif %}
  458.                             {% endif %}
  459.                         </div>
  460.                     </div>
  461.                 </div>
  462.             {% endif %}
  464.             {# Marker element 10 #}
  465.             {% if c108hnrhotspots >= 10 %}
  466.                 <div id="{{ id }}-c108-hfi-element-10"
  467.                      style="top: {{ c108hmarker10ypos }}%; left: {{ c108hmarker10xpos }}%;"
  468.                      class="c108-hfi-element {{ c108hhoverpos10 }}">
  469.                     <div class="c108-hfi-element-inner" style="position:relative;">
  470.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  471.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">10</span><span
  472.                                     class="hfi-plus">+</span></div>
  473.                         <div id="{{ id }}-explanation-10" class="c108-hfi-explanation desktop">
  474.                             <span class="c108-hfi-explanation-close" >×</span>
  475.                             <img src="{{ element.config.mediaMarkerUrl.value[10] }}" alt="{{ c108hlink10title }}">
  476.                             <span class="expl-title">{{ c108htitle10 }}</span>
  477.                             {% if  c108hdescr10 %}<p>{{ c108hdescr10 }}</p> {% endif %}
  478.                             {% if c108hlink10bool %}
  479.                                 {% if c108hlink10internal == false %}
  480.                                     <a class="btn btn-primary" href="{{ c108hlink10url }}"
  481.                                        title="{{ c108hlink10title }}">{{ c108hlink10title }}</a>
  482.                                 {% else %}
  483.                                     <a class="btn btn-primary" href="{{ c108hlink10url }}" rel="noopener"
  484.                                        target="_blank"
  485.                                        title="{{ c108hlink10title }}">{{ c108hlink10title }}</a>
  486.                                 {% endif %}
  487.                             {% endif %}
  488.                         </div>
  489.                     </div>
  490.                 </div>
  491.             {% endif %}
  493.             {# Marker element 11 #}
  494.             {% if c108hnrhotspots >= 11 %}
  495.                 <div id="{{ id }}-c108-hfi-element-11"
  496.                      style="top: {{ c108hmarker11ypos }}%; left: {{ c108hmarker11xpos }}%;"
  497.                      class="c108-hfi-element {{ c108hhoverpos11 }}">
  498.                     <div class="c108-hfi-element-inner" style="position:relative;">
  499.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  500.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">11</span><span
  501.                                     class="hfi-plus">+</span></div>
  502.                         <div id="{{ id }}-explanation-11" class="c108-hfi-explanation desktop">
  503.                             <span class="c108-hfi-explanation-close">×</span>
  504.                             <img src="{{ element.config.mediaMarkerUrl.value[11] }}" alt="{{ c108hlink11title }}">
  505.                             <span class="expl-title">{{ c108htitle11 }}</span>
  506.                             {% if  c108hdescr11 %}<p>{{ c108hdescr11 }}</p> {% endif %}
  507.                             {% if c108hlink11bool %}
  508.                                 {% if c108hlink11internal == false %}
  509.                                     <a class="btn btn-primary" href="{{ c108hlink11url }}"
  510.                                        title="{{ c108hlink11title }}">{{ c108hlink11title }}</a>
  511.                                 {% else %}
  512.                                     <a class="btn btn-primary" href="{{ c108hlink11url }}" rel="noopener"
  513.                                        target="_blank"
  514.                                        title="{{ c108hlink11title }}">{{ c108hlink11title }}</a>
  515.                                 {% endif %}
  516.                             {% endif %}
  517.                         </div>
  518.                     </div>
  519.                 </div>
  520.             {% endif %}
  522.             {# Marker element 12 #}
  523.             {% if c108hnrhotspots >= 12 %}
  524.                 <div id="{{ id }}-c108-hfi-element-12"
  525.                      style="top: {{ c108hmarker12ypos }}%; left: {{ c108hmarker12xpos }}%;"
  526.                      class="c108-hfi-element {{ c108hhoverpos12 }}">
  527.                     <div class="c108-hfi-element-inner" style="position:relative;">
  528.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  529.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">12</span><span
  530.                                     class="hfi-plus">+</span></div>
  531.                         <div id="{{ id }}-explanation-12" class="c108-hfi-explanation desktop">
  532.                             <span class="c108-hfi-explanation-close">×</span>
  533.                             <img src="{{ element.config.mediaMarkerUrl.value[12] }}" alt="{{ c108hlink12title }}">
  534.                             <span class="expl-title">{{ c108htitle12 }}</span>
  535.                             {% if  c108hdescr12 %}<p>{{ c108hdescr12 }}</p> {% endif %}
  536.                             {% if c108hlink12bool %}
  537.                                 {% if c108hlink12internal == false %}
  538.                                     <a class="btn btn-primary" href="{{ c108hlink12url }}"
  539.                                        title="{{ c108hlink12title }}">{{ c108hlink12title }}</a>
  540.                                 {% else %}
  541.                                     <a class="btn btn-primary" href="{{ c108hlink12url }}" rel="noopener"
  542.                                        target="_blank"
  543.                                        title="{{ c108hlink12title }}">{{ c108hlink12title }}</a>
  544.                                 {% endif %}
  545.                             {% endif %}
  546.                         </div>
  547.                     </div>
  548.                 </div>
  549.             {% endif %}
  551.             {# Marker element 13 #}
  552.             {% if c108hnrhotspots >= 13 %}
  553.                 <div id="{{ id }}-c108-hfi-element-13"
  554.                      style="top: {{ c108hmarker13ypos }}%; left: {{ c108hmarker13xpos }}%;"
  555.                      class="c108-hfi-element {{ c108hhoverpos13 }}">
  556.                     <div class="c108-hfi-element-inner" style="position:relative;">
  557.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  558.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">13</span><span
  559.                                     class="hfi-plus">+</span></div>
  560.                         <div id="{{ id }}-explanation-13" class="c108-hfi-explanation desktop">
  561.                             <span class="c108-hfi-explanation-close" >×</span>
  562.                             <img src="{{ element.config.mediaMarkerUrl.value[13] }}" alt="{{ c108hlink13title }}">
  563.                             <span class="expl-title">{{ c108htitle13 }}</span>
  564.                             {% if  c108hdescr13 %}<p>{{ c108hdescr13 }}</p> {% endif %}
  565.                             {% if c108hlink13bool %}
  566.                                 {% if c108hlink13internal == false %}
  567.                                     <a class="btn btn-primary" href="{{ c108hlink13url }}"
  568.                                        title="{{ c108hlink13title }}">{{ c108hlink13title }}</a>
  569.                                 {% else %}
  570.                                     <a class="btn btn-primary" href="{{ c108hlink13url }}" rel="noopener"
  571.                                        target="_blank"
  572.                                        title="{{ c108hlink13title }}">{{ c108hlink13title }}</a>
  573.                                 {% endif %}
  574.                             {% endif %}
  575.                         </div>
  576.                     </div>
  577.                 </div>
  578.             {% endif %}
  580.             {# Marker element 14 #}
  581.             {% if c108hnrhotspots >= 14 %}
  582.                 <div id="{{ id }}-c108-hfi-element-14"
  583.                      style="top: {{ c108hmarker14ypos }}%; left: {{ c108hmarker14xpos }}%;"
  584.                      class="c108-hfi-element {{ c108hhoverpos14 }}">
  585.                     <div class="c108-hfi-element-inner" style="position:relative;">
  586.                         <div data-element-id="{{ id }}" class="c108-hfi-marker"
  587.                              style="background-color:{{ c108hhighlightcol }}"><span class="hfi-num">14</span>
  588.                             <span
  589.                                     class="hfi-plus">+</span></div>
  590.                         <div id="{{ id }}-explanation-14" class="c108-hfi-explanation desktop">
  591.                             <span class="c108-hfi-explanation-close">×</span>
  592.                             <img src="{{ element.config.mediaMarkerUrl.value[14] }}" alt="{{ c108hlink14title }}">
  593.                             <span class="expl-title">{{ c108htitle14 }}</span>
  594.                             {% if  c108hdescr14 %}<p>{{ c108hdescr14 }}</p> {% endif %}
  595.                             {% if c108hlink14bool %}
  596.                                 {% if c108hlink11internal == false %}
  597.                                     <a class="btn btn-primary" href="{{ c108hlink14url }}"
  598.                                        title="{{ c108hlink14title }}">{{ c108hlink14title }}</a>
  599.                                 {% else %}
  600.                                     <a class="btn btn-primary" href="{{ c108hlink14url }}" rel="noopener"
  601.                                        target="_blank"
  602.                                        title="{{ c108hlink14title }}">{{ c108hlink14title }}</a>
  603.                                 {% endif %}
  604.                             {% endif %}
  605.                         </div>
  606.                     </div>
  607.                 </div>
  608.             {% endif %}
  610.             {# Mobile version #}
  611.             <div class="hfi-mobile-explanation-box">
  613.                 {# Marker element 1 #}
  614.                 <div id="{{ id }}-explanation-mobile-01" class="c108-hfi-explanation mobile">
  615.                     <span class="c108-hfi-explanation-close">×</span>
  616.                     <img src="{{ element.config.mediaMarkerUrl.value[1] }}" alt="{{ c108hlink01title }}">
  617.                     <span class="expl-title">{{ c108htitle01 }}</span>
  618.                     {% if  c108hdescr01 %}<p>{{ c108hdescr01 }}</p> {% endif %}
  619.                     {% if c108hlink01bool %}
  620.                         {% if c108hlink01internal == false %}
  621.                             <a class="btn btn-primary" href="{{ c108hlink01url }}"
  622.                                title="{{ c108hlink01title }}">{{ c108hlink01title }}</a>
  623.                         {% else %}
  624.                             <a class="btn btn-primary" href="{{ c108hlink01url }}" rel="noopener" target="_blank"
  625.                                title="{{ c108hlink01title }}">{{ c108hlink01title }}</a>
  626.                         {% endif %}
  627.                     {% endif %}
  628.                 </div>
  630.                 {# Marker element 2 #}
  631.                 {% if c108hnrhotspots >= 2 %}
  633.                     <div id="{{ id }}-explanation-mobile-02" class="c108-hfi-explanation mobile">
  634.                         <span class="c108-hfi-explanation-close">×</span>
  635.                         <img src="{{ element.config.mediaMarkerUrl.value[2] }}" alt="{{ c108hlink02title }}">
  637.                         <span class="expl-title">{{ c108htitle02 }}</span>
  638.                         <p>{{ c108hdescr02 }}</p>
  639.                         {% if c108hlink02bool %}
  640.                             {% if c108hlink02internal == false %}
  641.                                 <a class="btn btn-primary" href="{{ c108hlink02url }}"
  642.                                    title="{{ c108hlink02title }}">{{ c108hlink02title }}</a>
  643.                             {% else %}
  644.                                 <a class="btn btn-primary" href="{{ c108hlink02url }}" rel="noopener"
  645.                                    target="_blank" title="{{ c108hlink02title }}">{{ c108hlink02title }}</a>
  646.                             {% endif %}
  647.                         {% endif %}
  648.                     </div>
  649.                 {% endif %}
  650.                 {# Marker element 3 #}
  651.                 {% if c108hnrhotspots >= 3 %}
  653.                     <div id="{{ id }}-explanation-mobile-03" class="c108-hfi-explanation mobile">
  654.                         <span class="c108-hfi-explanation-close" >×</span>
  655.                         <img src="{{ element.config.mediaMarkerUrl.value[3] }}" alt="{{ c108hlink03title }}">
  657.                         <span class="expl-title">{{ c108htitle03 }}</span>
  658.                         <p>{{ c108hdescr03 }}</p>
  659.                         {% if c108hlink03bool %}
  660.                             {% if c108hlink03internal == false %}
  661.                                 <a class="btn btn-primary" href="{{ c108hlink03url }}"
  662.                                    title="{{ c108hlink03title }}">{{ c108hlink03title }}</a>
  663.                             {% else %}
  664.                                 <a class="btn btn-primary" href="{{ c108hlink03url }}" rel="noopener"
  665.                                    target="_blank" title="{{ c108hlink03title }}">{{ c108hlink03title }}</a>
  666.                             {% endif %}
  667.                         {% endif %}
  668.                     </div>
  669.                 {% endif %}
  670.                 {# Marker element 4 #}
  671.                 {% if c108hnrhotspots >= 4 %}
  673.                     <div id="{{ id }}-explanation-mobile-04" class="c108-hfi-explanation mobile">
  674.                         <span class="c108-hfi-explanation-close">×</span>
  675.                         <img src="{{ element.config.mediaMarkerUrl.value[4] }}" alt="{{ c108hlink04title }}">
  677.                         <span class="expl-title">{{ c108htitle04 }}</span>
  678.                         <p>{{ c108hdescr04 }}</p>
  679.                         {% if c108hlink04bool %}
  680.                             {% if c108hlink04internal == false %}
  681.                                 <a class="btn btn-primary" href="{{ c108hlink04url }}"
  682.                                    title="{{ c108hlink04title }}">{{ c108hlink04title }}</a>
  683.                             {% else %}
  684.                                 <a class="btn btn-primary" href="{{ c108hlink04url }}" rel="noopener"
  685.                                    target="_blank" title="{{ c108hlink04title }}">{{ c108hlink04title }}</a>
  686.                             {% endif %}
  687.                         {% endif %}
  688.                     </div>
  689.                 {% endif %}
  690.                 {# Marker element 5 #}
  691.                 {% if c108hnrhotspots >= 2 %}
  693.                     <div id="{{ id }}-explanation-mobile-05" class="c108-hfi-explanation mobile">
  694.                         <span class="c108-hfi-explanation-close">×</span>
  695.                         <img src="{{ element.config.mediaMarkerUrl.value[5] }}" alt="{{ c108hlink05title }}">
  697.                         <span class="expl-title">{{ c108htitle05 }}</span>
  698.                         <p>{{ c108hdescr05 }}</p>
  699.                         {% if c108hlink05bool %}
  700.                             {% if c108hlink05internal == false %}
  701.                                 <a class="btn btn-primary" href="{{ c108hlink05url }}"
  702.                                    title="{{ c108hlink05title }}">{{ c108hlink05title }}</a>
  703.                             {% else %}
  704.                                 <a class="btn btn-primary" href="{{ c108hlink05url }}" rel="noopener"
  705.                                    target="_blank" title="{{ c108hlink05title }}">{{ c108hlink05title }}</a>
  706.                             {% endif %}
  707.                         {% endif %}
  708.                     </div>
  709.                 {% endif %}
  710.                 {# Marker element 6 #}
  711.                 {% if c108hnrhotspots >= 6 %}
  713.                     <div id="{{ id }}-explanation-mobile-06" class="c108-hfi-explanation mobile">
  714.                         <span class="c108-hfi-explanation-close">×</span>
  715.                         <img src="{{ element.config.mediaMarkerUrl.value[6] }}" alt="{{ c108hlink06title }}">
  717.                         <span class="expl-title">{{ c108htitle06 }}</span>
  718.                         <p>{{ c108hdescr06 }}</p>
  719.                         {% if c108hlink06bool %}
  720.                             {% if c108hlink06internal == false %}
  721.                                 <a class="btn btn-primary" href="{{ c108hlink06url }}"
  722.                                    title="{{ c108hlink06title }}">{{ c108hlink06title }}</a>
  723.                             {% else %}
  724.                                 <a class="btn btn-primary" href="{{ c108hlink06url }}" rel="noopener"
  725.                                    target="_blank" title="{{ c108hlink06title }}">{{ c108hlink06title }}</a>
  726.                             {% endif %}
  727.                         {% endif %}
  728.                     </div>
  729.                 {% endif %}
  730.                 {# Marker element 7 #}
  731.                 {% if c108hnrhotspots >= 7 %}
  733.                     <div id="{{ id }}-explanation-mobile-07" class="c108-hfi-explanation mobile">
  734.                         <span class="c108-hfi-explanation-close">×</span>
  735.                         <img src="{{ element.config.mediaMarkerUrl.value[7] }}" alt="{{ c108hlink07title }}">
  736.                         <span class="expl-title">{{ c108htitle07 }}</span>
  737.                         {% if  c108hdescr07 %}<p>{{ c108hdescr07 }}</p> {% endif %}
  738.                         {% if c108hlink07bool %}
  739.                             {% if c108hlink07internal == false %}
  740.                                 <a class="btn btn-primary" href="{{ c108hlink07url }}"
  741.                                    title="{{ c108hlink07title }}">{{ c108hlink01title }}</a>
  742.                             {% else %}
  743.                                 <a class="btn btn-primary" href="{{ c108hlink07url }}" rel="noopener"
  744.                                    target="_blank"
  745.                                    title="{{ c108hlink07title }}">{{ c108hlink07title }}</a>
  746.                             {% endif %}
  747.                         {% endif %}
  748.                     </div>
  749.                 {% endif %}
  750.                 {# Marker element 8 #}
  751.                 {% if c108hnrhotspots >= 8 %}
  753.                     <div id="{{ id }}-explanation-mobile-08" class="c108-hfi-explanation mobile">
  754.                         <span class="c108-hfi-explanation-close">×</span>
  755.                         <img src="{{ element.config.mediaMarkerUrl.value[8] }}" alt="{{ c108hlink08title }}">
  756.                         <span class="expl-title">{{ c108htitle08 }}</span>
  757.                         {% if  c108hdescr08 %}<p>{{ c108hdescr08 }}</p> {% endif %}
  758.                         {% if c108hlink08bool %}
  759.                             {% if c108hlink08internal == false %}
  760.                                 <a class="btn btn-primary" href="{{ c108hlink08url }}"
  761.                                    title="{{ c108hlink08title }}">{{ c108hlink08title }}</a>
  762.                             {% else %}
  763.                                 <a class="btn btn-primary" href="{{ c108hlink08url }}" rel="noopener"
  764.                                    target="_blank"
  765.                                    title="{{ c108hlink08title }}">{{ c108hlink08title }}</a>
  766.                             {% endif %}
  767.                         {% endif %}
  768.                     </div>
  769.                 {% endif %}
  770.                 {# Marker element 9 #}
  771.                 {% if c108hnrhotspots >= 9 %}
  773.                     <div id="{{ id }}-explanation-mobile-09" class="c108-hfi-explanation mobile">
  774.                         <span class="c108-hfi-explanation-close">×</span>
  775.                         <img src="{{ element.config.mediaMarkerUrl.value[9] }}" alt="{{ c108hlink08title }}">
  776.                         <span class="expl-title">{{ c108htitle09 }}</span>
  777.                         {% if  c108hdescr09 %}<p>{{ c108hdescr09 }}</p> {% endif %}
  778.                         {% if c108hlink09bool %}
  779.                             {% if c108hlink09internal == false %}
  780.                                 <a class="btn btn-primary" href="{{ c108hlink09url }}"
  781.                                    title="{{ c108hlink09title }}">{{ c108hlink09title }}</a>
  782.                             {% else %}
  783.                                 <a class="btn btn-primary" href="{{ c108hlink09url }}" rel="noopener"
  784.                                    target="_blank"
  785.                                    title="{{ c108hlink09title }}">{{ c108hlink09title }}</a>
  786.                             {% endif %}
  787.                         {% endif %}
  788.                     </div>
  789.                 {% endif %}
  790.                 {# Marker element 10 #}
  791.                 {% if c108hnrhotspots >= 10 %}
  793.                     <div id="{{ id }}-explanation-mobile-10" class="c108-hfi-explanation mobile">
  794.                         <span class="c108-hfi-explanation-close">×</span>
  795.                         <span class="expl-title">{{ c108htitle10 }}</span>
  796.                         <p>{{ c108hdescr10 }}</p>
  797.                         {% if c108hlink10bool %}
  798.                             {% if c108hlink10internal == false %}
  799.                                 <a style="color:{{ c108hhighlightcol }};" href="{{ c108hlink10url }}"
  800.                                    title="{{ c108hlink10title }}">{{ c108hlink10title }}</a>
  801.                             {% else %}
  802.                                 <a style="color:{{ c108hhighlightcol }};" href="{{ c108hlink10url }}" rel="noopener"
  803.                                    target="_blank" title="{{ c108hlink10title }}">{{ c108hlink10title }}</a>
  804.                             {% endif %}
  805.                         {% endif %}
  806.                     </div>
  807.                 {% endif %}
  808.                 {# Marker element 11 #}
  809.                 {% if c108hnrhotspots >= 11 %}
  811.                     <div id="{{ id }}-explanation-mobile-11" class="c108-hfi-explanation mobile">
  812.                         <span class="c108-hfi-explanation-close" >×</span>
  813.                         <img src="{{ element.config.mediaMarkerUrl.value[11] }}" alt="{{ c108hlink11title }}">
  814.                         <span class="expl-title">{{ c108htitle11 }}</span>
  815.                         {% if  c108hdescr11 %}<p>{{ c108hdescr11 }}</p> {% endif %}
  816.                         {% if c108hlink11bool %}
  817.                             {% if c108hlink11internal == false %}
  818.                                 <a class="btn btn-primary" href="{{ c108hlink11url }}"
  819.                                    title="{{ c108hlink11title }}">{{ c108hlink11title }}</a>
  820.                             {% else %}
  821.                                 <a class="btn btn-primary" href="{{ c108hlink11url }}" rel="noopener"
  822.                                    target="_blank"
  823.                                    title="{{ c108hlink11title }}">{{ c108hlink11title }}</a>
  824.                             {% endif %}
  825.                         {% endif %}
  826.                     </div>
  827.                 {% endif %}
  828.                 {# Marker element 12 #}
  829.                 {% if c108hnrhotspots >= 12 %}
  831.                     <div id="{{ id }}-explanation-mobile-12" class="c108-hfi-explanation mobile">
  832.                         <span class="c108-hfi-explanation-close">×</span>
  833.                         <img src="{{ element.config.mediaMarkerUrl.value[12] }}" alt="{{ c108hlink12title }}">
  834.                         <span class="expl-title">{{ c108htitle12 }}</span>
  835.                         {% if  c108hdescr12 %}<p>{{ c108hdescr12 }}</p> {% endif %}
  836.                         {% if c108hlink12bool %}
  837.                             {% if c108hlink12internal == false %}
  838.                                 <a class="btn btn-primary" href="{{ c108hlink12url }}"
  839.                                    title="{{ c108hlink12title }}">{{ c108hlink12title }}</a>
  840.                             {% else %}
  841.                                 <a class="btn btn-primary" href="{{ c108hlink12url }}" rel="noopener"
  842.                                    target="_blank"
  843.                                    title="{{ c108hlink12title }}">{{ c108hlink12title }}</a>
  844.                             {% endif %}
  845.                         {% endif %}
  846.                     </div>
  847.                 {% endif %}
  848.                 {# Marker element 13 #}
  849.                 {% if c108hnrhotspots >= 13 %}
  851.                     <div id="{{ id }}-explanation-mobile-13" class="c108-hfi-explanation mobile">
  852.                         <span class="c108-hfi-explanation-close">×</span>
  853.                         <img src="{{ element.config.mediaMarkerUrl.value[13] }}" alt="{{ c108hlink13title }}">
  854.                         <span class="expl-title">{{ c108htitle13 }}</span>
  855.                         {% if  c108hdescr13 %}<p>{{ c108hdescr13 }}</p> {% endif %}
  856.                         {% if c108hlink13bool %}
  857.                             {% if c108hlink13internal == false %}
  858.                                 <a class="btn btn-primary" href="{{ c108hlink13url }}"
  859.                                    title="{{ c108hlink13title }}">{{ c108hlink13title }}</a>
  860.                             {% else %}
  861.                                 <a class="btn btn-primary" href="{{ c108hlink13url }}" rel="noopener"
  862.                                    target="_blank"
  863.                                    title="{{ c108hlink13title }}">{{ c108hlink13title }}</a>
  864.                             {% endif %}
  865.                         {% endif %}
  866.                     </div>
  867.                 {% endif %}
  868.                 {# Marker element 14 #}
  869.                 {% if c108hnrhotspots >= 14 %}
  871.                     <div id="{{ id }}-explanation-mobile-14" class="c108-hfi-explanation mobile">
  872.                         <span class="c108-hfi-explanation-close" >×</span>
  873.                         <img src="{{ element.config.mediaMarkerUrl.value[14] }}" alt="{{ c108hlink14title }}">
  874.                         <span class="expl-title">{{ c108htitle14 }}</span>
  875.                         {% if  c108hdescr14 %}<p>{{ c108hdescr14 }}</p> {% endif %}
  876.                         {% if c108hlink14bool %}
  877.                             {% if c108hlink11internal == false %}
  878.                                 <a class="btn btn-primary" href="{{ c108hlink14url }}"
  879.                                    title="{{ c108hlink14title }}">{{ c108hlink14title }}</a>
  880.                             {% else %}
  881.                                 <a class="btn btn-primary" href="{{ c108hlink14url }}" rel="noopener"
  882.                                    target="_blank"
  883.                                    title="{{ c108hlink14title }}">{{ c108hlink14title }}</a>
  884.                             {% endif %}
  885.                         {% endif %}
  886.                     </div>
  887.                 {% endif %}
  889.             </div>
  890.             {# Mobile version: End #}
  891.             {% if element.config.mainTitle.value %}
  892.                 <div class="sw-cms-el-marker-text-box">
  893.                     <span class="sw-cms-el-marker-text">{{ element.config.mainTitle.value }}</span>
  894.                     <div class="sw-cms-el-marker-arrow arrow-right-rotate">
  895.                         {% sw_icon 'arrow_left'  style {
  896.                             'namespace': 'Tuerschild_2',
  897.                         } %}                       </div>
  898.                 </div>
  899.             {% endif %}
  900.         </div>
  901.     </div>
  903. {% endblock %}