{% extends "layout.html" %}}

{% block content %}
    <div>
    <div class="container">
        <div class="row">
            <div class="col-md-7 col-sm-4" >
            <a class="btn btn-success" style="margin: 10px" href="/myadmin/add" target="_blank"> {# blank表示在新页面打开#}
                <i class="bi bi-plus-circle-fill"></i>
                添加管理员
            </a>
            </div>
            <div class="col-md-5 col-sm-8 ">
                <form method="get">
                <div class="d-flex flex-row">
                    <input class="form-control me-2" type="search" name="q" value="{{ search_data }}" style="margin: 10px" placeholder="搜索" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit" style="margin: 10px; width: 100px"><strong>搜索</strong></button>
                </div>
                </form>
            </div>
        </div>
        <ul class="list-group">
            <li class="list-group-item list-group-item-dark">
                <i class="bi bi-calendar2-event-fill"></i>
                <strong>用户列表</strong>
            </li>
            <li class="list-group-item">
                <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">账号</th>
                            <th scope="col">用户名</th>
                            <th scope="col">密码</th>
                            <th scope="col">重置密码</th>
                            <th scope="col">操作</th>
                        </tr>
                      </thead>
                      <tbody>
                      {% for obj in queryset %}
                        <tr>
                            <td>{{ obj.id }}</td>
                            <td>{{ obj.user_name}}</td>
                            <td>*******</td>
                            <td>
                              <a class="btn btn-danger btn-sm" href="/myadmin/{{ obj.id }}/reset">重置密码</a>
                          </td>
                          <td>
                              <a class="btn btn-primary btn-sm" href="/myadmin/{{ obj.id }}/edit">编辑</a>
                              <a class="btn btn-danger btn-sm" href="/myadmin/delete/?nid={{ obj.id }}">删除</a>
                          </td>
                        </tr>
                      {% endfor %}
                      </tbody>
                    </table>
            </li>
        </ul>
        <div style="display: flex; justify-content: center;"> {# 居中 #}
                    {{ page_nav_string }}
        </div>
    </div>
</div>
{% endblock %}