{% extends 'base.html' %}

{% block title %}ZFSAFE{% endblock %}

<!-- 页面样式块 -->
{% block style %}
/* 表格固定行高与居中 */
.table-fixed tbody tr { height: 40px; }
.table-fixed td, .table-fixed th { vertical-align: middle; text-align: center; }
/* 操作按钮间距 */
.asset-op-btn { margin: 0 2px; }

.offcanvas {
  z-index: 1060 !important;
}

#historyPortTable {
  table-layout: fixed;
  width: 100%; /* 或者你想要的整体宽度 */
}
#historyPortTable th {
  /* 你在 JS 动态插入 style="width:120px" */
}
#historyPortTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

{% endblock %}

<!-- 页面内容块 -->
{% block content %}
<div class="container-xxl">
  <ul class="nav nav-tabs" id="assetTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="ipTab" data-bs-toggle="tab" data-bs-target="#ipAssets" type="button" role="tab">IP 资产</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="domainTab" data-bs-toggle="tab" data-bs-target="#domainAssets" type="button" role="tab">域名资产</button>
    </li>
  </ul>
  <div class="tab-content p-1 border border-top-0" id="assetTabContent">
    <!-- IP 资产 -->
    <div class="tab-pane fade show active" id="ipAssets" role="tabpanel">
      <!-- 查询区 -->
      <div class="row mb-3">
        <div class="col-3"><input type="text" class="form-control" id="ipFilter" placeholder="资产 IP"></div>
        <div class="col-3"><input type="text" class="form-control" id="userFilter" placeholder="所属用户"></div>
        <div class="col-3">
          <select class="form-select" id="riskFilter">
            <option value="">风险级别</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
          </select>
        </div>
        <div class="col-3 text-end">
          <button class="btn btn-primary" id="ipSearchBtn">查询</button>
          <button class="btn btn-primary" id="ipExportBtn">导出</button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-responsive">
        <table class="table table-bordered table-fixed" id="ipTable">
          <thead>
            <tr>
              <th style="width:50px;">序号</th>
              <th>资产IP</th>
              <th>所属用户</th>
              <th style="width:50px;">风险</th>
              <th style="width:10%;">最新检测时间</th>
              <th style="width:50px;">端口</th>
              <th style="width:100px">关联域名</th>
              <th style="width:35%;">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- JS 动态插入 15 行 -->
          </tbody>
        </table>
      </div>
      <!-- 分页 -->
      <nav class="mt-0">
        <ul class="pagination justify-content-end" id="ipPagination">
          <li class="page-item"><a class="page-link" href="#" id="ipPrev">上一页</a></li>
          <li class="page-item"><a class="page-link" href="#" id="ipNext">下一页</a></li>
        </ul>
      </nav>
    </div>
    <!-- 域名资产 -->
    <div class="tab-pane fade" id="domainAssets" role="tabpanel">
       <!-- 筛选区域 -->
      <div class="row mb-3">
        <div class="col-3"><input type="text" class="form-control" id="urlFilter" placeholder="域名"></div>
        <div class="col-3"><input type="text" class="form-control" id="ownerFilter" placeholder="所属用户"></div>
        <div class="col-3"><input type="text" class="form-control" id="emailFilter" placeholder="注册邮箱"></div>
        <div class="col-3 text-end">
          <button class="btn btn-primary" id="urlSearchBtn">查询</button>
          <button class="btn btn-primary" id="urlExportBtn">导出</button>
        </div>
      </div>
      <!-- 表格区域 -->
      <div class="table-responsive">
        <table class="table table-bordered table-fixed" id="urlTable">
          <thead>
            <tr>
              <th style="width:5%;">序号</th>
              <th style="width:15%;">域名</th>
              <th style="width:15%;">所属用户</th>
              <th style="width:10%;">注册邮箱</th>
              <th style="width:10%;">最新检测时间</th>
              <th style="width:10%;">过期日期</th>
              <th style="width:5%;">IP</th>
              <th style="width:30%;">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- JS 动态插入 10 行 -->
          </tbody>
        </table>
      </div>
      <!-- 分页控件 -->
      <nav class="mt-0">
        <ul class="pagination justify-content-end" id="urlPagination">
          <li class="page-item"><a class="page-link" href="#" id="urlPrev">上一页</a></li>
          <li class="page-item"><a class="page-link" href="#" id="urlNext">下一页</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<!--  IP资产信息------------------------- -->
