{# empty Twig template #}
{%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">
{% endblock %}
{% block body %}
    {{ parent() }}
    
    <div class="container marketing lista">
       <div class="competition-return">
              <div class="competition-return-image"><img src="{{asset('img/competition-return.png')}}"></div>
              <a class="competition-return-text" href="{{ path('question_list',{id: area.id}) }}">Volver a Preguntas</a>
            </div>  
      <div class="fondo col-xs-12">
            <div class="record-trivial-name col-xs-12">
              {{trinder.name}} - {{question.type}}
            </div>
            <div class="col-sm-3 record-trivial-img"><img class="trivial_img" src="{{ asset('images/trivials/'~trinder.image) }}"></div>
            <div class="col-sm-9 badge-trivial-medallas">EDITAR PREGUNTA</div>
            <div class="trivial-edit-form col-xs-12">
            <form action="{{ path('question_update', {id: question.id })}}" onsubmit="validateForm();" enctype="multipart/form-data" method="POST">
          
                <div class="form-group col-xs-12 row competition-add-label">
                       <label for="statement" class="col-xs-4">Enunciado:</label>
                       <input type="text" class="col-xs-8" name="trivial-statement" id="statement" value="{{question.questionTranslations[1].statement}}" required>
                </div>

                {% if question.type == "TRIVIAL" %}

                <div class="form-group col-xs-12 row competition-add-label trivial-answer">
                       <label for="answer1" class="col-xs-4">Respuesta correcta:</label>
                       <input type="text" class="col-xs-8" name="trivial-answer1" id="answer1" value="{{question.answers[0].answerTranslations[1].answerText}}">
                </div>

                <div class="form-group col-xs-12 row competition-add-label trivial-answer">
                       <label for="answer2" class="col-xs-4">Respuesta incorrecta:</label>
                       <input type="text" class="col-xs-8" name="trivial-answer2" id="answer2" value="{{question.answers[1].answerTranslations[1].answerText}}">
                </div>

                <div class="form-group col-xs-12 row competition-add-label trivial-answer">
                       <label for="answer3" class="col-xs-4">Respuesta incorrecta:</label>
                       <input type="text" class="col-xs-8" name="trivial-answer3" id="answer3" value="{{question.answers[2].answerTranslations[1].answerText}}" >
                </div>

              {% elseif question.type == "TINDER" %}

                <div id="checkbox-container" class="form-group col-xs-12 row competition-add-label" >
                       <label for="tinder-answer" class="col-xs-4">Correcto:</label>
                       <input type="checkbox" class="col-xs-8" name="trivial-checkbox" id="tinder-answer" {% if question.answers[0].answerTranslations[1].answerText == "V" %}checked{% endif %}>
                </div>

                <div id="image-container" class="form-group col-xs-12 row competition-add-label" >
                       <label for="image" class="col-xs-4">Imagen:</label>
                       <input type="file" class="col-xs-8" name="trivial-image" id="image">
                </div>

                <div id="feedback-container" class="form-group col-xs-12 row competition-add-label feedback-container" >
                       <label for="feedback" class="col-xs-4">Feedback:</label>
                       <input type="text" class="col-xs-8" name="trivial-feedback" id="feedback" value="{{question.questionTranslations[1].feedback}}">
                </div>

              {% endif %}

                <div id="questionError" class="modal-footer competition-add-footer col-xs-12" style="text-align: center">
                    <input type="submit" class="btn trivial-edit-update" value="Guardar cambios">
            </div>
            </form>
    
  </div>
</div>
  {% endblock %}
  {% block javascripts %}
  {{parent()}}
  <script src="{{ asset('js/validateQuestion.js') }}" ></script>
{% endblock %}