{% extends 'base.html' %}

{% block content %}
<div class="container">
    <h2 class="text-center my-3">药品列表</h2>
      <!-- 添加搜索框 -->
      <div class="row">
        <div class="col-sm-12 col-md-offset-10 col-md-2"> <!-- 使用偏移和自适应列宽使其靠右 -->
            <form action="/medicine/search/" method="get" role="form" class="form-inline">
                <div class="form-group">
                    <!-- 将按钮直接放入input-group，移除input-group-append，以便按钮与输入框对齐 -->
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索药品名称" name="query">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-outline-secondary"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">id</th>
                    <th scope="col">名称</th>
                    <th scope="col">描述</th>
                    <th scope="col">价格</th>
                    <th scope="col">库存</th>
                    <th scope="col" class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for medicine in medicines %}
                    <tr>
                        <td>{{ medicine.id }}</td>
                        <td>{{ medicine.name }}</td>
                        <td>{{ medicine.description|truncatewords:15 }}</td>
                        <td>{{ medicine.price }}</td>
                        <td>{{ medicine.stock }}</td>
                        <td class="text-center">
                            <a class="btn btn-primary btn-xs" href="/medicine/{{ medicine.id }}/edit/">编辑</a>
                            <a class="btn btn-danger btn-xs" href="/medicine/{{ medicine.id }}/delete/" >删除</a>

                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <a href="/medicine/create/" class="btn btn-success btn-lg float-right mt-3">添加新药品</a>
</div>


{% endblock %}