{% extends 'base.html' %}

{% block scripts %}<script src="/static/kanji.js" defer></script>{%endblock %}

{% block styles %}
  <link rel="stylesheet" href="{{ url_for('static', filename='kanji.css') }}">
{% endblock %}

{% block header %}
<h1>{% block title %}{{localize("kanji")}} - {{ kanji.character }}{% endblock %}</h1>
{% endblock %}

{% block content %}
<div id="entry" lang="ja">
  <div id="kanji-and-meaning">
    <div id="kanji-box">
      <div id="character-box">
        <span id="kanji">{{ kanji.character }}</span>
      </div>
      <div id="metadata-box">
        <span id="joyo-class">{{ kanji.is_joyo }}</span>
        <span id="level">{{ kanji.level }}級</span>
        <span id="stroke-count">{{ kanji.strokes }}</span> (<span id="radical">{{ kanji.radical }}</span> + <span id="radical-added-strokes">{{ kanji.added_strokes }}</span>)
      </div>
    </div>
    <div id="meaning-box">
      <p id="meanings">{{ kanji.meanings }}</p>
    </div>
  </div>
  <div id="readings-and-glyph-origin">
    <div id="reading-box">
      <ul id="reading-list-list">
        {% if kanji.goon %}<li id="goon"><ul class="reading-list">{% for reading in kanji.goon %}<li class="goon-reading">{{reading|safe}}</li>{% endfor %}</ul></li>{% endif %}
        {% if kanji.kanon %}<li id="kanon"><ul class="reading-list">{% for reading in kanji.kanon %}<li class="kanon-reading">{{reading|safe}}</li>{% endfor %}</ul></li>{% endif %}
        {% if kanji.kanyoon %}<li id="kanyoon"><ul class="reading-list">{% for reading in kanji.kanyoon %}<li class="kanyoon-reading">{{reading|safe}}</li>{% endfor %}</ul></li>{% endif %}
        {% if kanji.toon %}<li id="toon"><ul class="reading-list">{% for reading in kanji.toon %}<li class="toon-reading">{{reading|safe}}</li>{% endfor %}</ul></li>{% endif %}
        {% if kanji.soon %}<li id="soon"><ul class="reading-list">{% for reading in kanji.soon %}<li class="soon-reading">{{reading|safe}}</li>{% endfor %}</ul></li>{% endif %}
        {% if kanji.kun %}<li id="kun"><ul class="reading-list">{% for reading in kanji.kun %}<li class="kun-reading">{{reading|safe}}</li>{% endfor %}</ul></li>{% endif %}
      </ul>
    </div>
    <div id="glyph-origin-box">
      <p id="glyph-origin">{{ kanji.glyph_origin }}</p>
    </div>
  </div>
  {% endblock %}
</div>