{@load resource="offerteasers"}
    <div class="offerSlider">
        <div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
            {#offers}
                <div>
                    <a href="#" onclick="Samera.Overlay.show({packageGroup: {id} }); return false;" class="link">
                        {?mediums}
                            <img src="{@imageurl id=mediums[0].id type="OT" /}" style="width: 100%;" />
                        {/mediums}
                        <div class="name"><span>{name}</span></div>
                        <div class="details">
                            <span>
                                <h3>{name}</strong></h3>
                                <div class="stayRanges">
                                    {#stayRanges}
                                        {@date date=arrivalDay /} - {@date date=departureDay/}
                                    {/stayRanges}
                                </div>
                                <div class="durations">
                                    {#durations}
                                        {@if cond="{$idx} == 0"}
                                            {~n} {durations[0]}
                                        {/if}
                                        {@if cond="{$idx} > 0 &amp;&amp; {$idx} == ({$len} - 1)"}
                                             {~n} bis {.}
                                        {/if}
                                    {/durations}
                                    {~n} Nächte
                                </div>
                                <div>{teaser|t|s}</div>
                            </span>
                        </div>
                    </a>
                </div>
            {/offers}
        </div>
    </div>
    {/load}