<!-- 基本信息 Modal -->
<div class="modal fade" id="ipBasicInfoModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title fw-bold">基本信息</h3>
        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <form id="ipInfoForm">
          <div class="row gy-3">
            <div class="col-md-6">
              <label class="fw-bold">IP 地址：</label>
              <span id="info_ip"></span>
            </div>
            <div class="col-md-6">
              <label class="fw-bold">风险等级：</label>
              <span id="info_risk"></span>
            </div>

            <div class="col-md-12">
              <label class="fw-bold">最新检测时间：</label>
              <span id="info_scanTime"></span>
            </div>

            <div class="col-md-6">
              <label class="fw-bold">所属用户：</label>
              <span id="info_owner"></span>

            </div>
            <div class="col-md-6">
              <button type="button" id="btnChooseOwner" class="btn btn-primary btn-sm ms-3">
                修改
              </button>
              <button type="button" id="btnDelOwner" class="btn btn-danger btn-sm ms-3">
                删除
              </button>
            </div>

            <div class="col-md-6">
              <label class="fw-bold mb-1" for="contactName">联系人：</label>
              <span id="contactName"></span>
<!--              <input id="contactName" name="contactName" class="form-control">-->
            </div>
            <div class="col-md-6">
              <label class="fw-bold mb-1" for="contactPhone">联系电话：</label>
              <span id="contactPhone"></span>
<!--              <input id="contactPhone" name="contactPhone" class="form-control">-->
            </div>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button id="saveIpInfo" class="btn btn-primary">保存</button>
        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
  <!-- 侧边 Drawer：选择所属用户 -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="ownerDrawer">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">选择所属用户</h5>
    <button class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body p-3">
    <div class="input-group mb-3">
      <input type="text" id="ownerSearchKeyword" class="form-control" placeholder="搜索用户名…">
      <button class="btn btn-outline-secondary" id="btnSearchOwner">搜索</button>
    </div>

    <table class="table table-sm align-middle">
      <thead>
        <tr><th style="width:60px;">序号</th><th>用户名</th><th style="width:80px;">操作</th></tr>
      </thead>
      <tbody id="ownerTableBody"></tbody>
    </table>
  </div>
</div>

<!-- 端口数据 Modal -->
<div class="modal fade" id="portDataModal" tabindex="-1" aria-labelledby="portDataModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:90vw;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="portDataModalLabel">端口数据</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" id="portTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="latestTab" data-bs-toggle="tab" data-bs-target="#latestPane" type="button" role="tab">
              最新数据
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="historyTab" data-bs-toggle="tab" data-bs-target="#historyPane" type="button" role="tab">
              历史数据
            </button>
          </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content pt-0" id="portTabContent">
          <!-- 最新数据 -->
          <div class="tab-pane fade show active" id="latestPane" role="tabpanel">
            <div class="table-responsive" style="max-height:480px; overflow:auto;">
              <table class="table table-bordered table-hover text-center" id="latestPortTable">
                <thead>
                  <tr>
                    <th style="width:60px">序号</th>
                    <th>端口号</th>
                    <th>服务</th>
                    <th>版本号</th>
                    <th>端口状态</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
            <nav>
              <ul class="pagination justify-content-end" id="latestPortPagination">
                <li class="page-item"><a class="page-link" href="#" id="latestPrev">上一页</a></li>
                <li class="page-item"><a class="page-link" href="#" id="latestNext">下一页</a></li>
              </ul>
            </nav>
          </div>

          <!-- 历史数据 -->
          <div class="tab-pane fade" id="historyPane" role="tabpanel">
            <div class="table-responsive" style="height:515px; overflow:auto;">
              <table class="table table-bordered text-center" id="historyPortTable" style="table-layout:fixed;min-width:600px;">
                <thead></thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-primary" id="exportPortData">导出</button>
        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 漏洞数据 Modal -->
