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

  {% if img_src and img_alt %}
    <div class="image">
      {% include "@atoms/html5/image/image.twig" with { "url": img_src, "alt": img_alt, "img_class": 'w-100 background-image' } only %}
      {% include "@atoms/html5/image/image.twig" with { "url": img_src, "alt": img_alt, "img_class": 'mx-auto front-image' } only %}
    </div>
  {% endif %}

  <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 and booking_link_text %}
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          "url": booking_link_url,
          "text": booking_link_text,
          "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>