{% comment %} 

    Image item carousel.
    This include adds a Bootstrap Carousel component populated with randomly selected image items, designed with index page in mind. 
    https://getbootstrap.com/docs/5.1/components/carousel/

    E.G. --> {% include index/carousel.html title="Sample Items" height=450 %}

    Options:

    - "height" = the height of the carousel in px, just give the number (optional, default 300)
    - "carousel-type" = the selection of items featured in the carousel, choose from thumb (all items with image_thumb) or small (all items with image_small). (optional, default thumb)
    - "child-objects" = include child items in count or only parents, true or false (optional, default false)
    - "title" = card title text inside card content area (optional)
    - "header" = card header text in bar above card content (optional)
    - "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
    - "max" = maximum images selected for slide show (optional, default 9. Do not make too big!)
    - "btn-color" = a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "primary")
    - "btn-text" = the label used in the link btn to view the carousel item (optional, default "View Item")
    - "filter-field" and "filter-value" = use these options together to filter which set of items will appear in the carousel based on a particular metadata field and value in that field. filter-field must match a column in your metadata. any item with a value in the filter-field that "contains" the filter-value will be included, it does not need to be an exact match. (optional)
    
{%- endcomment -%}

{%- assign carousel-max = include.max | default: 9 -%}
{%- assign btn-color = include.btn-color | default: "primary" -%}
{%- assign btn-text = include.btn-text | default: "View Item" -%}
{% if include.child-objects == true %}
{%- assign carousel-items = site.data[site.metadata] | where_exp: 'item','item.objectid' | where_exp: "item","item.image_small != nil or item.image_thumb != nil"-%}
{% else %}
{%- assign carousel-items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' | where_exp: "item","item.image_small != nil or item.image_thumb != nil" -%}
{% endif %}
{%- if include.filter-field and include.filter-value -%}
{% assign carousel-items = carousel-items | where_exp: 'item','item[include.filter-field] contains include.filter-value' %}
{%- endif -%}

{%- comment -%}
    Set up carousel div
{%- endcomment -%}
<style>
    #imageCarousel .carousel-item { height: {{ include.height | remove: 'px' | strip | default: '300' }}px; }
</style>
<div class="card mb-3">
    {% if include.header %}<{{ include.heading_level | default: 'h2' | strip }} class="card-header h5">{{ include.header }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
    <div class="card-body">
        {% if include.title %}<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">{{ include.title }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
        
        <div id="imageCarousel" class="carousel slide bg-dark rounded mb-3" data-bs-ride="carousel">
            <div id="carouselIndicators" class="carousel-indicators">
                
            </div>
            <div id="carouselInner" class="carousel-inner">
                
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
            
    </div>
</div>
{%- comment -%}
    add slides using JS to allow for randomizing slide show
{%- endcomment -%}
<script>
    /* add item data */
    // title,objectid,image_thumb/small
    var carouselItems = [ {% for c in carousel-items %}[ {{ c.title | escape | jsonify }}, "{{ c.objectid }}", {% if c.image_small %}{{ c.image_small | relative_url | jsonify }}{% else %}{{ c.image_thumb | relative_url | jsonify }}{% endif %}, "{{ c.parentid }}", {{ c.image_alt_text | default: c.title | escape | jsonify }} ]{% unless forloop.last %}, {% endunless %}{% endfor %}];
    /* shuffle items */
    carouselItems.sort(function() { return 0.5 - Math.random() });

    /* add items to carousel */
    var carousel = document.getElementById("carouselInner");
    var carouselIndicators = document.getElementById("carouselIndicators");
    var slides = "";
    var indicators = "";
    var i, itemImg, itemLink;
    for (let i=0; i < {{ carousel-items | size | at_most: carousel-max }}; i++) {
        // calculate item image location
        itemImg = carouselItems[i][2];
        // calculate item link
        if (carouselItems[i][3]){
            itemLink = '{{ '/items/' | relative_url }}' + carouselItems[i][3] + '.html#' + carouselItems[i][1];}
        else {
            itemLink = '{{ '/items/' | relative_url }}' + carouselItems[i][1] + '.html';
        }   
        // create indicator 
        indicator = `<button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="${i.toString()}" ${ i == 0 ? 'class="active" aria-current="true" ' : '' }aria-label="Slide ${i.toString()}"></button>`;
        // create slide
        slide = `<div class="carousel-item py-2${ i == 0 ? ' active' : '' }">
            <img class="d-block h-100 mx-auto lazyload" alt="${carouselItems[i][4]}" data-src="${itemImg}">
            <div class="carousel-caption">
                <h3 class="carousel-item-title text-white py-2 h6">${carouselItems[i][0]}</h3>
                <a href="${itemLink}" class="btn btn-sm btn-{{ btn-color }}">{{ btn-text }}</a>
            </div></div>`;
        slides += slide;
        indicators += indicator;
    }
    // add indicators to page 
    carouselIndicators.innerHTML = indicators;
    // add slides to the page
    carousel.innerHTML = slides;
</script>
