#{include file="./Header.html"}
<main class="container py-4">
  <!-- 订单查询面板 -->
  <div class="panel">
    <div class="panel-header">
      <span class="icon">🔍</span>
      <h6 class="panel-title">订单查询</h6>
    </div>
    <div class="panel-body">
      <form class="order-query-form">
        <div class="d-flex justify-content-center align-items-center gap-3">
          <div style="width: 300px;">
            <input type="text" class="form-control" name="keywords" value="#{$tradeNo}" placeholder="订单号/联系方式">
          </div>
          <div>
            <button type="submit" class="btn btn-primary btn-search-query">
              <i class="fa-duotone fa-regular fa-search me-2"></i>查询订单
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- 查询结果区域 -->
  <div class="order-results" style="display: none;">
    <div class="panel">
      <div class="panel-header">
        <span class="icon">📋</span>
        <h6 class="panel-title">查询结果</h6>
      </div>
      <div class="panel-body">
        <div class="order-list">

        </div>
      </div>
    </div>
  </div>

  <!-- 无结果提示 -->
  <div class="no-results" style="display: none;">
    <div class="panel pt-3">
      <div class="panel-body text-center">
        <div class="mb-3">
          <i class="fa-duotone fa-regular fa-search" style="font-size: 3rem; color: #6b7280;"></i>
        </div>
        <h6 class="text-muted">未找到相关订单</h6>
        <p class="text-muted mb-0">请检查输入信息是否正确，或联系客服协助查询</p>
      </div>
    </div>
  </div>

  <!-- 加载状态 -->
  <div class="loading-state" style="display: none;">
    <div class="panel">
      <div class="panel-body text-center">
        <div class="mb-3 mt-3">
          <i class="fa-duotone fa-regular fa-spinner-third icon-spin" style="font-size: 2rem; color: var(--acg-primary);"></i>
        </div>
        <p class="text-muted mb-0">正在查询订单信息...</p>
      </div>
    </div>
  </div>
</main>


#{ready("/assets/user/controller/index/query.js")}
#{include file="./Footer.html"}