{% 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);">
        <a
            target="_blank"
            href="{{ path('app_kanji_register', {
                codepoint: char.codepoint
            }) }}"
        >
        <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' : '' }}
            ">
                {{- char.str -}}
            </div>
            <div style="
                font-size: 0.5em;
                padding-bottom: 2px;
            ">
                {{ char.codepoint }}
            </div>
        </div>
        </a>
        </div>
    {% endfor %}
    </div>
</div>
{% endblock %}