[viewBag]
==
{% if staffContentList %}
<div class="staff-notices">
    <div class="container">
        <div class="slick-wraper">
            <div class="staff-content-items">
                {% set itemCount = staffContentList.count() %}
                {% for index,item in staffContentList %}
                <div class="slick-pad">
                    <div class="card ">
                        <div class="event-fix-image">
                            {% if item.image %}

                            <img class="card-img-top" src="{{ item.image.thumb(348,240, { mode : 'exact' } )}}" alt="{{ item.title }}">
                            {% else %}
                            <img class="card-img-top" src="{{ 'assets/images/no-image.png'|theme  }}" alt="{{ item.title }}">
                            {% endif %}
                            <div class="hover-effect"></div>
                        </div>

                        <div class="card-body text-center news-card">
                            <h5 class="card-title">{{ str_limit(item.title|raw, 50) }}</h5>
                            <p class="card-text"> {{ str_limit(html_strip(item.description)|raw, 100) }}</p>
                            <a href="/staff/content/{{ item.content_type.slug }}/{{ item.slug }}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endif %}

{% put scripts %}
<script type="text/javascript">
    let rows = 1;
    let itemCount = "{{ itemCount }}";
    if(itemCount > 9){
        rows = 3;
    }else if (itemCount > 6){
        rows = 2;
    }

    $(document).ready(function () {
        $('.staff-content-items').slick({
            dots: false,
            autoplay: false,
            rows:rows,
            speed: 200,
            infinite: false,
            slidesToShow: 3,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2
                    }
                },
                {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 1
                    }
                }
            ]
        });
    });
</script>
{% endput %}