<div class="top-section mb-5">
  {% if description %}
    <p class="description p-3 mb-0">{{ description|raw }}</p>
  {% endif %}


  <div class="image">
    {{ image_background }}
    {{ image }}
    {% if image_credits %}
      <span class="image-credits">{{ image_credits }}</span>
    {% endif %}
  </div>

  <div class="bottom">
    {% if tags %}
      <div class="categories pb-2">
        {% for tag in tags %}
          <span>{{ tag }}</span>
          {% if not loop.last %}
            <i class="fas fa-circle beli belil event-icon"></i>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}
    <div class="event-buttons">
      {% if event_link_url and event_link_text %}
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          "url": event_link_url,
          "text": event_link_text,
          "icon_left": 'far fa-link',
          "display": 'inline',
          "class": 'btn btn-outline-default',
        } only %}
      {% endif %}
      {% if booking_link_url %}
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          "url": booking_link_url,
          "text": 'Book now',
          "icon_left": 'far fa-ticket-alt',
          "display": 'inline',
          "class": 'btn btn-primary',
        } only %}
      {% endif %}
    </div>
    {% if find_out_more_url and find_out_more_text %}
      <p class="view-more">View more information at <a href="{{ find_out_more_url }}">{{ find_out_more_text }}</a></p>
    {% endif %}
  </div>
</div>
