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

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

{% block body %}
<div class="example-wrapper">
    <h1 class="text-center p-2 mb-2">{{ block('title') }}</h1>
    <div class="d-flex flex-wrap m-2">
    {% for char in characters %}
        <div style="width: calc(100% / 16);">
        <div
            class="border text-center rounded"
            style="
                {% if char.lists.unicode %}
                border-color: green !important;
                border-width: 3px !important;
                {% endif %}
                margin: 2px;
                overflow: hidden;
            "
        >
            <div class="
                border-bottom fs-4 pb-1
                {{ char.lists.taiwan  ? 'bg-primary text-white' : '' }}
                {{ char.lists.sln     ? 'bg-danger  text-white' : '' }}
                {{ char.lists.sn      ? 'bg-warning text-black' : '' }}
            ">
                {% 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="
                font-size: 0.5em;
                padding-bottom: 2px;
            ">
                {% if not char.lists.unicode %}
                <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 %}