{% extends "movie/base.html" %}
{% block content %}
    <style>
        .item {
            display: block;
            float: left;
            font-size: 15px;
            text-align: center;
            margin: 0 25px 10px 0;
            width: 200px;
            background-color: #00b8fd;
        }

        .item .poster_div {
            height: 320px;
            overflow: hidden;
        }
    </style>
    <div class="container">

        {% for movie in movies %}
            <a href="{% url 'movie:detail' movie.pk %}" class="item">
                <div class="poster_div">
                    <img src="/static/movie/poster/{{ movie.imdb_id }}.jpg" alt="">
                    <p>{{ movie.name }}
                        <strong style="color:#e09015">{{ movie.get_score }}</strong>
                    </p>
                </div>
            </a>
        {% endfor %}
    </div>
    
    <nav style="text-align: center;">
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li><a href="{% url 'movie:index' %}?p={{ page_obj.previous_page_number }}">上一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {% endif %}

            {% if left_has_more %}
                <li><a href="{% url 'movie:index' %}?p=1">1</a></li>
                <li><a href="javascript:void(0)">...</a></li>
            {% endif %}
        
            {% for left_page in left_pages %}
                <li><a href="{% url 'movie:index' %}?p={{ left_page }}">{{ left_page }}</a></li>
            {% endfor %}
        
            <li class="active"><a href="javascript:void(0);">{{ current_page }}</a></li>
        
            {% for right_page in right_pages %}
                <li><a href="{% url 'movie:index' %}?p={{ right_page }}">{{ right_page }}</a></li>
            {% endfor %}
            {% if right_has_more %}
                <li><a href="javascript:void(0)">...</a></li>
                <li><a href="{% url 'movie:index' %}?p={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
            {% endif %}
            {% if page_obj.has_next %}
                <li><a href="{% url 'movie:index' %}?p={{ page_obj.next_page_number }}">下一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {% endif %}
        </ul>
    </nav>


{% endblock %}