<div class="modal fade" id="vulDataModal" tabindex="-1" aria-labelledby="vulDataModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:90vw;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="vulDataModalLabel">漏洞数据</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <!-- 搜索区域 -->
        <div class="row search-area">
          <div class="col-3">
            <input
              type="text"
              class="form-control"
              id="vulNodeName"
              placeholder="节点名称"
            />
          </div>
          <div class="col-3">
            <input
              type="text"
              class="form-control"
              id="vulType"
              placeholder="漏洞类型"
            />
          </div>
          <div class="col-3">
            <select class="form-select" id="vulLevel">
              <option value="">漏洞级别</option>
              <option value="低危">低</option>
              <option value="中危">中</option>
              <option value="高危">高</option>
            </select>
          </div>
          <div class="col-2">
            <button class="btn btn-primary" id="vulSearchBtn">
              查询
            </button>
            <button class="btn btn-primary" id="vulExportBtn">
              导出
            </button>
          </div>
        </div>
        <table class="table table-bordered table-hover" id="vulTable">
          <colgroup>
            <col style="width: 5%;">
            <col style="width: 35%;">
            <col style="width: 15%;">
            <col style="width: 10%;" class="wrap-cell">
            <col style="width: auto;">
          </colgroup>
          <thead>
            <tr>
              <th>序号</th>
              <th>节点路径</th>
              <th>漏洞类型</th>
              <th>漏洞级别</th>
              <th>漏洞说明</th>
            </tr>
          </thead>
          <tbody>
            <!-- 默认显示 10 行 -->
          </tbody>
        </table>
        <!-- 分页控件 -->
        <nav>
          <ul class="pagination justify-content-end" id="vulPagination">
            <li class="page-item"><a class="page-link" href="#" id="vulPrev">上一页</a></li>
            <li class="page-item"><a class="page-link" href="#" id="vulNext">下一页</a></li>
          </ul>
        </nav>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 域名数据 Modal -->
<div class="modal fade" id="urlDataModal" tabindex="-1" aria-labelledby="urlDataModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:90vw;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="urlDataModalLabel">关联域名</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" id="urlTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="urlLatestTab" data-bs-toggle="tab" data-bs-target="#urlLatestPane" type="button" role="tab">
              最新数据
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="urlHistoryTab" data-bs-toggle="tab" data-bs-target="#urlHistoryPane" type="button" role="tab">
              历史数据
            </button>
          </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content pt-3" id="urlTabContent">
          <!-- 最新数据 -->
          <div class="tab-pane fade show active" id="urlLatestPane" role="tabpanel">
            <div class="table-responsive mb-2" style="max-height:480px; overflow:auto;">
              <table class="table table-bordered table-hover text-center" id="latestUrlTable">
                <thead>
                  <tr>
                    <th style="width:50px">序号</th>
                    <th>域名</th>
                    <th>子域名</th>
                    <th>注册人</th>
                    <th>注册邮箱</th>
                    <th>创建时间</th>
                    <th>过期时间</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
            <nav>
              <ul class="pagination justify-content-end" id="latestUrlPagination">
                <li class="page-item"><a class="page-link" href="#" id="latestUrlPrev">上一页</a></li>
                <li class="page-item"><a class="page-link" href="#" id="latestUrlNext">下一页</a></li>
              </ul>
            </nav>
          </div>

          <!-- 历史数据 -->
          <div class="tab-pane fade" id="urlHistoryPane" role="tabpanel">
            <div class="table-responsive mb-2" style="max-height:480px; overflow:auto;">
              <table class="table table-bordered table-hover text-center" id="historyUrlTable">
                <thead>
                  <tr>
                    <th style="width:50px">序号</th>
                    <th>时间</th>
                    <th>变化类型</th>
                    <th>关联域名</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
            <nav>
              <ul class="pagination justify-content-end" id="historyUrlPagination">
                <li class="page-item"><a class="page-link" href="#" id="historyUrlPrev">上一页</a></li>
                <li class="page-item"><a class="page-link" href="#" id="historyUrlNext">下一页</a></li>
              </ul>
            </nav>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" id="exportUrlData">导出</button>
        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- url资产信息-------------------------- -->
