#{include file="./Header.html"}
<main class="container py-4">
  <!-- 订单查询面板 -->
  <div class="panel">
    <div class="panel-header">
      <span class="icon">🔍</span>
      <h6 class="panel-title">#{t("订单查询")}</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="#{t('订单号/联系方式')}">
          </div>
          <div>
            <button type="submit" class="btn btn-primary btn-search-query">
              <i class="fa-duotone fa-regular fa-search me-2"></i>#{t("查询订单")}
            </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">#{t("查询结果")}</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">#{t("未找到相关订单")}</h6>
        <p class="text-muted mb-0">#{t("请检查输入信息是否正确，或联系客服协助查询")}</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">#{t("正在查询订单信息...")}</p>
      </div>
    </div>
  </div>
</main>


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