{%extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
  <link href="{{ asset('css/competition.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/trivial.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/user.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/component.css') }}" media="screen" rel="stylesheet" type="text/css">
  <style type="text/css">
    body {
      background-color: #fff;
    }

     {% if app.session.get('firstTime') == 0 %}
      .pad_head, .navbar-default {
        display: none;
      }
    {% endif %}
  </style>
{% endblock %}
{% block body %}
    {{ parent() }}
     <div class="container">
     {% if app.session.get('firstTime') == 0 %}
        <div class="col-xs-12 text-center" style="margin-top: 20px;font-size: 22px;color: #003e62;font-weight: 700;">Para empezar a jugar debes personalizar aquí tu contraseña.</div>  
      {% endif %}     
        <div class="mision">
            {{ form_start(form,{ 'attr' :{'novalidate':'novalidate','role':'form', 'onsubmit':'return validateProfileForm();', 'class':'enable-form'} }) }}
            <div class="col-xs-12 user-profile-image-badges col-xs-12">
                <div class="user-profile-image">
                    <img id="user-profile-image-img" src="{{ asset('images/users/'~app.user.image) }}"/>
                    <div class="col-xs-12">
                        {{ form_widget(form.imageFile, { 'attr' : {'class': 'form-control inputfile inputfile-3', 'placeholder' : 'Imagen del usuario', 'data-multiple-caption' : '{count} files selected'} }) }}
                        <label for="adminbundle_users_imageFile">
                         <img src="{{ asset('img/reemplazar.png') }}" />
                         <span>Reemplazar</span></label>
                        <span class="text-danger text-left" style="text-align:center">{{ form_errors(form.imageFile) }}</span>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6 col-md-offset-3 user-profile-form">
                <div class="form-group col-xs-12 user-profile-form-box">
                        {{ form_label(form.userName, "Nombre de usuario",  {'label_attr': {'class': 'col-xs-12 user-profile-label'}}) }}
                    <div class="col-xs-12">
                        {{ form_widget(form.userName, { 'attr' : {'class': 'form-control', 'placeholder' : 'Nombre'} }) }}
                        <span class="text-danger text-left">{{ form_errors(form.userName) }}</span>
                    </div>
                </div>
                <div class="form-group col-xs-12 user-profile-form-box">
                        {{ form_label(form.password, "Nueva contraseña",  {'label_attr': {'class': 'col-xs-12 user-profile-label'}}) }}
                    <div class="col-xs-12">
                        {{ form_widget(form.password, { 'attr' : {'class': 'form-control', 'placeholder' : 'Contraseña' ,'oninput':'enablePassword();'} }) }}
                        <span class="text-danger text-left">{{ form_errors(form.password) }}</span>
                    </div>
                </div>

                <div class="form-group col-xs-12  user-profile-form-box">
                        <label class="col-xs-12 user-profile-label" for="repeat_password">Repetir contraseña</label>
                    <div class="col-xs-12">
                        <input class="form-control" id="repeat_password" type="password" name="repeat_password" placeholder="Repetir contraseña" disabled>
                        <span id="repeat_password_error" class="text-danger text-left"></span>
                    </div>
                </div>
            </div>
     
            <div class="trivial-edit-buttons col-xs-12 mision">     
            {{ form_widget(form.save,{ 'label' : 'GUARDAR', 'attr': { 'class': 'btn prof-btn btn-lg btn-disabled', 'disabled':'true' }}) }}
           </div>    
        </div>
        {{ form_end(form) }}
    </div>
  {% endblock %}
  {% block javascripts %}
  {{ parent() }}
  <script type="text/javascript" src="{{asset('js/profileForm.js')}}"></script>
  <script type="text/javascript" src="{{asset('js/custom-file-input.js')}}"></script>
  <script type="text/javascript" src="{{asset('js/previewImage.js')}}"></script>
{% endblock %}