{% extends "base.html" %}
{% load static %}

{% block styles %}
<link rel="stylesheet" type="text/css" href="{% static 'styles/rec.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/loading.css'%}">
{% endblock %}

{% block content %}

<script type="text/javascript">
    var user = "{{user|escapejs}}";
    var session = "{{session|escapejs}}";
    var questionnaire = "{{questionnaire|escapejs}}";
    console.log(user,session,questionnaire)
</script>

<div class="card border-primary mb-3" style="max-width: 30rem; margin: 10vh auto">
    <div class="card-header d-flex justify-content-between">
        <div>SELF anglais v1.1</div>
        <div>Session: {{ session }} - Item: {{ questionnaire }}</div>
    </div>
    <div class="card-body">
        <h4 class="card-title">Audio Recording</h4>
        <p class="card-text">Please record yourself while answering the question.</p>

		<select id="encodingTypeSelect" style="display:none">
		  <option value="wav">Waveform Audio (.wav)</option>
		  <option value="mp3">MP3 (MPEG-1 Audio Layer III) (.mp3)</option>
		  <option value="ogg">Ogg Vorbis (.ogg)</option>
		</select>
		<div id="controls">
			<button id="recordButton">Record</button>
			<button id="stopButton" disabled>Stop</button>
		</div>
		<div id="formats"></div>
        <div style="display:none">
            <pre>Log</pre>
            <pre id="log"></pre>
        </div>

		<ol id="recordingsList" class="mt-2" style="min-height: 50px;"></ol>

        <center>
            <button type="button" id="btnSave" onclick="addRec()" class="btn btn-primary my-2" style="width:100px;" disabled>Save!</button>
        </center>
    </div>
</div>

<div id="actionBlock" style="display: none;"><div class="mainLoad"><div class="loader"></div></div></div>


{% endblock %}

{% block javascript %}
<script type="text/javascript" src="{% static 'scripts/WebAudioRecorder.min.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'scripts/WebAudioRecorderWav.min.js' %}"></script> -->
<script type="text/javascript" src="{% static 'scripts/rec.js' %}"></script>
{% endblock %}