{# HTML5 Recorder #}
{#Autovalidar - Enviar a transcripcion#}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="row">
             {% if is_granted('ROLE_VALIDATION') %}
            <div class="col-md-7 autovalidar">
                {{ 'labels.autovalidated'|trans([], 'LocalizationBundle') }}
                <div class="material-switch pull-right">
                    <input id="autovalidateRecord" name="autovalidate" type="checkbox">
                    {{ 'labels.no'|trans([], 'LocalizationBundle') }} <label for="autovalidateRecord" class="label-primary"></label> {{ 'labels.yes'|trans([], 'LocalizationBundle') }}
                </div>
            </div>
            {% endif %}
            <div class="col-md-5">
                <button class="btn btn-primary btn-send-record" id="sendRec" {% if recorder == '' %} disabled {% endif %}>
                    {{ 'transcription.send'|trans([], 'LocalizationBundle') }}
                </button>
            </div>
        </div>
        <hr>
    </div>
    <div class="clearfix"></div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="hiruko-recorder">
            <div class="recorder-top">
                <span id="recording" class="label label-recording hidden"><i class="fa fa-microphone" aria-hidden="true"></i> {{ 'labels.recorder.recording'|trans([], 'LocalizationBundle') }} </span>
                <span id="no-perm-label" class="label label-recording"><i class="fa fa-ban" aria-hidden="true"></i> {{ 'labels.recorder.noPermissions'|trans([], 'LocalizationBundle') }} </span>
                <span id="paused" class="label label-recording hidden"><i class="fa fa-pause" aria-hidden="true"></i> {{ 'labels.recorder.pause'|trans([], 'LocalizationBundle') }} </span>
                <span id='near-limit' class="label label-limit pull-right hidden">{{ 'labels.recorder.recordLimit'|trans([], 'LocalizationBundle') }}</span>
            </div>
            <div class="wave">
                <div id="visualization"></div>
            </div>
            <div class="record-time">
                <p id="time-display" class="pull-right">00:00</p>
            </div>
            <div class="controls-recorder">
                <img id="record-stop" class="btn-stop hidden" src="{{ asset('bundles/reading/images/btn-stop.svg') }}" alt="stop record" data-toggle="tooltip" data-placement="bottom" title="{{ 'labels.recorder.finishRecord'|trans([], 'LocalizationBundle') }}">
                {# record controls #}
                <img id="record" class="btn-record hidden" src="{{ asset('bundles/reading/images/btn-record.svg') }}" alt="record active" data-toggle="tooltip" data-placement="bottom" title="{{ 'labels.recorder.record'|trans([], 'LocalizationBundle') }}">
                <img id="record-dis" class="btn-record" src="{{ asset('bundles/reading/images/btn-record-disabled.svg') }}" alt="record disabled" data-toggle="tooltip" data-placement="bottom" title="{{ 'labels.recorder.disabled'|trans([], 'LocalizationBundle') }}">
                <img id="record-pause" class="btn-record hidden" src="{{ asset('bundles/reading/images/btn-pause.svg') }}" alt="pause record" data-toggle="tooltip" data-placement="bottom" title="{{ 'labels.recorder.pauseTool'|trans([], 'LocalizationBundle') }}">
                {# record controls #}
                <span data-toggle="modal" data-target="#cancel-dialog" data-backdrop="static" data-keyboard="false">
                        <img id="record-cancel" class="btn-cancel hidden" src="{{ asset('bundles/reading/images/btn-cancel.svg') }}" alt="cancel record"
                             data-toggle="tooltip" data-placement="bottom" title="{{ 'labels.recorder.delete'|trans([], 'LocalizationBundle') }}">
                </span>
            </div>
        </div>
    </div>
</div>

{# Ventanas modales #}
{# Modal cancelar #}
<div class="modal fade" id="cancel-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h4>{{ 'labels.recorder.sureDelete'|trans([], 'LocalizationBundle') }}</h4>
            </div>
            <div class="modal-footer">
                <button id="cancel-back" type="button" class="btn btn-default" data-dismiss="modal">{{ 'labels.recorder.keepRecording'|trans([], 'LocalizationBundle') }}</button>
                <button id="cancel-confirm" type="button" class="btn btn-danger" data-dismiss="modal">{{ 'labels.recorder.delete'|trans([], 'LocalizationBundle') }}</button>
            </div>
        </div>
    </div>
</div>

{# Modal eliminar grabación#}
<div class="modal fade" id="delete-record-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h4>{{ 'labels.recorder.sureDelete'|trans([], 'LocalizationBundle') }}</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'button.cancel'|trans([], 'LocalizationBundle') }}</button>
                <button type="button" class="btn btn-danger" id="deleteRecord" data-dismiss="modal">{{ 'labels.recorder.deleteRecord'|trans([], 'LocalizationBundle') }}</button>
            </div>
        </div>
    </div>
</div>

{# Modal de error al guardar la grabación #}
<div class="modal fade" id="error-upload-modal" tabindex="-1" role="dialog" aria-labelledby="errorUploadRecord">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h4>{{ 'labels.recorder.errorSaving'|trans([], 'LocalizationBundle') }}.</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'button.close'|trans([], 'LocalizationBundle') }}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="error-delete-modal" tabindex="-1" role="dialog" aria-labelledby="errorDeleteRecord">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h4>{{ 'labels.recorder.errorDeleting'|trans([], 'LocalizationBundle') }}.</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'button.close'|trans([], 'LocalizationBundle') }}</button>
            </div>
        </div>
    </div>
</div>