{% extends "djangoquran2/base.html" %}
{% load extra_filters %}
{% load static %}
{% block body %}	  	
  <h3>Surah: {{request.POST.surah_number}}</h3><hr>
  {% for ayah in ayahs %}
  <span id="span_{{ayah.0.ayah}}">{{ayah.0.surah}}:{{ayah.0.ayah}}</span>|
  
  <span style="cursor: url('{% static 'djangoquran2/speaker.ico' %}'), default;" onclick="if (!any_audio_playing)playSound(this, '{{ ayah.0.surah|zfill:3 }}{{ ayah.0.ayah|zfill:3 }}.mp3');">play</span>

  <div class="arab" dir='rtl' style="font-size: 50px;">          
    {% for word in ayah %}          
    <a href="{% url 'djangoquran2:quran_word' word.id %}">{{ word.token|buckwalter_decode }}</a>
    {% endfor %}
  </div>        
  {% for word in ayah %}
  <span class="text-muted">{{ word.meaning }}</span>
  {% endfor %}
  <hr/>
  {% endfor %}	  
{% endblock %}  

{% block javascript %}
<script type="text/javascript">
var any_audio_playing = false;

function playSound(el,soundfile){
  let url = `https://everyayah.com/data/Hudhaify_128kbps//${soundfile}`; //`{% static 'djangoquran2/audio' %}/${soundfile}`;
  if (el.mp3) {
    if(el.mp3.paused) {
      el.mp3.play();
      any_audio_playing = true;
    }
  } else {
    el.mp3 = new Audio(url);
    el.mp3.play();        
    el.mp3.onended=function(){
      el.style.color = 'black';
      any_audio_playing = false;
    };        
  }
  el.style.color = 'red';
  any_audio_playing = true;
}
</script>
{% endblock %}  