{% extends 'sunshine/base.html' %}
{% load sunshinetags %}
{% load static %}

{% block style%}
<style>
</style>
{% endblock%}

{% block content %}
<div class="container-fluid">
  <!-- Page Heading -->
  <div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">{{ elanfile.original_name }}</h1>
  </div>
  
  <!-- Content Row -->
  <div class="row" id="lexapp">
    <!-- Content Column -->
    <div class="col-lg-12 mb-12">
      <div class="row mb-1">
        <div class="form-check">
          <input type="checkbox" id="chkOnlySpecialLex" v-model="special_lex_only">
          <label for="checkbox">Highlight unknown words</label>
        </div>
        <div class="form-check">
          <input type="checkbox" id="chkOnlySpecialLex" v-model="table_mode">
          <label for="checkbox">Show Lexicon Table</label>
        </div>
        <div class="form-check" v-if="!table_mode">
          <input type="checkbox" id="chkShowLexFreq" v-model="show_freq">
          <label for="checkbox">Show Frequency</label>
        </div>
      </div>

      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" v-for="profile in lexstats.stats">
          <a class="nav-link" :id="profile.name + '-tab'" data-toggle="tab" :href="'#' + profile.name" role="tab" :aria-controls="profile.name" aria-selected="true">[[ profile.name ]]</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="lexicon-tab" data-toggle="tab" href="#lexicon" role="tab" aria-controls="lexicon" aria-selected="true">Lexicon</a>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <!-- Stat cards -->
        <div v-for="profile in lexstats.stats" class="tab-pane fade" :id="profile.name" role="tabpanel" :aria-labelledby="profile.name + '-tab'">
                <div class="card shadow mb-4">
                  <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Statistics - [[ profile.name ]]</h6>
                  </div>
                  <div class="card-body">
                    <table class="table table-hover">
                      <thead class="thead-light">
                        <tr>
                          <th>Language</th>
                          <th>Types</th>
                          <th>Tokens</th>
                          <th>Ratio</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="row in profile.stats.languages">
                          <td>[[ row.language ]]</td>
                          <td>[[ row.types ]]</td>
                          <td>[[ row.tokens ]]</td>
                          <td>[[ row.ratio ]]</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
        
        <!-- Lexicon -->
        <div class="tab-pane fade" id="lexicon" role="tabpanel" aria-labelledby="lexicon-tab">
                <!-- lexicon tabs -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" v-for="langlex in lexstats.all.lexicon" v-if="langlex.vocabs.length > 0">
                    <a class="nav-link" :id="make_id(langlex.language) + '-lex-tab'" data-toggle="tab" :href="'#' + make_id(langlex.language) + '-lex'" role="tab" :aria-controls="make_id(langlex.language) + '-lex'" aria-selected="false">[[ langlex.language ]]</a>
                  </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                  <div v-for="langlex in all.lexicon" class="tab-pane fade" :id="make_id(langlex.language) + '-lex'" role="tabpanel" :aria-labelledby="make_id(langlex.language) + '-lex-tab'">
                    <div class="card shadow mb-4">
                      <div class="card-header">[[ langlex.language ]] ([[ langlex.vocabs.length ]])</div>
                      <div class="card-body">
                        [[ lexstats.message ]]
                        <table v-if="table_mode" class="table table-hover table-sm">
                          <thead class="thead-light">
                            <tr>
                              <th><a @click="sort_word(langlex.vocabs)">Word</a></th>
                              <th><a @click="sort_freq(langlex.vocabs)">Frequency</a></th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr v-for="lex in langlex.vocabs">
                              <td><a @click="show_examples(lex)" :title="'Speakers: ' + lex.speakers.join(', ') + '\n--\n' + lex.sents.join('\n')">[[ lex.word ]]</a></td>
                              <td>[[ lex.freq ]]</td>
                            </tr>
                          </tbody>
                        </table>
                        <div v-else>
                          <div class="d-flex flex-wrap">
                            <div v-for="lex in langlex.vocabs" class="px-3">
                              <span class="font-weight-bold badge badge-info" v-if="lex.special_code"
                                    :title="'Speakers: ' + lex.speakers.join(', ') + '\n--\n' + lex.sents.join('\n')">
                                [[ lex.word ]]
                              </span>
                              <span class="font-weight-bold text-danger" v-else-if="special_lex_only && lex.unknown_word"
                                    :title="'Speakers: ' + lex.speakers.join(', ') + '\n--\n' + lex.sents.join('\n')">
                                [[ lex.word ]]
                              </span>
                              <span class="font-weight-bold text-dark" v-else
                                    :title="'Speakers: ' + lex.speakers.join(', ') + '\n--\n' + lex.sents.join('\n')">
                                [[ lex.word ]]
                              </span>
                          <span v-if="show_freq">([[ lex.freq ]])</span>
                            </div>
                          </div>
                        </div>
                        <!-- end of lexicon table/word list -->
                        <div class="chart-area" style="height: 30%; width: 100%">
                          <canvas :id="'myChart_' + langlex.language.replace(/:/g, '_')"></canvas>
                        </div>
                </div>
              </div>              
            </div>
          </div>

          {% comment %}

          {% endcomment %}
        </div>
      </div>
      
  </div><!-- End of Content Row -->
</div>
{% endblock %}

{% block script %}
<script src="{% static 'vendor/bela-dashboard/bela-dashboard.js' %}"></script>

<script>
 var lexapp = new Vue({
   delimiters: ['[[', ']]'],
   el: '#lexapp',
   data: {
     sorting_mode: "",
     message: "",
     lexstats: {{ lexstats|jsonify|safe }},
     table_mode: false,
     show_freq: false,
     special_lex_only: true
   },
   computed: {
     stats: function(){ return this.lexstats.stats },
     all: function(){ return this.lexstats.all }
   },
   mounted: function() {
     // draw lexicon charts
     this.lexstats.all.lexicon.forEach(function(langlex, index){
       var __words = [];
       var __freqs = [];
       langlex.vocabs.forEach(function(lex, index){
         __words.push(lex.word);
         __freqs.push(Math.log(lex.freq));
       });
       var canvasID = 'myChart_' + langlex.language.replace(/:/g, '_');
       wordfreqChart(canvasID, __words, __freqs);
     });
     // end of lexicon charts
   },
   methods: {
     sort_word: function(vocabs) {
       if (this.sorting_mode != "word") {
         this.sorting_mode = "word";
         vocabs.sort(function (a,b){
           return a.word.localeCompare(b.word);
         });         
       }
       else {
         this.sorting_mode = "word_rev";
         vocabs.sort(function (a,b){
           return b.word.localeCompare(a.word);
         });         
       }
     },
     sort_freq: function(vocabs) {
       if (this.sorting_mode != "freq"){
         this.sorting_mode = "freq";
         vocabs.sort(function(a,b){
           return a.freq - b.freq;
         });
       }
       else {
         this.sorting_mode = "freq_rev";
         vocabs.sort(function(a,b){
           return b.freq - a.freq;
         });         
       }
     },
     make_id: function(text){
       return text.replace(/ /g, '-').replace(/:/g, '_');
     },
     show_examples: function(lex) {
     }
   }
 });
</script>
{% endblock %}