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

{% block title %}漢字索引{% 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; }

  .none, .ignored { opacity: 0.15; }
  .completed      { background-color: rgba(0 255 0 / 0.05); }
</style>

<div>
  <div class="d-flex align-items-center p-2 ps-3 pe-3 border-bottom sticky-top bg-body">
    <h1 class="text-left p-0 mb-0 flex-grow-1">{{ block('title') }}</h1>
    <form
      class="btn-group"

      hx-target="#baseModalContent"
      hx-swap="innerHTML"
      hx-get="{{ path('app_kanji_view') }}"
    >
      <input
        type="text" name="char" placeholder="字 / 5B57"
        class="form-control w-auto"
      >
      <butto
        type="submit"
        class="btn btn-secondary"

        data-bs-toggle="modal"
        data-bs-target="#baseModal"
      >
        検索
      </button>
    </form>
  </div>
  <div
    class="pd-flex flex-column"

    hx-target="#baseModalContent"
    hx-swap="innerHTML"
  >
  {% for char in characters %}
    {% if char.codepoint ends with '0' %}
    <div class="
      d-flex p-1 ps-3 pe-3
      {{ char.codepoint in completed ? 'completed' : '' }}
    ">
    {% endif %}
    <div style="width: calc(100% / 16);">
    <div
      class="
        border text-center rounded
        {{ char.lists|length == 0
          ? 'none'
          :  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>
    {% if char.codepoint ends with 'f' %}
    </div>
    {% endif %}
  {% endfor %}
  </div>

  <div class="bg-body border-top p-2 sticky-bottom">
    {% set learnt_kanken = char_info.lists.unicode|intersect_key(char_info.lists.kanken)|length %}
    {% set total_kanken  = char_info.lists.kanken|length %}
    Kanken {{ learnt_kanken }}/{{ total_kanken }} ({{ ((learnt_kanken/total_kanken) * 100)|number_format(2) }}%)
    |
    {% set sn_kanken = char_info.lists.sn|intersect_key(char_info.lists.kanken)|length %}
    {{ sn_kanken }}/{{ total_kanken }} ({{ ((sn_kanken/total_kanken) * 100)|number_format(2) }}%)
  </div>
</div>
{% endblock %}