<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>电影top250</title>
    <link rel="stylesheet" href="{{ url_for("static", filename="assets/css/bootstrap.min.css") }}">
    <link rel="stylesheet" href="{{ url_for("static", filename="assets/css/bootstrap.min.css") }}">
    <link rel="stylesheet" href="{{ url_for("static", filename="assets/css/template-style.css") }}">
    <link href="{{ url_for("static",filename="static/assets/img/favicon.png") }}" rel="icon">
    <link href="{{ url_for("static",filename="assets/img/apple-touch-icon.png") }}" rel="apple-touch-icon">
    <link href="{{ url_for("static",filename="assets/vendor/icofont/icofont.min.css") }}" rel="stylesheet">
    <link href="{{ url_for("static",filename="assets/vendor/boxicons/css/boxicons.min.css") }}" rel="stylesheet">
    <link href="{{ url_for("static",filename="assets/vendor/animate.css/animate.min.css") }}" rel="stylesheet">
    <link href="{{ url_for("static",filename="assets/vendor/venobox/venobox.css") }}" rel="stylesheet">
    <link href="{{ url_for("static",filename="assets/vendor/aos/aos.css") }}" rel="stylesheet">
    <link href="{{ url_for("static",filename="assets/css/style.css") }}" rel="stylesheet">

</head>
<style>
    .wl-Page{
    width: 100%;
}
.wl-pagination{
    display: inline-block;
    margin: 0 -15px;
}
.wl-pagination>li>a{
    display: inline-block;
    padding: 15px;
    border:1px solid #ccc;
    text-decoration: none;
    color: rgb(63, 57, 57);
}
.wl-pagination>li{
    display: inline-block;
    /* float: left; */
    list-style: none;
}

.wl-pagination-bgc>li>a{
    background-color: #f4f4f5;
    color: #303133;
    font-size: 12px;
    padding: 8px;
    border: 1px solid #f4f4f5;
    font-weight: 900;
}
.wl-pagination-bgc .active>a{
    background-color: rgb(0, 153, 255);
    color: #fff;
}
.wl-pagination-bgc>li>a:hover{
    background-color: rgb(0, 153, 255);
    color: #fff;
}


</style>
<body id="reportsPage">
    <div class="" id="home">
{#        --------------------导航栏---------------------#}
         <nav class="navbar navbar-expand-xl">
            <div class="container h-100">
                <a class="navbar-brand" href="#">
                    <h1 class="tm-site-title mb-0">❥(^_-)电影数据分析 (-_^)❥</h1>
                </a>
                <button class="navbar-toggler ml-auto mr-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars tm-nav-icon"></i>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mx-auto h-100">
                        <li class="nav-item">
                            <a class="nav-link " href="{{url_for("index")}}">
                                <i class="fa fa-tags" aria-hidden="true"></i>
                                首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="{{url_for("movies")}}">
                                <i class="fa fa-film" aria-hidden="true"></i>
                                排行榜
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="{{url_for("tj")}}">
                                <i class="fa fa-film" aria-hidden="true"></i>
                                统计
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
        </nav>

{#        --------------------容器1--------------------#}
        <div class="container">
{#            -------------左上角标语-----------#}
            <div class="row">
                <div class="col">
                    <h3 class="section-title">豆瓣电影top250排行榜</h3>
                </div>
            </div>
{#          -----------------容器2-------------#}
             <section class="counts section-bg">
                 <div class="container">
                     <table class="table table-striped">
                         <tr>
                             <td style="width: 10%;">电影排名</td>
                             <td style="width: 10%;">电影中文名称</td>
                             <td style="width: 10%;">电影外国名称</td>
                             <td style="width: 10%;">电影评分</td>
                             <td style="width: 10%;">评分人数</td>
                             <td>电影简介</td>
                             <td style="width: 10%;">其他信息</td>
                         </tr>
                         {% for movie in movies %}
                             <tr>
                                 <td>{{ movie[0] }}</td>
                                 <td><a href="{{ movie[1] }}" target="_blank">{{ movie[2] }}</a></td>
                                 <td>{{ movie[3] }}</td>
                                 <td>{{ movie[4] }}</td>
                                 <td>{{ movie[5] }}</td>
                                 <td>{{ movie[6] }}</td>
                                 <td>{{ movie[7] }}</td>
                             </tr>
                         {% endfor %}
                     </table>
                    {##}
                    <br>
                     <nav class="wl-Page">
                         <ul class="wl-pagination wl-pagination-bgc">
                             <li class="pre">
                                 {% if page - 1 <= 0 %}
                                 <a  href="#">上一页</a>
                                 {% else %}
                                 <a href="{{ url_for('movies', page=(page-1)) }}">上一页</a>
                                 {% endif %}

                             </li>
                             <li class="next">
                                 {% if page  > countnum %}
                                 <a  href="#">下一页</a>
                                 {% else %}
                                 <a href="{{ url_for('movies', page=(page + 1)) }}">下一页</a>
                                 {% endif %}
                             </li>
                            <li> <p>总共{{ countnum }}页</p></li>
                         </ul>


                     </nav>

                 </div>
             </section>


        </div>

{#----------页脚----------#}
  <footer id="footer">
    <div class="footer-top">
      <div class="container">
        <div class="row">

          <div class="col-lg-2 col-md-6 footer-links">
            <h4>快速了解我们</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#">关于我们</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">服务</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="index">首页</a></li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>服务</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#">电影top250</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">电影评分</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">电影短评</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">电影热评</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">电影统计图</a></li>
            </ul>
          </div>

          <div class="col-lg-4 col-md-6 footer-newsletter">
            <h4>关注我们</h4>
            <p>输入你的邮箱，带你了解更多电影信息</p>
            <form action="" method="post">
              <input type="email" name="email"><input type="submit" value="订阅">
            </form>

          </div>

        </div>
      </div>
    </div>

    <div class="container">
      <div class="copyright">Copyright &copy;2022 xxx</div>
      <div class="credits"></div>
    </div>
  </footer><!-- End Footer -->


    </div>
    <script src="{{ url_for("static", filename="assets/js/jquery-3.3.1.min.js") }}"></script>
    <script src="{{ url_for("static", filename="assets/js/moment.min.js") }}"></script>
    <script src="{{ url_for("static", filename="assets/js/Chart.min.js") }}"></script>
    <script src="{{ url_for("static", filename="assets/js/bootstrap.min.js") }}"></script>
    <script src="{{ url_for("static", filename="assets/js/tooplate-scripts.js") }}"></script>
{#    <script src="static/assets/js/jquery-3.3.1.min.js"></script>#}
{#    <script src="static/assets/js/moment.min.js"></script>#}
{#    <script src="static/assets/js/Chart.min.js"></script>#}
{#    <script src="static/assets/js/bootstrap.min.js"></script>#}
{#    <script src="static/assets/js/tooplate-scripts.js"></script>#}

</body>

</html>