Search Teaser

{% if not(include) %}
{# TODO fall back include #}
{% endif %}

{% set rnd4 = [0,1,2,3] | random %}
{% set rnd19 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19] | random %}

{% if not(image) %}
{% set image = '/img/placeholder/500x300/image_' + rnd19 + '.jpg' %}
{% endif %}

{% if not(title) %}
{% set title = [
  'Lorem ipsum dolor sit amet',
  'Lorem Ipsum-Dolorent & Lorem Sediam ',
  'Ut enim ad minim veniam, quis nostrud',
  'Nonumy eirmod tempor invidunt ut anamen'
][rnd4] %}
{% endif %}

{% if not(intro) %}
{% set intro = [
  'Facilisis gravida neque convallis in nisl nisi',
  'Nullam vehicula ipsum a arcu & Lorem Sediam ',
  'Sollicitudin aliquam ultrices sagittis orci minim veniam, quis nostrud',
  'Nonumy eirmod Beque volutpat ac tempor invidunt ut anamen'
][rnd4] %}
{% endif %}

{% if not(tag1) %}
{% set tag1 = [
  'Dolor sit amet',
  'Lorem Sediam',
  'Ut enim ad minim',
  'Eirmod tempor invidunt'
][rnd4] %}
{% endif %}

{% if not(tag2) %}
{% set tag2 = [
  'Sagittis orci',
  'Volutpat ac tempor',
  'Veniam eirmod',
  'Tempor invidunt eirmod anamen'
][rnd4] %}
{% endif %}


{% if not(distance) %}
{% set distance = [
  '250 m',
  '400 m',
  '1.2 Km',
  '2.5 Km'
][rnd4] %}
{% endif %}

{% if not(address) %}
{% set address = [
  'Rathausmarkt 1, 20095 Hamburg',
  'Jungfernstieg 54, 20354 Hamburg',
  'Krayenkamp 10, 20459 Hamburg',
  'Speersort 1, 20095 Hamburg'
][rnd4] %}
{% endif %}

{% if not(text) %}
{% set text = [
  '<p>Leo in vitae turpis massa sed elementum. Facilisis gravida neque convallis in nisl nisi scelerisque.</p>',
  '<p>Enim lobortis scelerisque fermentum dui faucibus in ornare adipiscing diam donec adipiscing tristique risus nec feugiat.</p>',
  '<p>Beque volutpat ac tincidunt vitae semper quis lectus nulla. Nullam vehicula ipsum a arcu.</p>',
  '<p>In nulla posuere sollicitudin aliquam ultrices sagittis orci.</p>'
][rnd4] %}
{% endif %}

