{% extends 'base.html.twig' %}

{% block content %}
<div class="page-content" id="top">
    <div class="container" id="form-signal">
        {% include "sites/modal/confidence.html.twig" %}
        {% include "sites/modal/statut.html.twig" %}
        <div class="row">
            <div class="col-12">
                <div class="alert alert-danger" role="alert">
                    <i class="fa fa-exclamation-triangle"></i>

                    {% trans %}Before completing this form, you must read and accept our terms of use{% endtrans %}
                   
                </div>
            </div>

            <div class="col-12">
                <div class="alert alert-info" role="alert">
                <input type="checkbox" id="condition-check">
                {% trans %} By continuing, you agree to our{% endtrans %}
                     
                    <a href="#" class="alert-link"> {% trans %}Terms of Use{% endtrans %}</a> 
                    {% trans %}described on{% endtrans %}<a href="#" class="alert-link"> {% trans %}this link{% endtrans %}</a>
                </div>
            </div>

            <div class="col-12">
                <div class="alert alert-info" role="alert">
                <input type="checkbox" id="confidence-check">
                    {% trans %}By checking this box, you agree to our {% endtrans %}
                   

                    <a href="#" class="alert-link btn-modal">

                    {% trans %}privacy statements {% endtrans %}
                    
                    
                    </a> {% trans %} described{% endtrans %}

                    <a href="#" class="alert-link btn-modal"> {% trans %}here{% endtrans %}</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                
                <div class="card card-body-bg">
                    <div class="card-body ">
                    
                        <div class="row card-form">
                            <div class="col-12 mb-5 card-form-head">
                                <h3>{% trans %}Have you been abused ?{% endtrans %}</h3>
                                <p>{% trans %}Do not wait ! Report it !{% endtrans %}</p>
                            </div>
                        </div>
                    
                        <div class="row">
                            <div class="col-lg-12">
                                <form id="signalForm" method="POST" action="#">
                                    <fieldset id="signal-form">
                                        <div class="input-group mb-3 card-form-check" style="background:#fff000">
                                            <div class="input-group-prepend" style="background-color:#fff000">
                                                <div class="input-group-text">
                                                    <input type="checkbox" aria-label="Checkbox for following text input" name="anonyme"  id="anonymiser">
                                                </div>
                                            </div>
                                            <input type="text" class="form-control" value="{{'Check this box if you want to make an anonymous report' | trans }}">
                                        </div>
                                        
                                        <div  class="row"  id="form-identification">
                                            <div  class="col-md-6">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fa fa-user"></i> </span>
                                                    </div>
                                                    <input type="text" class="form-control"  placeholder="{{ "You first name ..." | trans }}"  name="prenom" required>
                                                </div>
                                            </div>

                                            <div  class="col-md-6">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fa fa-user"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control" placeholder="{{ "Your name" | trans}}" name="nom" required>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div  class="row">
                                            <div  class="col-md-6">
                                                <div class="input-group  mb-3">
                                                    <div class="input-group-prepend">
                                                        <label class="input-group-text" for="pays"><i class="fa fa-flag"></i></label>
                                                    </div>
                                                    <select class="form-control" id="pays" name="pays"  required>
                                                        <option selected disabled>{% trans %} Indicate your countrie {% endtrans %}...</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div  class="col-md-6">
                                                <div class="input-group  mb-3">
                                                    <div class="input-group-prepend">
                                                        <label class="input-group-text" for="region"><i class="fa fa-globe" aria-hidden="true"></i></label>
                                                    </div>
                                                    <select class="form-control" id="region" name="region"  required>
                                                        <option selected>{% trans %}Indicate your region{% endtrans %}...</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div  class="row">
                                            <div  class="col">
                                                <div class="input-group mb-3" >
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fa fa-phone"></i></span>
                                                        <span class="input-group-text" id="indicatif"> ---- </span>
                                                    </div>
                                                    <input type="text" class="form-control" placeholder="{{ "Your phone number Ex: 77 77 77 77"| trans }}" name="numero" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div  class="row">
                                            <div  class="col">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                                                    </div>
                                                    <input type="email" class="form-control" placeholder="{{ "Your email address"| trans }}" name="email" required>
                                                </div>
                                            </div>
                                        </div>


                                        <div  class="row">
                                            <div  class="col">
                                                <div class="input-group  mb-3">
                                                    <div class="input-group-prepend">
                                                        <label class="input-group-text" for="typevilolence"><i class="fa fa-frown-o " aria-hidden="true"></i></label>
                                                    </div>
                                                    <select class="form-control" id="typevilolence" name="typeviolence"  required>
                                                        <option value="" selected> {% trans %} What kind of violence have you experienced?? {% endtrans %}</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div  class="row">
                                            <div  class="col">
                                                <div class="input-group  mb-3">
                                                    <div class="input-group-prepend">
                                                        <label class="input-group-text" for="formevilolence"><i class="fa fa-question-circle" aria-hidden="true"></i></label>
                                                    </div>
                                                    <select class="form-control" id="formevilolence" name="formeviolence" required>
                                                        <option value="" selected>{% trans %} {% endtrans %}</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fa fa-comment-o"></i></span>
                                                    </div>
                                                    <textarea class="form-control" name="description" aria-label="With textarea" placeholder="{{ "Explain us what you have undergone in a few words..." | trans }}" required></textarea>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col">
                                                <div class="alert alert-warning" role="alert">
                                                    <input type="checkbox" name="urgence">
                                                    {{ "Are you in imminent danger ?" | trans }}
                                                </div>

                                                
                                            </div>
                                        </div>

                                    
                                        <button type="button" class="btn btn-info btn-sm btn-block icon" id="btn-envoyer"><span id="btn-text"> {{ "Send" | trans }} <i class="fa fa-check"></i> </span>
                                            <span id="btn-img">
                                            <img src="/viewer/assets/image/spinner.svg" style="width:30px;height:30px" />
                                            <img src="/viewer/assets/image/spinner.svg" style="width:30px;height:30px" />
                                            </span>
                                        </button>

                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 

{%  endblock %}

{%  block script %}
<script type="text/javascript">
    $(document).ready(function(){
        FormController.init();
    })
</script>
{%  endblock %}