{% extends 'base.html' %}

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

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

{% endblock %}

{% block content %}
<div class="container d-flex flex-column" >
    <!-- 模态框区域 -->
    <!-- 新增算法模态框 -->
    <div class="modal fade" id="addMM" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="add_model" 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="MNameInput" class="form-label">算法名称:</label>
                      <input type="text" class="form-control" id="MNameInput">
                  </div>
                  <div class="form-group mb-2">
                      <label for="uploadModelFile" class="form-label">上传文件:</label>
                      <input type="file" class="form-control" id="uploadModelFile" accept=".zip">
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelButton_model">取消</button>
                  <button type="button" class="btn btn-primary" id="saveButton_model">保存</button>
              </div>
          </div>
      </div>
    </div>
    <!-- 升级算法模态框 -->
    <div class="modal fade" id="updateMM" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="update_model" 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-3">
                      <label id="update_mname_label" class="form-label">算法名称:</label>
                  </div>
                  <div class="form-group mb-3">
                      <label id="update_mversion_label" class="form-label">当前版本:</label>
                  </div>
                  <div class="form-group mb-3">
                      <label for="uploadModelFile" class="form-label">上传文件:</label>
                      <input type="file" class="form-control" id="updateModelFile" accept=".zip">
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelButton_upmodel">取消</button>
                  <button type="button" class="btn btn-primary" id="saveButton_upmodel">保存</button>
              </div>
          </div>
      </div>
    </div>
    <!-- 配置算法模态框 -->
    <div class="modal fade" id="configMM" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="config_model" 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-3">
                      <label id="config_mname_label" class="form-label">算法名称:</label>
                  </div>
                  <div class="form-group mb-3">
                      <label for="duration_timeInput" class="form-label">持续判断时间(秒):</label>
                      <input type="text" class="form-control" id="duration_timeInput">
                  </div>
                  <div class="form-group mb-3">
                      <label for="proportionInput" class="form-label">占比阈值(0-1):</label>
                      <input type="text" class="form-control" id="proportionInput">
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelButton_config_model">取消</button>
                  <button type="button" class="btn btn-primary" id="saveButton_config_model">保存</button>
              </div>
          </div>
      </div>
    </div>
    <!-- 搜索区 -->
    <div class="row  justify-content-center align-items-center mb-3">
        <div class="col-md-2 text-end"><label class="col-form-label form-label">算法名称:</label></div>
        <div class="col-md-6"><input id="modelNameInput" type="text" class="form-control"></div>
        <div class="col-md-2"><button id="searchMButton" type="button" class="btn btn-primary">查 询</button></div>
    </div>
    <!-- 按钮区 -->
    <div class="mb-3">
        <button id="addModelButton" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addMM">
          新增算法
        </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>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody  id="table-body-model" class="table-group-divider">
        <!-- 表格数据动态填充 -->
      </tbody>
    </table>
    <nav>
      <ul id="pagination-model" class="pagination">
        <!-- 分页控件将动态生成 -->
      </ul>
    </nav>
  </div>

</div>
{% endblock %}

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