{% extends 'ewoooc_base.html' %}
{% block title %}廠商缺貨通知系統 - WOOO TECH{% endblock %}

{#
  v3 改寫重點：
  - 從獨立 HTML 改為 extends ewoooc_base，吃到 sidebar + tokens
  - 移除紫漸層 navbar (#4F46E5 → #6366F1) 與深藍漸層 (#1e3c72)
  - 4 色功能卡片：藍/綠/紫/橘 → 焦糖/橄欖/赤陶/蜂蜜（語意 token）
  - 卡片用 Jinja loop + dict 收斂 4 段重複 markup
  - 移除 "card-import"（缺貨清單沒匯入卡片，源檔有3張卡）
#}

{% block extra_css %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-home.css') }}">
{% endblock %}

{% block ewooo_content %}
<div class="home-page" data-screen-label="home">

  <!-- ============ Hero ============ -->
  <header class="home-hero">
    <div class="home-hero__lead">
      <h1 class="home-hero__title">
        <i class="fas fa-box-open" aria-hidden="true"></i>
        廠商缺貨通知自動化系統
      </h1>
      <p class="home-hero__subtitle">管理缺貨商品資料、廠商聯絡資訊，自動發送缺貨通知郵件</p>
    </div>
    <div class="home-hero__decor" aria-hidden="true"></div>
  </header>

  <!-- ============ Function Cards ============ -->
  {% set fn_cards = [
    {
      'variant': 'list',
      'icon': 'list-ul',
      'title': '缺貨清單',
      'desc': '查看、編輯、篩選已匯入的缺貨商品，支援批次操作、發送郵件與排序',
      'cta': '查看清單',
      'cta_icon': 'search',
      'href': '/vendor-stockout/list'
    },
    {
      'variant': 'vendor',
      'icon': 'building',
      'title': '廠商管理',
      'desc': '管理廠商基本資料與聯絡郵件，支援多個郵件地址設定',
      'cta': '管理廠商',
      'cta_icon': 'users-cog',
      'href': '/vendor-stockout/vendor-management'
    },
    {
      'variant': 'history',
      'icon': 'history',
      'title': '發送歷史',
      'desc': '查看郵件發送記錄、成功率統計，以及失敗項目的錯誤訊息',
      'cta': '查看記錄',
      'cta_icon': 'clock',
      'href': '/vendor-stockout/history'
    }
  ] %}

  <div class="row g-4 home-cards">
    {% for c in fn_cards %}
    <div class="col-md-6 col-lg-4">
      <article class="fn-card fn--{{ c.variant }}">
        <div class="fn-card__body">
          <div class="fn-card__icon-wrap">
            <i class="fas fa-{{ c.icon }}" aria-hidden="true"></i>
          </div>
          <h3 class="fn-card__title">{{ c.title }}</h3>
          <p class="fn-card__desc">{{ c.desc }}</p>
          <a href="{{ c.href }}" class="fn-card__cta">
            <i class="fas fa-{{ c.cta_icon }}" aria-hidden="true"></i>
            <span>{{ c.cta }}</span>
            <i class="fas fa-arrow-right fn-card__cta-arrow" aria-hidden="true"></i>
          </a>
        </div>
      </article>
    </div>
    {% endfor %}
  </div>

  <!-- ============ Help / Manual ============ -->
  <section class="home-manual">
    <header class="home-manual__head">
      <h2 class="home-manual__title">
        <i class="fas fa-info-circle" aria-hidden="true"></i>
        系統使用說明
      </h2>
    </header>
    <div class="row g-4">
      <div class="col-md-6">
        <h3 class="home-manual__subhead">
          <i class="fas fa-arrow-right" aria-hidden="true"></i>基本流程
        </h3>
        <ol class="home-manual__list home-manual__list--ordered">
          <li>下載 Excel 範本，填入缺貨商品資料</li>
          <li>在「缺貨清單」使用 Excel 匯入功能上傳檔案</li>
          <li>在「缺貨清單」中檢視並編輯資料</li>
          <li>在「廠商管理」中設定廠商郵件</li>
          <li>在「缺貨清單」勾選商品後發送郵件通知廠商</li>
          <li>在「發送歷史」中查看執行結果</li>
        </ol>
      </div>
      <div class="col-md-6">
        <h3 class="home-manual__subhead home-manual__subhead--alt">
          <i class="fas fa-arrow-right" aria-hidden="true"></i>功能特色
        </h3>
        <ul class="home-manual__list">
          <li>自動偵測重複資料並標記</li>
          <li>支援一次匯入多筆缺貨記錄</li>
          <li>依廠商分組自動產生郵件附件</li>
          <li>郵件發送前可預覽內容</li>
          <li>完整的操作記錄與錯誤追蹤</li>
          <li>支援失敗郵件重新發送</li>
        </ul>
      </div>
    </div>
  </section>

</div>
{% endblock %}