{% extends "app/base_generic.html" %}
{% load static %}
{% block title %} <title>{{ language.lang_name }}</title> {% endblock %} # get me language
{% block content %}
    <div class="page-content">
        <h1 style="margin-bottom: 10px"> Language: {{ language.lang_name }}</h1>

        <div class="row" style="margin-top: 0px; display:grid; grid-template-columns: 0.7fr 0.3fr">
            <ul>
                <li>ISO 693-2 Code: {{ language.lang_code_639_2 }}</li>
                <li>Language family: {{ language.lang_family }} </li>
                <li> Number of speakers: {{ language.total_speakers }}</li>
                <li>Countries : {{ language.all_countries }}</li>
                <li><a href="{{ language.lang_wikipedia_url }}" target=_blank>Wikipedia link</a></li>
            </ul>

            <div class="side-nav" id="side-nav-div">
                <span style="font-weight:bold"> Skip to:</span>
                <hr style="margin:0px;"/>
                <ul>
                    <li><a href="#sect-synthesizers">Synthesizers</a></li>
                    <li><a href="#sect-synthesize">Synthesize text</a></li>
                </ul>
            </div>

        </div>
        <section id="sect-datasets">

            <h2 class="h2-primary">Datasets</h2>
            <div class="table-responsive">

                <table class="table table-striped">
                    <tr>
                        <th> Data_id</th>
                        <th> Source</th>
                        <th> No. of sentences</th>
                        <th> MCD</th>
                        <th> Quality</th>
                        <th> Hrs</th>
                        <th> Gender</th>
                        <th> Download</th>
                    </tr>
                    {% for dataset in language.datasets %}
                        <tr>
                            <td>{{ dataset.data_id }}</td>
                            <td>{{ dataset.source }}</td>
                            <td>{{ dataset.pass1_utt }}</td>
                            <td>{{ dataset.pass1_mcd|floatformat:2 }}</td>
                            {% if dataset.pass1_mcd <= 6 %}
                                <td> Good</td>
                            {% elif dataset.pass1_mcd <= 7 %}
                                <td> Okay</td>
                            {% elif dataset.pass1_mcd <= 8 %}
                                <td> Bad</td>
                            {% else %}
                                <td>}Something is wrong </a>
                                </td>
                            {% endif %}
                            <td>{{ dataset.duration|floatformat:2 }}</td>
                            <td> {{ dataset.speaker_gender }}</td>
                            {% if not dataset.data_location %}
                                <td> Unavailable</td>
                            {% else %}
                                <td><a href="{% static 'app/' %}{{ dataset.data_location }}">Download</a></td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </section>

        <section id="sect-synthesizers">
            <h2 class="h2-primary">Synthesizers</h2>
            <div class="table-responsive">

                <table class="table table-striped">
                    <tr>
                        <th> synth_id</th>
                        <th> data_id</th>
                        <th> No. of sentences</th>
                        <th> Hrs</th>
                        <th> MCD base</th>
                        <th> MCD rfs</th>
                        <th> Quality</th>
                        <th> Data</th>
                        <th> Flite</th>

                    </tr>
                    {% for synthesizer in language.synthesizers %}
                        <tr>
                            <td>{{ synthesizer.synth_id }}</td>
                            <td>{{ synthesizer.dataset.data_id }}</td>
                            <td>{{ synthesizer.rfs_utt }}</td>
                            <td>{{ synthesizer.rfs_hrs|floatformat:2 }}</td>
                            <td>{{ synthesizer.mcd_base|floatformat:2 }}</td>
                            <td>{{ synthesizer.mcd_rfs|floatformat:2 }}</td>
                            {% if synthesizer.mcd_rfs <= 5 %}
                                <td> Good</td>
                            {% elif synthesizer.mcd_rfs <= 6 %}
                                <td> Okay</td>
                            {% elif synthesizer.mcd_rfs <= 7 %}
                                <td> Bad</td>
                            {% else %}
                                <td>}Something is wrong</td>
                            {% endif %}
                            {% if not synthesizer.data_location  or  synthesizer.data_location == "na" %}
                                <td> Unavailable</td>
                            {% else %}
                                <td><a href="{% static 'app/' %}{{ synthesizer.data_location }}"> Download</a></td>
                            {% endif %}
                            {% if not synthesizer.flite_location %}
                                <td> Unavailable</td>
                            {% else %}
                                <td><a href="{% static 'app/' %}{{ synthesizer.flite_location }}"> Download </a></td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </table>
            </div>

            <br>
            <br>


            <h2 class="h2-primary"> Listen to samples </h2>

            {% for sample in language.samples %}

                <div>
                    <p> Text: {{ sample.text }}</p>
                    <p> Pronunciation: {{ sample.pronunciation }}</p>
                    <div class="synth-samples">
                        {% for  synth_sample in sample.synthesizer_samples %}

                            <div>
                                <p><em> {{ synth_sample.synth.synth_id }} </em></p>
                                <audio controls>
                                    <source   src="{% static 'app/' %}{{ synth_sample.sample_location }}"
                                            type="audio/mpeg">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>

                        {% endfor %}
                    </div>


                </div>
            {% endfor %}
        </section>
        <section id="sect-synthesize" style="width: 100%">
            <h2 class="h2-primary"> Synthesize your text!</h2>

            <div style="display:flex; flex-direction:column; justify-content: center; align-items: center; width: 100% ; margin-bottom: 25px">
                <form action="" method="POST" id="synthRequestForm"
                      name="synthRequestForm" style="max-width:700px"> {% csrf_token %}
                    {{ form.as_p }}
                    <button id="synth-btn" onclick="validateSubmit('wait_modal')" type="button"
                            class="btn btn-primary mb-2" style="background-color: #FFAD00; border: none">Synthesize
                    </button>

                </form>
            </div>

            {% if output_file %}



                <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalCenterTitle">There you go!</h5>
                                <button id="cross-btn" type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true" onclick="hide_modal('#exampleModalCenter')" style="padding: 5px">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div>
                                    <p>Your text: {{ text }}</p>

                                    <audio controls>
                                        <source  id="synth-audio" src="{% static '' %}{{ output_file }}" type="audio/mpeg">
                                        Your browser does not support the audio element.
                                    </audio>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="hide_modal('#exampleModalCenter')">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function () {
                        $('#exampleModalCenter').modal('show')

                    });
                </script>

            {% endif %}

            <div id="wait_modal">
                <div id="wait_modal_content">
                    <p>Please wait while we synthesize your text</p>
                    <img src="{% static 'app/loader.gif' %}" alt="Loading...">
                </div>
            </div>

        </section>
    </div>

{% endblock %}