<!-- 基本信息 Modal -->
<div class="modal fade" id="urlBasicInfoModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title fw-bold">基本信息</h3>
        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <form id="urlInfoForm">
          <div class="row gy-3">
            <div class="col-md-12">
              <label class="fw-bold">URL：</label>
              <span id="info_url"></span>
            </div>
            <div class="col-md-12">
              <label class="fw-bold">最新检测时间：</label>
              <span id="url_scanTime"></span>
            </div>
            <div class="col-md-6">
              <label class="fw-bold">注册人：</label>
              <span id="url_register"></span>
            </div>
            <div class="col-md-6">
              <label class="fw-bold">注册邮箱：</label>
              <span id="url_email"></span>
            </div>

            <div class="col-md-6">
              <label class="fw-bold">所属用户：</label>
              <span id="url_owner"></span>

            </div>
            <div class="col-md-6">
              <button type="button" id="urlbtnChooseOwner" class="btn btn-primary btn-sm ms-3">
                修改
              </button>
              <button type="button" id="urlbtnDelOwner" class="btn btn-danger btn-sm ms-3">
                删除
              </button>
            </div>

            <div class="col-md-6">
              <label class="fw-bold mb-1" for="contactName">联系人：</label>
              <span id="urlcontactName"></span>
            </div>
            <div class="col-md-6">
              <label class="fw-bold mb-1" for="contactPhone">联系电话：</label>
              <span id="urlcontactPhone"></span>
            </div>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button id="saveUrlInfo" class="btn btn-primary">保存</button>
        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 指向IP Modal -->
<div class="modal fade" id="toIpModal" tabindex="-1" aria-labelledby="urlDataModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:70vw;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold">指向IP</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" id="toipTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="toipLatestTab" data-bs-toggle="tab" data-bs-target="#toipLatestPane" type="button" role="tab">
              最新数据
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="toipHistoryTab" data-bs-toggle="tab" data-bs-target="#toipHistoryPane" type="button" role="tab">
              历史数据
            </button>
          </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content pt-3" id="toipTabContent">
          <!-- 最新数据 -->
          <div class="tab-pane fade show active" id="toipLatestPane" role="tabpanel">
            <div class="table-responsive mb-2" style="max-height:480px; overflow:auto;">
              <table class="table table-bordered table-hover text-center" id="latesttoipTable">
                <thead>
                  <tr>
                    <th style="width:50px">序号</th>
                    <th>IP地址</th>
                    <th>关联时间</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
            <nav>
              <ul class="pagination justify-content-end" id="latesttoipPagination">
                <li class="page-item"><a class="page-link" href="#" id="latesttoipPrev">上一页</a></li>
                <li class="page-item"><a class="page-link" href="#" id="latesttoipNext">下一页</a></li>
              </ul>
            </nav>
          </div>

          <!-- 历史数据 -->
          <div class="tab-pane fade" id="toipHistoryPane" role="tabpanel">
            <div class="table-responsive mb-2" style="max-height:480px; overflow:auto;">
              <table class="table table-bordered table-hover text-center" id="historytoipTable">
                <thead>
                  <tr>
                    <th style="width:50px">序号</th>
                    <th>IP地址</th>
                    <th>取关时间</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
            <nav>
              <ul class="pagination justify-content-end" id="historytoipPagination">
                <li class="page-item"><a class="page-link" href="#" id="historytoipPrev">上一页</a></li>
                <li class="page-item"><a class="page-link" href="#" id="historytoipNext">下一页</a></li>
              </ul>
            </nav>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" id="exporttoipData">导出</button>
        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

<!-- 页面脚本块 -->
{% block script %}
<script src="{{ url_for('main.static', filename='scripts/assets_manager.js') }}"></script>
<script src="{{ url_for('main.static', filename='scripts/jquery-3.2.1.slim.min.js') }}"></script>
{% endblock %}