<div class="product-header tui-container{{#if data.fields.content.concepts}}{{#eq data.fields.content.concepts.0.slug 'tui-blue-for-families'}} {{data.fields.content.concepts.0.slug}}{{/eq}}{{/if}}">
  {{#not hidePriceInfo}}
    {{>tui_price_info}}
  {{/not}}
  <div class="product-header-wrap">
    <div class="flexbox-row flag-breadcrumb">
      {{>icon_flags_svg name=data.fields.content.countryCode}}
      {{>bread_crumb}}
      {{>tui_and_tripsadviser_rating}}
    </div>

    <div class="hotel-header-box">
      <div class="header">
        {{#if data.fields.cruiseShip}}
          <h2 class="h1">{{data.fields.cruiseShip.fields.content.name}}</h2>
        {{/if}}
        {{#eq data.sys.contentType.sys.id 'hotelPage'}}
          <h1>{{#if data.fields.content.concepts}}{{tuiBlueHeader data.fields.content.concepts.0.name}}<br>{{/if}}{{data.fields.content.hotelName}}</h1>
        {{else}}
          <h1>{{data.fields.content.name}}</h1>
        {{/eq}}

        {{#if data.fields.content.teaser}}
          <p class="tui-text-content">{{data.fields.content.teaser}}</p>
        {{/if}}

        <div class="mobile-container">
          {{>tui_and_tripsadviser_rating}}
        </div>

        <div class="flexbox-row">
          {{#if data.fields.content.concepts}}
            <a href="#{{slug (lowercase (getResource data.fields.resource.fields.items 'subNavigationConcept'))}}" class="go-to-concept">
              {{>concept_logo concept=data.fields.content.concepts.0.slug text=data.fields.content.concepts.0.name}}
            </a>
            {{#eq data.fields.content.concepts.0.slug 'tui-blue-for-families'}}
            <a href="#children_and_youths">
              <span class="bamse">
                <img data-src="/cdn/img/bamse/v2/bamse.svg" alt="Bamse" class="lazyload">
              </span>
            </a>
            {{/eq}}
          {{else if data.fields.content.labels}}
            {{>label_logo name=data.fields.content.labels.0.name cssClass="hero-label"}}
          {{/if}}
          {{#if data.fields.content.classification}}
            <div class="classification-rating">
              {{#each data.fields.content.classification.splitName}}
                <div class="classification-character-box{{#eq this '+'}} plus{{/eq}}">
                  <span class="classification-character">{{this}}</span>
                </div>
              {{/each}}
            </div>
          {{/if}}
          {{#if (isArray data.fields.content.tags)}}
            {{#if (inArray data.fields.content.tags 'climate')}}
            <div class="desktop-climate">
              {{#if (hasArticle data.fields.campaignArticles 'climate')}}<a href="#climate" class="climate-link">{{/if}}
              {{>climate_notification text=(getResource data.fields.resource.fields.items 'climateCompensatedTopfacts')}}
              {{#if (hasArticle data.fields.campaignArticles 'climate')}}</a>{{/if}}
            </div>
          {{/if}}
        {{/if}}
        </div>
      </div>
    </div>
    {{#eq data.sys.contentType.sys.id 'cruisePage'}}
      {{>icon_button linkIcon=(getResource data.fields.resource.fields.items 'linkIcon') linkText=(getResource data.fields.resource.fields.items 'linkText') linkHref=(getResource data.fields.resource.fields.items 'linkHref')}}
    {{/eq}}
    {{#or (eq data.fields.id 'P-500009348') (eq data.fields.id 'P-500009349') (eq data.fields.id 'P-500009350') (eq data.fields.id 'P-500009351')}}
      {{>icon_button linkIcon=(getResource data.fields.resource.fields.items 'linkIcon') linkText=(getResource data.fields.resource.fields.items 'linkText') linkHref=(getResource data.fields.resource.fields.items 'linkHref')}}
    {{/or}}
  </div>
  <script defer src="/cdn/js/intersection-observer-min.js"></script>
</div>
