{% extends "base.html" %}
{% block script %}


{% endblock script %}


{% block content %}
<div class="container">

    {% for school in pagination.data_list %}
    <div class="row mt-3">
        <div class="col">
            <div class="d-flex">
                <div class="flex-shrink-0">
                    <a href="#">
                        <img class="rounded-pill img-thumbnail" width="64" height="64" src="{{school.pic}}" alt="">
                    </a>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h5 class="float-start pe-3">{{school.name}}</h5>
                    <p class="ms-3">
                        {% for fea in school.feature.split(',') %}
                        <span class="badge rounded-pill bg-primary">{{fea}}</span>
                        {% endfor %}
                    </p>
                    <p><em>所在省市：<span class="text-black-50">{{school.province}} -- {{school.city}}</span></em></p>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

</div>
<!-- status elements -->
<div class="scroller-status" style="display:none;padding-top: 20px;border-top: 1px solid #DDD;text-align: center;color: #777;">
    <div class="loader-ellips infinite-scroll-request">
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
    </div>
    <p class="infinite-scroll-last">数据到底了</p>
    <p class="infinite-scroll-error">加载失败</p>
</div>
<p class="text-center">
    <button class="btn btn-primary view-more-button">加载更多</button>
</p>

<!-- pagination has path -->
<p class="pagination">
    <a class="pagination__next" href="/ss/pr?page={{pagination.next_page}}">下一页数据</a>
</p>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script type="text/javascript">
const infiniteScroll = new InfiniteScroll( '.container', {
  // options
  path: '.pagination__next',  // 设置加载下一页的链接的选择器
  append: '.row',  // 设置加载的内容的选择器
  //history: false,  // 设置是否保存历史记录
  //scrollThreshold:20,// 设置距离底部多少距离时加载下一页，默认为 "200"
  hideNav: '.pagination',
  status:'.scroller-status',
  button: '.view-more-button',
  scrollThreshold: false,

});

</script>

{% endblock %}