{% extends 'base.html' %}

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

{% block style %}
    .table-container {
      min-height: 400px; /* 设置最小高度，可以根据需要调整 */
    }
    /* 缩小表格行高 */
    .table-sm th,
    .table-sm td {
        padding: 0.2rem; /* 调整这里的值来改变行高 */
    }
{% endblock %}

{% block content %}
    <!-- 模态框区域 -->

    <!-- 搜索区 -->
<div class="container d-flex flex-column" >
    <div class="row  justify-content-center align-items-center mb-3">
        <div class="col-md-1 text-end"><label class="col-form-label form-label">算法名称:</label></div>
        <div class="col-md-2">
            <select id="modelSelect" class="form-select mr-2" aria-label="Default select example"></select></div>
        <div class="col-md-1 text-end"><label class="col-form-label form-label">视频通道:</label></div>
        <div class="col-md-2">
            <select id="channelSelect" class="form-select mr-2" aria-label="Default select example"></select></div>
        <div class="col-md-1 text-end"><label class="col-form-label form-label">告警时间:</label></div>
        <!-- 时间区间选择器 -->
        <div class="col-md-2"><input id="startTime" type="datetime-local" class="form-control"></div>
        <div class="col-md-2"><input id="endTime" type="datetime-local" class="form-control"></div>

        <div class="col-md-1"><button id="searchMButton" type="button" class="btn btn-primary">查 询</button></div>
    </div>

    <div class="mb-3">
     <button id="delButton" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#channelModal">
      清除报警
     </button>
        <button id="exportButton" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#channelModal">
      导出报警
     </button>
   </div>

  <div class="table-container">
    <table class="table">
      <thead  class="table-light">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">算法名称</th>
          <th scope="col">视频通道</th>
          <th scope="col">报警时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody  id="table-body" class="table-group-divider">
        <!-- 表格数据动态填充 -->
      </tbody>
    </table>
    <nav>
      <ul id="pagination" class="pagination">
        <!-- 分页控件将动态生成 -->
      </ul>
    </nav>
  </div>

</div>
{% endblock %}

{% block script %}
<script src="{{ url_for('main.static', filename='scripts/warn_manager.js') }}"></script>
{% endblock %}