{% extends "::base.html.twig" %}

{% block title 'Your Consent' %}
    
{% block styles %}
    <style type="text/css">
        input [type="radio"] {
            margin: 0;
            width: 0.5em;
            height: 0.5em;
        }
    </style>
{% endblock %}
    
{% block content_without_navbar %}
    {% set appDomain = app.request.getSchemeAndHttpHost() %}
    {% set googleViewer = 'https://docs.google.com/gview?url=' %}
    <div class="row">
        {#<div class="col-md-6">
            <iframe width="100%" height="600" src="{{ googleViewer ~ appDomain ~ '/tpls/consent_to_use_of_private_data.docx&embedded=true' }}"></iframe>
        </div>#}
        <div class="col-md-8 center">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <span class="label">Data Usage and Storage Consent</span>
                </div>
                <div class="panel-body">
                    {{ form_start(form) }}
                    {{ form_row(form.firstname) }}
                    {{ form_row(form.lastname) }}
                    <div class="form-group">
                        <label class="col-md-3 control-label formlabel">Privacy Policy</label>
                        <div class="col-md-5" style="overflow: scroll; height: 400px;">
                            {#<span>
                                I acknowledge that I have read the policy below and agree that 
                                by joining the {{ app.session.get('organname') }} database 
                                of experts that all personal data I submit may be stored 
                                by {{ app.session.get('organname') }} for further contact in 
                                future. 
                            </span>#}
                            {{ organ.dataPolicy|raw }}
                        </div>
                    </div>
                    {{ form_row(form.consent) }}
                    {#<div class="form-group">
                        <label class="col-xs-3 col-md-3 col-lg-3 control-label"></label>
                        <div class="col-xs-5 col-md-5 col-lg-5 formfield" id="expert_accept_invite_consent">
                            <div class="radio">
                                <label>
                                    <input id="expert_accept_invite_consent_1" name="expert_accept_invite[consent]" value="1" type="radio">
                                    Yes, I agree
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input id="expert_accept_invite_consent_2" name="expert_accept_invite[consent]" value="2" type="radio">
                                    No, I do not agree
                                </label>
                            </div>
                        </div>
                        <div class="col-xs-4 col-md-4 col-lg-4 loud formfielderr"></div>
                    </div>#}
                    {#{{ form_row(form.cv) }}#}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
    {#<div class="row">
        <div class="col-md-8 center">
            {{ organ.dataPolicy|raw }}
        </div>
    </div>#}
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[name="expert_accept_invite[consent]"]:radio').change(function() {
                if (this.value == '1') {
                    $('#expert_accept_invite_cv').removeAttr('disabled');
                } else {
                    $('#expert_accept_invite_cv').prop('disabled', true);
                }
            });
            $('.scollable-div');
        });
    </script>
{% endblock %}