{% extends 'base.html.twig' %}

{% block title %}Kanji Index{% endblock %}

{% block body %}
<style>
    .taiwan       > .kanji-card { background-color: hsl(300, 100%,  80%); color: black; }

    .zhcn-n1      > .kanji-card { background-color: hsl(220, 100%,  90%); color: black; }
    .zhcn-n2      > .kanji-card { background-color: hsl(220, 100%,  80%); color: black; }
    .zhcn-n3      > .kanji-card { background-color: hsl(220, 100%,  60%); color: black; }

    .hsk-n1       > .kanji-card { background-color: hsl(180, 100%,  90%); color: black; }
    .hsk-n2       > .kanji-card { background-color: hsl(180, 100%,  85%); color: black; }
    .hsk-n3       > .kanji-card { background-color: hsl(180, 100%,  80%); color: black; }
    .hsk-n4       > .kanji-card { background-color: hsl(180, 100%,  75%); color: black; }
    .hsk-n5       > .kanji-card { background-color: hsl(180, 100%,  70%); color: black; }
    .hsk-n6       > .kanji-card { background-color: hsl(180, 100%,  65%); color: black; }
    .hsk-n7_9     > .kanji-card { background-color: hsl(180, 100%,  40%); color: black; }

    .kanken-n10   > .kanji-card { background-color: hsl(  0, 100%,  90%); color: black; }
    .kanken-n9    > .kanji-card { background-color: hsl(  0, 100%,  80%); color: black; }
    .kanken-n8    > .kanji-card { background-color: hsl(  0, 100%,  70%); color: black; }
    .kanken-n7    > .kanji-card { background-color: hsl(  0, 100%,  60%); color: black; }
    .kanken-n6    > .kanji-card { background-color: hsl(  0, 100%,  50%); color: black; }
    .kanken-n5    > .kanji-card { background-color: hsl(  0, 100%,  40%); color: black; }
    .kanken-n4    > .kanji-card { background-color: hsl(  0, 100%,  30%); color: white; }
    .kanken-n3    > .kanji-card { background-color: hsl(  0, 100%,  20%); color: white; }
    .kanken-np2   > .kanji-card { background-color: hsl( 85, 100%,  70%); color: black; }
    .kanken-n2    > .kanji-card { background-color: hsl( 80, 100%,  50%); color: black; }
    .kanken-np1   > .kanji-card { background-color: hsl( 60, 100%,  90%); color: black; }
    .kanken-np1n1 > .kanji-card { background-color: hsl( 55, 100%,  70%); color: black; }
    .kanken-n1    > .kanji-card { background-color: hsl( 50, 100%,  50%); color: black; }

    .bushu        > .kanji-card { background-color: hsl( 45, 100%,   0%); color: white; }
    .kyuujitai    > .kanji-card { background-color: hsl( 45, 100%,  30%); color: white; }
    .kyoyou       > .kanji-card { background-color: hsl( 45,   0%,  50%); color: white; }

    .unicode { border:        3px solid green             !important; }
    .sn      { border-bottom: 3px solid var(--bs-danger)  !important; }
    .sln     { border-bottom: 3px solid var(--bs-warning) !important; }
    .ebook   { border-top:    3px solid deeppink          !important; }
    .jimaku  { border-top:    3px solid lightgray         !important; }
</style>

<div class="example-wrapper">
    <h1 class="text-center p-2 mb-2">{{ block('title') }}</h1>
    <div
        class="d-flex flex-wrap m-2"

        hx-target="#baseModalContent"
        hx-swap="innerHTML"
    >
    {% for char in characters %}
        <div style="width: calc(100% / 16);">
        <div
            class="border text-center rounded {{ char.lists|keys|join(' ') }}"
            style="
                margin: 2px;
                overflow: hidden;
            "
            title="{{ char.lists|keys|join("\n") }}"
        >
            <div
                class="kanji-card border-bottom fs-1 pb-1"

                hx-get="{{ path('app_kanji_view', { char: char.codepoint }) }}"

                data-bs-toggle="modal"
                data-bs-target="#baseModal"
            >
                {#{% if char.jiten_href != null %}
                <a
                    target="_blank"
                    href="{{- char.jiten_href -}}"
                    class="border-bottom"
                >
                    {{- char.str -}}
                </a>
                {% else %}#}
                    {{- char.str -}}
                {#{% endif %}#}

            </div>
            <div style="padding-bottom: 2px;">
                {% if char.lists.unicode is not defined %}
                <a
                    target="_blank"
                    href="{{ path('app_kanji_register', {
                        codepoint: char.codepoint
                    }) }}"
                >
                    {{ char.codepoint }}
                </a>
                {% else %}
                    {{ char.codepoint }}
                {% endif %}
            </div>
        </div>
        </div>
    {% endfor %}
    </div>
</div>
{% endblock %}