<style>

    .carousel-control-prev:focus,
    .carousel-control-next:focus {
        outline: none;
        box-shadow: none;
    }
    .custom-column {
        flex-basis: 20%;
        max-width: 20%;
    }
    .card-footer {
        border: none;
        padding-left: 0rem;
    }
    .btn {
        width: 120px;
    }
    .img-padding {
        padding-left: 17.5px;
        padding-top: 17.5px;
        padding-bottom: 17.5px;
    }
    

</style>
<div class="container">
<h2 class="text-center">{{heading}}</h2>
{% if mode == 'list'%}
<div class="row">
    {% for post in posts %}
    <div class="col-12">
        <div class="card">
          <div class="row " > <!-- (row g-0) style="height: 200px;" -->
            {% if images[post.ID] %}
            <div class="col-12 col-sm-3">
                <a class="btn-link" href="{{ post.guid }}"><img class="card-img card-img-top img-fluid mb-0 img-padding" src="{{ images[post.ID]|raw }}"></a>
            </div>
            <div class="col-12 col-sm-9">
            {% else %}
            <div class="col-12">               
            {% endif %}
        
              <!-- <div class="card-body d-flex flex-column"> -->
              <div class="card-body d-flex flex-column h-100">
                <div class="h-100">
                    {% if show_post_date %}
                    {{ post_date[post.ID] }}
                    {% endif %}
                    <a class="btn-link" href="{{ post.guid }}"><h3 class="card-title">{{ post.post_title }}</h3></a>
                    <p class="card-text align-self-end">
                        {% if content[post.ID]|length > numberchars %}
                            {{ content[post.ID]|raw|slice(0, numberchars) }}...
                        {% else %}
                            {{ content[post.ID]|raw }}
                        {% endif %}
                    </p>
                </div>
                <!-- <div class="mt-3">
                  <a href="" class="btn btn-secondary btn-block mx-auto">Weiterlesen »</a>
                </div> -->
                <div class="card-footer bg-white">
                    <a href="{{ post.guid }}" class="btn btn-secondary btn-block">Weiterlesen »</a>
                </div>
              </div>
              
              <!-- <div style="height: 200px; width: 100%; background-color: rgb(43, 150, 75);"></div> -->
            </div>

          </div>
        </div>
      </div>
    {% endfor %}
</div>
{% elseif mode == 'slideshow'%}
<div id="latest_posts_slideshow_{{rand}}" class="carousel" data-slideshow-num="{{ numberposts }}" data-slideshow-duration="{{ slideduration }}" data-slideshow-auto="{{ autoslide }}" data-slideshow-autoduration="{{ autoslideduration }}" >
    <div id="latest_posts_slideshow_inner_{{rand}}" class="carousel-inner d-flex">
        {% for post in posts %}
       
        <div class="carousel-item {% if loop.first %}active{% endif %} mr-0 col-12 col-sm-{{ (12/numberposts)|round(0, 'floor') }} 
        col-md-{{(12/numberposts)|round(0, 'floor') }} col-xl-{{ (12/numberposts)|round(0, 'floor') }} m-0  
        text-center" style="display: block;">
            <div class="card h-100 m-0">
                    {% if images[post.ID] %}
                        <a class="btn-link" href="{{ post.guid }}"><img class="card-img-top" src="{{ images[post.ID]|raw }}"></a>
                    {% endif %}
                    <div class="card-body">
                        {% if show_post_date %}
                        {{ post_date[post.ID] }}
                        {% endif %}
                        <a class="btn-link" href="{{ post.guid }}"><h3 class="card-title">{{ post.post_title }}</h3></a>
                        <p class="card-text align-self-end">
                            {% if content[post.ID]|length > numberchars %}
                                {{ content[post.ID]|raw|slice(0, numberchars) }}...
                            {% else %}
                                {{ content[post.ID]|raw }}
                            {% endif %}
                        </p>
                    </div>
                    <div class="card-footer bg-white">
                        <a href="{{ post.guid }}" class="btn btn-secondary btn-block mx-auto">Weiterlesen »</a>
                    </div>
                </div>
        </div>
        {% else %}
        <div class="alert alert-info" role="alert">
            <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
            <p>
                Es wurden noch keine Beiträge veröffentlicht.
            </p>
        </div>
        {% endfor %}
    </div>

    <button class="carousel-control-prev btn btn-transparent d-flex align-items-center justify-content-center" style="width: 50px; top:-30px; left: -15px;" type="button" data-bs-target="#latest_posts_slideshow_{{rand}}" data-bs-slide="prev">
        <span class="fa-stack d-flex align-items-center justify-content-center">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </span>
    </button>
    <button class="carousel-control-next btn btn-transparent d-flex align-items-center justify-content-center" style="width: 50px; top:-30px; right: -15px;" type="button" data-bs-target="#latest_posts_slideshow_{{rand}}" data-bs-slide="next">
        <span class="fa-stack d-flex align-items-center justify-content-center">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </span>
    </button>

