{{#MakeProductionCard}}

<div class="wrap">
  <header>
{{#Tags}}<div class="tags">{{Tags}}</div>{{/Tags}}
  </header>
{{#Image}}<div class="images">{{Image}}</div>{{/Image}}
  <div class="sent-center">
    <div class="jpsentence production">
      {{furigana:SentFurigana}}
      {{^SentFurigana}}<b>{{furigana:VocabFurigana}}</b>{{/SentFurigana}}
    </div>
<div>{{VocabAudio}}{{SentAudio}}</div>
  </div>
</div> <!-- /wrap -->

<script>
    function threeDots() {
        for (const hidden of document.querySelectorAll(".production b, .production strong")) {
            hidden.style.visibility = "visible";
            hidden.innerText = "【" + hidden.innerText.replace(/[^ぁ-んァ-ン]/g, "") + "】";
        }
    }
    /* Splits tags into separate divs */
    function splitTagDiv() {
        const header = document.querySelector("header");
        if (!header) return;
        const split = `{{Tags}}`.split(' ');

        header.innerHTML = "";

        for (const tag of split) {
            if (tag.length < 1)
                continue;
            const tag_elem = document.createElement("div");
            tag_elem.className = "tags";
            tag_elem.innerHTML = tag;
            header.appendChild(tag_elem);
        }
    }

    threeDots()
    splitTagDiv()
</script>

{{/MakeProductionCard}}