{% extends 'whispeakauth/view/record_audio.html.twig' %}

{% block intro %}
    {% if show_form %}
        <form class="form-horizontal" action="#" method="post">
            <div class="form-group ">
                <label for="enter_username_username" class="col-sm-4 control-label">
                    {{ 'Username'|get_lang }}
                </label>
                <div class="col-sm-8">
                    <input class="form-control" name="username" type="text" id="username">
                </div>
            </div>
        </form>

        <hr>
    {% endif %}

    {{ parent() }}
{% endblock %}

{% block config_data %}
    {% if show_form %}
        $('#username').on('change', function () {
            $('#record-audio-recordrtc, #btn-start-record, #btn-stop-record, #btn-save-record').off('click', '');
    {% endif %}
        RecordAudio.init(
            {
                blockId: '#record-audio-recordrtc',
                btnStartId: '#btn-start-record',
                btnStopId: '#btn-stop-record',
                btnSaveId: '#btn-save-record',
                plyrPreviewId: '#record-preview',
                data: {
                    action: 'authentify',
                    username: $('#username').val()
                }
            }
        );

    {% if show_form %}
        });
    {% endif %}
{% endblock %}