{% extends 'base.html' %}

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

{% block style %}
    .table-container {
      min-height: 400px; /* 设置最小高度，可以根据需要调整 */
      max-height: 650px;
      overflow-y: auto;  /* 启用垂直滚动条 */
      border: 1px solid #ddd; /* 可选：为容器添加边框 */
    }
    table {
      width: 100%;
      border-collapse: collapse; /* 防止表格出现双线边框 */
    }
    thead th {
      position: sticky;
      top: 0;
      background-color: #f8f9fa; /* 表头背景色，防止滚动时透明 */
      z-index: 1;
    }
    /* 缩小表格行高 */
    .table-sm th,
    .table-sm td {
        padding: 0.2rem; /* 调整这里的值来改变行高 */
    }

    .form-label {
        font-size: 1em; /* 标签的字体大小 */
    }

    .form-value {
        font-size: 0.5em; /* 值的字体稍小 */
    }
    #warnImg {
        max-width: 100%; /* 图片宽度最多为模态框的宽度 */
        height: auto;    /* 保持图片的宽高比 */
        display: block;  /* 保证图片独占一行 */
        margin: 0 auto;  /* 居中显示 */
    }
    /* 使视频播放器适应模态框 */
    #videoPlayer {
        width: 100%;
        height: auto; /* 保持视频比例 */
    }

{% endblock %}

{% block content %}
    <!-- 模态框区域 -->
    <!-- 查看报警信息模态框 -->
    <div class="modal fade" id="showWarn" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title">报警详情</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <div class="form-group mb-2">
                      <label for="modelName" class="form-label">算法名称:</label>
                      <label class="form-label" class="form-value" id="modelName"></label>
                  </div>
                  <div class="form-group mb-2">
                      <label for="channleName" class="form-label">视频通道:</label>
                      <label class="form-label" class="form-value" id="channleName"></label>
                  </div>
                  <div class="form-group mb-2">
                      <label for="warnTime" class="form-label">报警时间:</label>
                      <label class="form-label" class="form-value" id="warnTime"></label>
                  </div>
                  <div class="form-group mb-2">
                      <label for="warnImg" class="form-label">报警图片:</label>
                      <img id="warnImg"></img>
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelButton_model">关闭</button>
              </div>
          </div>
      </div>
    </div>
    <!-- 查看报警视频模态框 -->
    <div class="modal fade" id="showVideo" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title">报警视频</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <video id="videoPlayer" controls width="640">Your video tag.</video>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelButton_viedeo">关闭</button>
              </div>
          </div>
      </div>
    </div>



    <!-- 搜索区 -->
    <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="delPageButton" type="button" class="btn btn-primary">清除报警</button>
<!--        <button id="exportButton" type="button" class="btn btn-primary">-->
<!--      导出报警-->
<!--     </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-warn" class="table-group-divider">
        <!-- 表格数据动态填充 -->
      </tbody>
    </table>
  </div>
    <nav>
      <ul id="pagination-warn" class="pagination">
        <!-- 分页控件将动态生成 -->
      </ul>
    </nav>

</div>
{% endblock %}

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