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

{% 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">Language Mix Visualization: {{ elanfile.original_name }}</h1>
  </div>
  
  <!-- Content Row -->
  <div id="lmapp">
    <!-- Content Column -->
    <div class="row" v-for="bar in bar_data">
      <div class="col-lg-2 text-right">
        <b :title="bar.filename">[[ bar.name ]]</b><br/>
        [[ bar.length.toFixed(2) ]] sec(s)
        <!--
           -- ([[bar.rel_length.toFixed(2)]] %)
           -->
      </div>
      <div class="col-lg-10">
        <div class="progress" style="height: 30px; margin-bottom: 20px">
          <div v-for="chunk in bar.chunks" class="progress-bar" :style="{'width': chunk[1] + '%', 'background-color': chunk[2]}" :title="chunk[0]"></div>
        </div>
      </div>
    </div>
    <!-- End of Content Row -->
</div>
{% endblock %}

{% block script %}
<script>
 var lmapp = new Vue({
   delimiters: ['[[', ']]'],
   el: '#lmapp',
   data: {
     message: "",
     bar_data: {{ bar_data|jsonify|safe }}
   },
   methods: {
   }
 });
</script>
{% endblock %}