{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="model-title">{{ title }}</div>
            <div class="model-list">
                <ul class="list-group">
                    <li class="list-group-item" id="academic_leader">
                        <a href="{% url 'teamApp:academic_leader' %}">学院学科建设带头人</a>
                    </li>
                    <li class="list-group-item" id="computer_science">
                        <a href="{% url 'teamApp:computer_science' %}">计算机系</a>
                    </li>
                    <li class="list-group-item" id="software_engineering">
                        <a href="{% url 'teamApp:software_engineering' %}">软件工程系</a>
                    </li>
                    <li class="list-group-item" id="digital_media">
                        <a href="{% url 'teamApp:digital_media' %}">数字媒体技术系</a>
                    </li>
                    <li class="list-group-item" id="iot_networking">
                        <a href="{% url 'teamApp:iot_networking' %}">物联网与网络工程系</a>
                    </li>
                    <li class="list-group-item" id="math_teaching">
                        <a href="{% url 'teamApp:math_teaching' %}">数学教研室</a>
                    </li>
                    <li class="list-group-item" id="party_work">
                        <a href="{% url 'teamApp:party_work' %}">党政学工队伍</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-9">
            <div class="model-details-title">{{ title }}</div>
            <div class="row">
                {% for article in list %}
                <div class="col-md-4">
                    <div class="thumbnail">
                        {% if article.cover %}
                        <img src="{{ article.cover }}" alt="{{ article.title }}" class="img-responsive" style="height:200px;object-fit:cover;">
                        {% endif %}
                        <div class="caption">
                            <h4 style="text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><a href="{%url 'article' id=article.id%}" target="_blank">{{ article.title }}</a></h4>
                            <p style="text-align:center;color:#999;">{{ article.created_at|date:"Y-m-d" }}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% if list.has_other_pages %}
            <nav>
                <ul class="pagination">
                    {% if list.has_previous %}
                    <li><a href="?page={{ list.previous_page_number }}">&laquo;上一页</a></li>
                    {% endif %}
                    <li><span>第 {{ list.number }} / {{ list.paginator.num_pages }} 页</span></li>
                    {% if list.has_next %}
                    <li><a href="?page={{ list.next_page_number }}">下一页&raquo;</a></li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}