carousel.html

{% load static wagtailimages_tags %}

<div>
  <div class="header-carousel">

    <{% if self.button_url %}a{% else %}div{% endif %}
      class="
        {% block wrapper_classes %}
          block h-[700px] relative
        {% endblock %}

        {% if self.button_url %}group cursor-pointer{% endif %}
      "

      {% if self.button_url %}
        href="{{ self.button_url }}"
      {% endif %}
    >
      <video
        class="
          header-carousel--image
          lg:hidden
        "
        autoplay
        muted
        loop
        playsinline
        preload="metadata"

        {% if not self.mobile_image %}
          poster="{% static 'styleguide2/images/background-images/bg-flag-mobile-preview.jpg' %}"
        {% else %}
          {% image self.mobile_image original as mobile_background_image %}
          poster="{{ mobile_background_image.url }}"
        {% endif %}
      >
        {% if not self.mobile_image %}
          <source src="{% static 'styleguide2/images/background-images/bg-flag-mobile.mp4' %}">
        {% endif %}
      </video>

      <video
        class="
          header-carousel--image
          hidden lg:block
        "
        autoplay
        muted
        loop
        playsinline
        preload="metadata"

        {% if not self.desktop_image %}
          poster="{% static 'styleguide2/images/background-images/bg-flag-preview.jpg' %}"
        {% else %}
          {% image self.desktop_image original as desktop_background_image %}
          poster="{{ desktop_background_image.url }}"
        {% endif %}
      >
        {% if not self.desktop_image %}
          <source src="{% static 'styleguide2/images/background-images/bg-flag.mp4' %}">
        {% endif %}
      </video>

      <div
        class="
          {% block text_wrapper_class %}
            header-carousel--text-wrapper
          {% endblock %}
        "
        style="box-sizing: border-box"
      >
        <div
          class="
            {% block text_inner_wrapper_classes %}
              container--wide px-0 h-full flex flex-col justify-end items-start
            {% endblock %}
          "
          style="box-sizing: border-box"
        >

          <h1 class="__header-carousel-mobile-text mb-4 px-5 flex-col text-black flex lg:hidden">
            <div>{{ self.mobile_line_1 }}</div>
            <div>{{ self.mobile_line_2 }}</div>
            <div>{{ self.mobile_line_3 }}</div>
          </h1>

          <h1 class="__header-carousel-desktop-text mb-4 px-5 flex-col text-black hidden lg:flex">
            <div>{{ self.desktop_line_1 }}</div>
            <div>{{ self.desktop_line_2 }}</div>
          </h1>

          {% if self.button_url and self.button_text %}
            <div class="__header-carousel-button-wrapper ml-4 text-lg group">
              {% firstof self.button_text "Více informací" as button_text %}

              {% include "styleguide2/includes/atoms/buttons/round_button_without_url.html" with url=self.button_text text=button_text show_arrow_on_hover=True %}
            </div>
          {% endif %}
        </div>
      </div>

    </{% if self.button_url %}a{% else %}div{% endif %}>

  </div>
</div>