{% extends 'ewoooc_base.html' %}
{% block title %}缺貨治理 - EwoooC{% 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>在缺貨清單鎖定待發送與失敗項目。</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>
        </ul>
      </div>
    </div>
  </section>

</div>
{% endblock %}