</div>
<script>
    jQuery(document).ready(function(){
        if (jQuery("#latest_posts_slideshow_{{rand}}").data("slideshow-num") === 5 && window.innerWidth > 575) {
            jQuery('#latest_posts_slideshow_{{rand}} .carousel-item').addClass('custom-column');

        }
        var numberposts = jQuery(window).width() < 560 ? 1 : jQuery("#latest_posts_slideshow_{{rand}}").data("slideshow-num");
        var slideduration = jQuery("#latest_posts_slideshow_{{rand}}").data("slideshow-duration");
        {% if autoslide %}
        var autoslide = jQuery("#latest_posts_slideshow_{{rand}}").data("slideshow-auto");
        var autoSlideDuration = jQuery("#latest_posts_slideshow_{{rand}}").data("slideshow-autoduration");
        var autoslideInterval;
        {% endif %}
        

        var carouselWidth = jQuery("#latest_posts_slideshow_{{rand}} .carousel-inner")[0].scrollWidth;
        
        var cardWidthscroll = jQuery("#latest_posts_slideshow_{{rand}} .carousel-item").width();
        var cardWidth = jQuery("#latest_posts_slideshow_{{rand}} .carousel-item").outerWidth(true);
      
        var scrollPosition = 0;
        
        const myCarousel = jQuery("#latest_posts_slideshow_{{rand}}")
        var parent = jQuery('#latest_posts_slideshow_inner_{{rand}}');


        {% if autoslide %}
        // autoslide  
        autoslideInterval = setInterval(function () {
            jQuery("#latest_posts_slideshow_{{rand}} .carousel-control-next").trigger('click');
        }, autoSlideDuration);

        jQuery("#latest_posts_slideshow_{{rand}} .carousel-control-next").on("mouseenter", function(){
            clearInterval(autoslideInterval);
        });

        jQuery("#latest_posts_slideshow_{{rand}} .carousel-control-next").on("mouseleave", function(){
            autoslideInterval = setInterval(function () {
                jQuery("#latest_posts_slideshow_{{rand}} .carousel-control-next").trigger('click');
            }, autoSlideDuration);
        });

        jQuery("#latest_posts_slideshow_{{rand}} .carousel-control-prev").on("mouseenter", function(){
            clearInterval(autoslideInterval);
        });

        jQuery("#latest_posts_slideshow_{{rand}} .carousel-control-prev").on("mouseleave", function(){
            autoslideInterval = setInterval(function () {
                jQuery("#latest_posts_slideshow_{{rand}} .carousel-control-next").trigger('click');
            }, autoSlideDuration);
        });
        {% endif %}
        
        jQuery("#latest_posts_slideshow_{{rand}} .carousel-control-next").on("click", function () {
      
            if (scrollPosition <= (carouselWidth - cardWidthscroll * (numberposts + 1) )) { //check if you can go any further
            scrollPosition += cardWidth  //update scroll position
            jQuery("#latest_posts_slideshow_{{rand}} .carousel-inner").animate({ scrollLeft: scrollPosition },slideduration); //scroll left
            } else{
                
                
                var olddiv = jQuery("#latest_posts_slideshow_{{rand}} .carousel-item:first");
                var newdiv = olddiv.clone();
                
                
                parent.append(newdiv);
                scrollPosition += cardWidth
                jQuery("#latest_posts_slideshow_{{rand}} .carousel-inner").animate({ scrollLeft: scrollPosition },slideduration); //scroll left
                setTimeout(function() {
                    olddiv.remove();
                    scrollPosition -= cardWidth;
                }, slideduration);

            }
        });
        
        jQuery("#latest_posts_slideshow_{{rand}} .carousel-control-prev").on("click", function () {
            if (scrollPosition > 0) {
            scrollPosition -= cardWidth;
            jQuery("#latest_posts_slideshow_{{rand}} .carousel-inner").animate(
                { scrollLeft: scrollPosition },
                slideduration
            );
            }else {
                var olddiv = jQuery("#latest_posts_slideshow_{{rand}} .carousel-item:last");
                var newdiv = olddiv.clone();

                parent.prepend(newdiv);
                jQuery("#latest_posts_slideshow_{{rand}} .carousel-inner").scrollLeft(scrollPosition + cardWidth );
                olddiv.remove();
                scrollPosition += cardWidth;
                scrollPosition -= cardWidth
                
                jQuery("#latest_posts_slideshow_{{rand}} .carousel-inner").animate({ scrollLeft: scrollPosition },(slideduration )); //scroll left
                

        }
        });

    });
    
    </script>
{% if morelink is not null %}
    <div class="my-4">
        <a href="{{ morelink }}" title="{{ morelinktext }}" class="btn btn-primary p-3">{{ morelinktext }}</a>
    </div>
{% endif %}
{% elseif mode == 'grid' %}
<div class="row">
    {% for post in posts %}
    <div class="col-12 col-sm-6 col-md-4 col-xl-4 mb-3 text-center">
            <div class="card h-100">
                {% if images[post.ID] %}
                    <a class="btn-link" href="{{ post.guid }}"><img class="card-img-top" src="{{ images[post.ID]|raw }}"></a>
                {% endif %}
                <div class="card-body">
                    {% if show_post_date %}
                    {{ post_date[post.ID] }}
                    {% endif %}
                    <a class="btn-link" href="{{ post.guid }}"><h3 class="card-title">{{ post.post_title }}</h3></a>
                    <p class="card-text align-self-end">
                        {% if content[post.ID]|length > numberchars %}
                            {{ content[post.ID]|raw|slice(0, numberchars) }}...
                        {% else %}
                            {{ content[post.ID]|raw }}
                        {% endif %}
                    </p>
                </div>
                <div class="card-footer bg-white">
                    <a href="{{ post.guid }}" class="btn btn-secondary btn-block mx-auto">Weiterlesen »</a>
                </div>
            </div>
    </div>
    {% else %}
    <div class="alert alert-info" role="alert">
        <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
        <p>
            Es wurden noch keine Beiträge veröffentlicht.
        </p>
    </div>
    {% endfor %}
</div>
{% if morelink is not null %}
    <div class="my-4">
        <a href="{{ morelink }}" title="{{ morelinktext }}" class="btn btn-primary p-3">{{ morelinktext }}</a>
    </div>
{% endif %}
{% endif %}
</div>
