---
title: Hotel page
layout: tui-ssg-template-layout.hbs
bodyClass: hotelpage tui-hotel product-page hotel
---

<div class="flexbox-column">
  <section class="product-header-subnav">
    <div class="tui-container">
      {{>hotel_sub_navigation hotel}}
    </div>
  </section>
  {{>hero_responsive_hotel hotel.data.fields.content resourceObject=hotel.data.fields.resource.fields.items}}
  <section class="product-header-section">
    {{>product_header hotel hotel=true}}
      <div class="product-header tui-container tuifamilylife">
        {{>tui_top_facts facts=hotel.data.fields.content.topFacts tags=hotel.data.fields.content.tags resourceObject=hotel.data.fields.resource.fields.items}}
      </div>
    <div class="product-header tui-container offer-ticket-container">
{{>offer_ticket offer-ticket.fields}}
    </div>
  </section>
</div>

<main class="main-content">
  <section id="{{slug (lowercase (getResource hotel.data.fields.resource.fields.items 'subNavigationImages'))}}">
    <div class="tui-container">
      <div class="tui-hotel-section light-beige image-hotel-description">
        <div class="hotel-swipe">
          <h2>{{getResource hotel.data.fields.resource.fields.items 'imagesHeading'}}</h2>
          {{>overview_image hotel.data hideHeader=true}}
          <a href="http://www.tui.se.uat.tuinordic.com/widgets/api/images-v2/se/{{hotel.data.fields.content.id}}"
             class="btn btn-function btn-block open-tui-modal" data-hotel-name="{{hotel.data.fields.content.name}}"
             data-load-from-wf="true" data-modal-type="image-modal" data-id="images">
            {{getResource hotel.data.fields.resource.fields.items 'imagesShowAllButtonText' hotel.data.fields.content.images.length}}
          </a>
        </div>
        <div class="tui-text-content">
{{>tui_hotel_text hotel}}
        </div>
      </div>
    </div>
  </section>

  {{#if hotel.data.fields.content.goodToKnow}}
    <section id="{{slug (lowercase (getResource hotel.data.fields.resource.fields.items 'subNavigationHotelFacts'))}}">
      <div class="tui-container">
        <div class="tui-hotel-section light-beige">
          <header class="tui-hotel-heading">
            <h2>{{getResource hotel.data.fields.resource.fields.items 'factsHeading'}}</h2>
          </header>
          <div class="tui-hotel-content">
            <div class="hotel-facts">
              {{#withGroup hotel.data.fields.content.goodToKnow (ceil (divide hotel.data.fields.content.goodToKnow.length 2))}}
                <ul class="tui-accordion facts-accordion">
                  {{#each this}}
{{>facts_accordion resourceObject=@root/hotel.data.fields.resource.fields.items}}
                  {{/each}}
                </ul>
              {{/withGroup}}
            </div>
          </div>
        </div>
{{>tui_important_info hotel}}
      </div>
    </section>
  {{/if}}

  {{#if hotel.data.fields.content.concepts}}
    {{#each hotel.data.fields.content.concepts}}
      <section id="{{slug (lowercase (getResource ../hotel.data.fields.resource.fields.items 'subNavigationConcept'))}}">
        <div class="tui-container">
          {{>concept_banner_svg concept=slug text=name tagLine=shortTagline}}
          <div class="tui-hotel-content background-tui-white">
{{>hotel_concept this conceptPages=@root/hotel.data.fields.concepts resourceObject=@root/hotel.data.fields.resource.fields.items}}
          </div>
        </div>
      </section>
    {{/each}}
  {{/if}}

  {{#if hotel.data.fields.content.topCustomerTip}}
    <section>
      <div class="tui-container">
        <div class="tui-hotel-section blockquote-container">
          {{>customer_quote hotel}}
        </div>
      </div>
    </section>
  {{/if}}

  {{#each hotel.data.fields.content.accommodations}}
    <section id="{{slug (lowercase (getResource hotel.data.fields.resource.fields.items 'subNavigationRooms'))}}">
      <div class="tui-container">
        <div class="tui-hotel-section">
          <header class="tui-hotel-heading">
            <h2>{{name}}</h2>
          </header>
          <div class="concept-room-types">
            {{#if facilityDescriptions}}
              <header class="list-header">
                <h4>{{>icon_svg name='letter-question--circled'}} {{getResource ../hotel.data.fields.resource.fields.items 'roomConceptTerms'}}</h4>
              </header>
              {{>header_and_text_list facilityDescriptions}}
            {{/if}}
          </div>
          {{>tui_room_info resourceObject=@root/hotel.data.fields.resource.fields.items bedbank=../hotel.data.fields.content.bedbank}}
        </div>
      </div>
    </section>
  {{/each}}

  {{#if hotel.data.fields.content.coordinates}}
    <section id="{{slug (lowercase (getResource hotel.data.fields.resource.fields.items 'subNavigationMaps'))}}">
      <div class="tui-container">
        <div class="tui-hotel-section light-blue">
          <header class="tui-hotel-heading">
            <h2>{{getResource hotel.data.fields.resource.fields.items 'mapsHeading'}}</h2>
          </header>
          <div class="tui-hotel-content map-content">
            {{>tui_hotel_map hotel}}
          </div>
        </div>
      </div>
    </section>
  {{/if}}

  <section id="{{slug (lowercase (getResource hotel.data.fields.resource.fields.items 'subNavigationWeather'))}}">
    <div class="tui-container">
      <div class="tui-hotel-section light-blue hotel-weather-section">
        {{>weather_widget weather_widget}}
      </div>
    </div>
  </section>

  <section id="{{slug (lowercase (getResource hotel.data.fields.resource.fields.items 'subNavigationExcursions'))}}">
    <div class="tui-container">
      <div class="tui-hotel-section dark-beige">
        <header class="tui-hotel-heading">
          <h2>{{musementDeepLink (getResource hotel.data.fields.resource.fields.items 'excursionHeading') hotel.data.fields.content false hotel.meta.market}}</h2>
        </header>
        <div class="tui-hotel-content">
{{>excursion_info_box hotel}}
        </div>
      </div>
    </div>
  </section>

  <section id="{{slug (lowercase (getResource hotel.data.fields.resource.fields.items 'subNavigationCustomerTips'))}}">
    <div class="tui-container">
      <div class="tui-hotel-section light-beige">
        <header class="tui-hotel-heading">
          <h2>{{getResource hotel.data.fields.resource.fields.items 'customerTipsHeading'}}</h2>
        </header>
        <div class="tui-hotel-content customer-outer-container">
          <div class="customer-rating-container">
            {{>customer_rating hotel.data.fields.content}}
            <h3>Gästernas egna restips och betyg</h3>
            <p class="article-light-text small">för Blue Star Candia Maris i Amoudara</p>
            <p>
              Här tipsar resenärerna själva om sina smultronställen i Amoudara. Tipsen kommer från gäster som bott på
              Blue Star Candia Maris och fyllt i vår kundenkät efter sin resa.
            </p>
          </div>
          <div class="customer-tips-container">
            <div class="form-item tips-sorting">
              <div class="sorting-wrapper">
                <label for="tip-sorting">
                  Sortering:
                </label>
                <span><strong>7</strong> omdömen</span>
              </div>
              <select id="tip-sorting" class="tip-sorting">
                <option class="" value="score">Betyg</option>
                <option class="" value="date">Datum</option>
              </select>
            </div>
            {{>content_box customer-tip-list}}
          </div>
        </div>
      </div>
    </div>
  </section>

</main>
<script async src="https://www.tui.se/heart.se.js"></script>