<div class="c-search-teaser">

  {% if 'labels' in include %}
    <div class="c-label-container small-only:hidden">
      {% render '@label', { label: 'Premium-Partner', theme: 'primary' } %}
      {% render '@label', { label: 'Kategorie', theme: 'secondary' } %}
      {% render '@label', { label: 'Kategorie', theme: 'secondary' } %}
    </div>
  {% endif %}

  <div class="c-search-teaser__grid">

    {% if 'image' in include %}
      <div class="c-search-teaser__image">
        <a href="/">
          {% render '@image', { src: image } %}
        </a>
      </div>
    {% endif %}

    {% if 'carousel' in include %}
      <div class="c-search-teaser__image">
        <div ui-carousel data-config='{ "pageDots": false, "prevNextButtons": true, "prevNextButtonsInset": true, "slides": {"small": 1, "medium": 1, "large": 1}}'>
          {% for index in [1, 2, 3, 4, 5] %}
            <div ui-carousel-item>
              {% render '@image', { src: '/img/placeholder/500x300/image_' + [1,2,3,4,5,6,7,8,9] | random + '.jpg' } %}
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    <div class="grid gap-[.8rem]">

      <div class="grid gap-[.4rem]">

        {% if 'labels' in include %}
          <div class="c-label-container medium:hidden">
            {% render '@label', { label: 'Premium-Partner', theme: 'primary' } %}
            {% render '@label', { label: 'Kategorie', theme: 'secondary' } %}
            {% render '@label', { label: 'Kategorie', theme: 'secondary' } %}
          </div>
        {% endif %}

        {% if 'title' in include %}
          <h3 class="text-style-hit-id"><a href="/">{{ title }}</a></h3>
        {% endif %}

        {% if 'intro' in include %}
          <h3 class="text-style-big"><a href="/">{{ intro }}</a></h3>
        {% endif %}
      </div>

      {% if 'tags' in include %}
        <p class="text-neutral-grey-03"><span class="pipe-after"><strong>{{ tag1 }}</strong></span><span>{{ tag2 }}</span></p>
      {% endif %}

      {% if 'icontags-job' in include %}
        <div class="flex gap-4 flex-wrap">
          {% render '@icon-tag', { icon: 'pinmarker', label: 'Winterhude' } %}
          {% render '@icon-tag', { icon: 'job-b', label: 'Vollzeit oder Teilzeit' } %}
          {% render '@icon-tag', { icon: 'tag', label: 'Gastronomie' } %}
        </div>
      {% endif %}

      {% if 'icontags-event' in include %}
        <div class="flex gap-4 flex-wrap">
          {% render '@icon-tag', { icon: 'cal', label: '10.01.2024' } %}
          {% render '@icon-tag', { icon: 'time', label: '10:00 - 17:00 Uhr' } %}
          {% render '@icon-tag', { icon: 'pinmarker', label: 'Niendorf' } %}
          {% render '@icon-tag', { icon: 'tag', label: 'Märkte & Messen' } %}
        </div>
      {% endif %}

      {% if 'address' in include %}
        <div class="flex items-center">
          <span class="c-search-teaser__icon">{% render '@svg', { name: 'pinmarker-b' } %}</span>
          <span class="pipe-after shrink-0"><strong>{{ distance }}</strong></span>
          <span><a href="/">{{ address }}</a></span>
        </div>
      {% endif %}

      {% if 'opening' in include %}
        <div class="flex items-center">

          {% if ([0,1] | random) %}
            <span class="c-search-teaser__icon">{% render '@svg', { name: 'time', color: 'text-info-positive' } %}</span>
            <span><a href="/">Jetzt geöffnet</a></span>
            <span>, Mo. 11:30 - 00:00</span>
          {% else %}
            <span class="c-search-teaser__icon">{% render '@svg', {  name: 'time' } %}</span>
            <span>Mo. 11:30 - 00:00</span>
          {% endif %}
        </div>
      {% endif %}

      {% if 'offer' in include %}
        <div class="flex items-center">
          <span class="c-search-teaser__icon">{% render '@svg', { name: 'promo-b' } %}</span>
          <span>Aktionsangebot für 20€</span>
        </div>
      {% endif %}

      {% if 'text' in include %}
        <div class="text-neutral-grey-03 pb-2">
          {{ text | safe }}
        </div>
      {% endif %}
    </div>

  </div>

  {% if 'cta' in include %}
    <div class="c-search-teaser__buttons">

      {% render '@button', {
        label: {
          default: 'Kontakt'
        },
        icon: 'plus',
        theme: 'primary',
        variant: 'outlined',
        attributes: 'ui-modal-open data-config={"id":"xyz123456","title":"Kontakt","style":"small"}'
      } %}

      {% render '@button', {
        label: {
          default: 'Mehr erfahren'
        },
        theme: 'primary',
        variant: 'filled'
      } %}

      {% if ([0,1] | random) %}
        {% render '@button', {
          label: {
            default: 'Merken',
            mobile: ''
          },
          icon: 'heart-outline',
          theme: 'primary',
          variant: 'basic'
        } %}
      {% else %}
        {% render '@button', {
          label: {
            default: 'Gemerkt',
            mobile: ''
          },
          icon: 'heart',
          theme: 'primary',
          variant: 'basic'
        } %}
      {% endif %}

    </div>
  {% endif %}

</div>