{% extends "base" %}

{% block content %}
<h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
{% if content.japanese %}
<div lang="ja">
    <script>
        let kyujitai = false;
        function kyujitaiToggle() {
            document.querySelectorAll("[data-kyujitai]").forEach(segment => {
                let newText = segment.getAttribute("data-kyujitai");
                segment.setAttribute("data-kyujitai", segment.firstChild.data);
                segment.firstChild.data = newText;
            })
            kyujitai = !kyujitai;
        }
    </script>
    <button onclick="kyujitaiToggle(); this.innerHTML = kyujitai ? '新字体' : '旧字体'">旧字体</button>
    {% for line in content.japanese %}
        {% for subline in line %}
            <p>
                {%- for word in subline -%}
                    {%- if word.dictionary -%}
                        <a href="{{ word.dictionary }}" target="_blank"{% if word.pos %} class="{{ word.pos }}" title="{{ word.pos }}"{% endif %}>
                    {%- endif -%}
                    {% for segment in word.text -%}
                        <ruby{% if segment.kyujitai %} data-kyujitai="{{ segment.kyujitai }}"{% endif %}>{{ segment.kanji }}<rp>(</rp><rt>{{ segment.furigana | safe }}</rt><rp>)</rp></ruby>
                    {%- endfor -%}
                    {%- if word.dictionary -%}
                        </a>
                    {%- endif -%}
                {%- endfor -%}
            </p>
        {% endfor %}
    {% endfor %}
</div>
{% endif %}
{{ content.text | safe }}
{% if content.translation %}
    <p>
        Translation
        {% if content.translation.author %}by {{ content.translation.author }}{% endif %}
        {% if content.translation.site %} via
            {% if content.translation.site.link %}
                <a href="{{ content.translation.site.link }}" target="_blank">{{ content.translation.site.name }}</a>
            {% else %}
                {{ content.translation.site.name }}
            {% endif %}
        {%- endif -%}
    </p>
{%- endif -%}
{%- if content.suggester -%}
    <p><em>This challenge was suggested by <strong>{{ content.suggester }}</strong> using the <code>-h suggest</code> command.</code></em></p>
{%- endif -%}
{% endblock %}