@use search::kanji::result::Item;
@use crate::BaseData;
@use super::search_help;
@use crate::templ_utils::*;
@use crate::templates::overlays::page::{decomposition_graph_html};

@(data: &BaseData, kanji: Vec<Item>)

@if kanji.is_empty() {
  @:search_help(&data, data.gettext("kanji").as_str())
}

<script defer src="/variable_assets/@data.asset_hash/assets/js/lib/d3.js"></script>
<script defer src="/variable_assets/@data.asset_hash/assets/js/page/kanjiPage.js"></script>
<link rel="stylesheet" type="text/css" href="/variable_assets/@data.asset_hash/assets/css/page/multiPage/kanji.css">
<link rel="stylesheet" type="text/css" href="/variable_assets/@data.asset_hash/assets/css/page/kanjiPage.css">

<!-- Decomposition graph -->
@:decomposition_graph_html(data)

<!-- Inner Main Body -->
@for (kpos, k_item) in kanji.iter().enumerate() {
  @if kpos > 0 {
    <br>
  }
  
  <div class="d-flex kanji-entry-parent">
    
      <!-- Left side: Kanji -->
      <div class="kanji-entry left detail d-flex flex-column">
         <span class="kanji-preview x-large"  @if k_item.has_compositions { onclick='generateTreeDiagram("@k_item.kanji.literal")' }>
           @k_item.kanji.literal
         </span>
         <div class="kanji-preview-info">
           <div class="notes stroke"><b>@data.ngettext_fmt("{} stroke", k_item.kanji.stroke_count as u64, &[k_item.kanji.stroke_count])</b> </div>
            <div class="rad-parts-parent">
                <div class="notes rad"><b>@data.gettext("Radical"):</b>
                    <br>
                    <a class="clickable no-align" href="/search/@k_item.kanji.radical.literal?t=1">@k_item.get_radical()</a>
                    @if k_item.get_rad_len() > 7 {
                    <br>
                    }
                    @if let Some(ref translations) = k_item.kanji.radical.translations {
                        (@translations.join(", "))
                    }
                </div>
                @if !k_item.kanji.parts.is_empty() {
                <div class="notes parts"><b>@data.ngettext("Part", k_item.get_parts_count() as u64):</b>
                    <br>
                    @for (pos, part) in k_item.kanji.parts.iter().enumerate() {
                        @if pos > 0 {
                            <span class="tags no-margin fat">,</span>
                        }
                    <a class="clickable no-align" href="/search/@part?t=1">@part</a>
                    }
                </div>
                }
            </div>
         </div>
      </div>
      <!-- Right side: Info -->
      <div class="kanji-entry right detail">
         <!-- First Part -->
         <div class="kanji-entry d-flex flex-row">
            <!-- Inner Left Side -->
            <div class="kanji-preview-left">
               <div class="translation big">
                   @k_item.kanji.meanings.join(", ")
               </div>
                @if !k_item.kanji.kunyomi.is_empty() {
                 <div class="d-flex flex-row wrap">
                    <div class="tags no-margin fat right-padding-10 noselect">@data.gettext("Kun"):</div>
                      @for (pos, kun) in k_item.kanji.kunyomi.iter().enumerate() {
                        @if pos > 0 {
                          <div class="tags no-margin fat right-padding-10">,</div>
                        }
                        <a class="clickable no-align fat" href="/search/@k_item.kanji.literal @kun">@kun</a>
                      }
                 </div>
                }
                @if !k_item.kanji.onyomi.is_empty() {
                 <div class="d-flex flex-row wrap">
                    <div class="tags no-margin fat right-padding-20 noselect">@data.gettext("On"):</div>
                      @for (pos, on) in k_item.kanji.onyomi.iter().enumerate() {
                        @if pos > 0 {
                          <div class="tags no-margin fat right-padding-10">,</div>
                        }
                        <a class="clickable no-align fat" href="/search/@k_item.kanji.literal @on">@on</a>
                      }
                 </div>
               }
            </div>
            <!-- Inner Right Side -->
            <div class="kanji-preview-right">
                @if let Some(grade) = k_item.kanji.grade {
                  <div class="notes">@data.gettext_fmt("Taught in {} grade", &[grade])</div>
                }
                @if let Some(n_lvl) = k_item.kanji.jlpt {
                 <div class="notes">@data.gettext("JLPT level") <b>N@n_lvl</b></div>
                }
                @if let Some(frequency) = k_item.kanji.frequency {
                 <div class="notes"><b>@frequency</b> @data.gettext("of 2500 most used kanji in newspapers")</div>
                }
            </div>
        </div>
        <!-- Alternative Readings Part -->
        <div>
          @if !k_item.kanji.nanori.is_empty() {
            <div class="notes d-flex flex-row wrap"><b class="right-padding-10">@data.gettext("Japanese names"):</b> 
              @for (pos, n) in k_item.kanji.nanori.iter().enumerate() {
                @if pos > 0 {
                  <div class="tags no-margin slim right-padding-10">,</div>
                }
                <a class="clickable no-align" href="/search/@k_item.kanji.literal @n?t=3">@n</a>
              }
            </div>
          }
          @if !k_item.kanji.similar_kanji.is_empty() {
            <div class="notes d-flex flex-row wrap"><b class="right-padding-10">@data.gettext("Similar Kanji"):</b> 
              @for (pos, n) in k_item.kanji.similar_kanji.iter().enumerate() {
                @if pos > 0 {
                  <div class="tags no-margin slim right-padding-10">,</div>
                }
                <a class="clickable no-align" href="/search/@n?t=1">@n</a>
              }
            </div>
          }
          @if !k_item.kanji.chinese.is_empty() {
            <div class="notes"><b>@data.gettext("Chinese reading"):</b> @k_item.kanji.chinese.join(", ")</div>
          }
          @if let Some(ref korean) = k_item.get_korean() {
            <div class="notes"><b>@data.gettext("Korean reading"):</b>&nbsp;&nbsp; @korean.join(", ")</div>
          }
          @if !k_item.kanji.vietnamese.is_empty() {
            <div class="notes"><b>@data.gettext("Vietnamese reading"):</b>&nbsp;&nbsp; @k_item.kanji.vietnamese.join(", ")</div>
          }
        </div>

         <!-- Second Part -->
         @if k_item.kanji.has_stroke_frames(data.assets_path()) {
           <hr/>
           <div class="stroke-container">
              <img src="@k_item.kanji.get_stroke_frames_url()" type="image/svg+xml" class="kanji-img">
              @unescaped_string(k_item.get_frames(data.assets_path()).unwrap_or_default())
           </div>
         }

         @if k_item.kanji.has_animation_file(data.assets_path()) {
         
          <div class="animation-container d-flex flex-row">

            <div class="animation-controller d-flex flex-column">
              <div>
                <div class="d-flex flex-row speed-tag">
                  <div>Animation Speed:</div>
                  <div id="@(k_item.kanji.literal)_speed">100%</div>
                </div>
                <input data-kanji="@(k_item.kanji.literal)" type="range" min="0.05" max="2" value="1" step="0.05" class="slider speedSlider"/>
              </div>
              <div class="animation-group d-flex">
                <button class="l ripple" onclick='doAnimationStep_onClick("@(k_item.kanji.literal)", -1)'>
                  <img src="/assets/svg/ui/backwards.svg" />
                </button>

                <button id="@(k_item.kanji.literal)_play" onclick='doOrPauseAnimation("@(k_item.kanji.literal)")' class="m ripple" data-state="play">
                  <span> 
                    <img draggable="false" src="/assets/svg/ui/play.svg" />
                  </span>
                  <span class="hidden">
                    <img draggable="false" src="/assets/svg/ui/pause.svg" />
                  </span>
                </button>
                
                <button class="r ripple" onclick='doAnimationStep_onClick("@(k_item.kanji.literal)", 1)'>
                  <img draggable="false" src="/assets/svg/ui/forwards.svg" />
                </button>
              </div>
            </div>            

            <div id="@(k_item.kanji.literal)_svg" class="anim-container" onmouseover='toggleNumbers("@(k_item.kanji.literal)", true)' onmouseleave='toggleNumbers("@(k_item.kanji.literal)", false)'>
              @unescaped_string(k_item.get_animation(data.assets_path()).unwrap_or_default())

              <div id="@(k_item.kanji.literal)_reset" class="clickable reset-btn" onclick='undoAnimation("@(k_item.kanji.literal)")'>
                <img draggable="false" src="/assets/svg/ui/revert.svg" />
              </div>
            </div>
           </div>
          }
        
          @if k_item.kanji.has_compounds() {
            <div class="compounds-dropdown-parent">
              @if data.kanji_copounds_collapsed() {
                <hr class="compounds-dropdown closed"/>
              }else{
                <hr class="compounds-dropdown"/>
              }
              <div class="compounds-click-area" onclick="toggleCompounds(event)"></div>
            </div>
          }else{
            <hr/>
          }

            <!-- Reading Compounds -->
            @if data.kanji_copounds_collapsed() {
             <div class="compounds-parent d-flex flex-row hidden">
            }else{
             <div class="compounds-parent d-flex flex-row">
            }

            <!-- On Reading -->
            @if let Some(ref ons) = k_item.on_dicts {
              <div class="on-reading">
                 <h3 class="noselect">
                    @data.gettext("On reading compounds")
                 </h3>
                 <div class="d-flex flex-column">
                   @for on in ons.iter() {
                      <span>
                        @if let Some(ref kanji_reading) = on.reading.kanji {
                          <a class="clickable green" href="/search/@kanji_reading.reading">@kanji_reading.reading</a> 【@on.reading.kana.reading】@on.glosses_pretty()
                        }
                      </span>
                    }
                 </div>
              </div>
            }
            <!-- Kun Reading -->
            @if let Some(ref kuns) = k_item.kun_dicts {
              <div class="kun-reading">
                <h3 class="noselect">
                   @data.gettext("Kun reading compounds")
                </h3>
                <div class="d-flex flex-column">
                  @for kun in kuns.iter() {
                    <span>
                      @if let Some(ref kanji_reading) = kun.reading.kanji {
                        <a class="clickable green" href="/search/@kanji_reading.reading">@kanji_reading.reading</a> 【@kun.reading.kana.reading】@kun.glosses_pretty()
                      }
                    </span>
                  }
                </div>
              </div>
            }
         </div>
      </div>
   </div>
}
