{{ define "main" }}
<div class="container-fluid blog_article p-0">
  <section class="bhouseweb_loc_banner">
    <img src="/img/banner/bn_blog@2x.webp" class="banner-img card-img" alt="...">
  </section>
  <div class="content">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item">
          <a href="/">
            <img src="/img/bt_footer_index@2x.png" style="width: 30px; margin: 0 0 5px;" alt="logo">
          </a>
        </li>
        <li class="breadcrumb-item">
          <a href="/blog_main/">成家知識專欄</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page" id="category_name">{{ .Title }}</li>
      </ol>
    </nav>
    <h1>{{ .Title }}</h1>
    <div class="d-flex justify-content-between align-items-center">
      <span>{{ .PublishDate.Format "2006-01-02" }}</span>
      <div class="icon-box">
        <!-- 網址動態載入 -->
        <a href="" id="collection_icon_fb" target="_blank"><img src="/img/icon_fb@2x.png" alt=""></a>
        <a href="" id="collection_icon_line" target="_blank"><img src="/img/icon_line@2x.png" alt=""></a>
      </div>
    </div>
    <span class="line"></span>
    <p>{{ .Params.introduction | safeHTML }}</p>
    <br>
    <div class="question-box">
      <div>
        <p>
          本文目錄
          <!-- {{ .Params.question_box_intro }} -->
        </p>
        {{ .TableOfContents }}
      </div>
    </div>

    <div class="blog-content">
      {{ .Content }}
    </div>

    <div class="d-flex justify-content-between link-box">
      <div class="d-flex flex-wrap align-items-center link-list">
        <p class="m-0">相關標籤：</p>
        <span>
          {{ range .Params.blog_tag }}
          <a href="/blog?tags={{ . }}">{{ . }}</a>
        </span>
        {{ end }}
      </div>
      <div class="icon-box">
        <a href="" id="collection_icon_fb" target="_blank"><img src="/img/icon_fb@2x.png" alt=""></a>
        <a href="" id="collection_icon_line" target="_blank"><img src="/img/icon_line@2x.png" alt=""></a>
      </div>
    </div>

    <a class="nav-link" onclick="previousPage()">
      <p class="readMore text-center">
        <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到成家知識庫
      </p>
    </a>

    <ul class="read-more-list"></ul>

    <!-- <ul class="read-more-list">
        <li>你可能會喜歡的，延伸閱讀點擊標題，看更多設計專欄！</li>
        <li><a href="">【居家風格】 60萬以下 ↓ 超有氛圍的成家夢想</a></li>
        <li><a href="">【認識裝潢裝修】 模組系統櫃板材等級挑選5攻略</a></li>
        <li><a href="">【認識裝潢裝修】 11-20坪 小坪數裝潢裝修，規劃師教你小宅打造大空間</a></li>
        <li><a href="">【認識裝潢裝修】 什麼是輕裝修？輕裝修的定義是什麼？輕裝修包含什麼呢？</a></li>
        <li><a href="">【規劃師服務】 什麼是規劃師？連室內設計師都推薦的「規劃師服務」</a></li>
    </ul> -->
  </div>
</div>
</div>

<script>
  function previousPage() {
    history.back();
  }

  // 延伸閱讀清單
  (function getContentsData() {
    // 線上版網址 https://bhouse3.ptt.cx:9002/api/
    // 本地端網址 http://localhost:9001/api/
    fetch('https://bhouse3.ptt.cx:9002/api/contents?url=/blog').then(res => res.json()).then(list => {
      let title = document.querySelector('h1').innerHTML;
      let lnkList = [];
      // console.log('list', list);
      list.map(e => {
        // 找出符合標題的文章
        if (`${e.url}\/` === window.location.pathname) {
          lnkList = JSON.parse(e.readmore_lnk);
          // let ttlList = JSON.parse(e.readmore_ttl.replace("\/", ""));
        }
      });

      let content = [
        '<li>你可能會喜歡的，延伸閱讀點擊標題，看更多設計專欄！</li>',
      ];

      list.map(item => {
        for (let i = 0; i < lnkList.length; i++) {
          const link = lnkList[i];
          if (link == `${item.url}\/`) {
            /* 分類英文名稱 :
               預售屋客變 pre-sale-house-design-change
               驗收交屋 house-acceptance-check
               預算準備 budget-planning
               認識裝修裝潢 about-interior-decoration
               空間計畫 floor-planning
               居家風格 decoration-style
               家具家電 furnitures-appliances
               驗收入住 design-acceptanc-and-move-in */

            let categorieZh = "";

            if (item.categories.includes("pre-sale-house-design-change")) {
              categorieZh = "預售屋客變";
            } else if (item.categories.includes("house-acceptance-check")) {
              categorieZh = "驗收交屋";
            } else if (item.categories.includes("budget-planning")) {
              categorieZh = "預算準備";
            } else if (item.categories.includes("about-interior-decoration")) {
              categorieZh = "認識裝修裝潢";
            } else if (item.categories.includes("floor-planning")) {
              categorieZh = "空間計畫";
            } else if (item.categories.includes("decoration-style")) {
              categorieZh = "居家風格";
            } else if (item.categories.includes("furnitures-appliances")) {
              categorieZh = "家具家電";
            } else if (item.categories.includes("design-acceptanc-and-move-in")) {
              categorieZh = "驗收入住";
            }

            let dom = `
            <li>
              <a href="https://bhouse.com.tw/${item.url}">【${categorieZh}】 ${item.title}</a>
            </li>`;

            content.push(dom);
          }
        }
        document.querySelector('.read-more-list').innerHTML = content.join(" ");
      })

      let moreList = document.querySelector('.read-more-list');
      if (moreList.children.length === 1) {
        moreList.style.display = 'none';
      }
    })
  })();

  let contentList = document.getElementById("TableOfContents").getElementsByTagName("li");
  for (let i = 0; i < contentList.length; i++) {
    const element = contentList[i];
    if (element.childNodes.length == 0) {
      element.style.display = 'none';
    }
  }
</script>
{{ end }}