{%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() }}

    <table>
      <thead>
        <tr>
          <th>ID Question</th>
          <th>Statement</th>
          <th>Image</th>
          <th>ID Answer</th>
          <th>AnswerValid</th>
        </tr>
      </thead>
      <tbody>
        {% for question in questionTinder %}
          <tr>
            <td>{{question.id}}</td>
            <td>{{question.questionTranslations[0].statement}}</td>
            <td><img src="{{ asset('images/question/'~question.image) }}" style="max-width: 75px"></td>
            {% for answer in question.answers %}
              {% if answer.answerValid %}
                <td>{{answer.id}}</td>
                <td>{{answer.answerTranslations[0].answerText}}</td>
              {% endif %}
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
{% endblock %}  
{% block javascripts %}
  {{parent()}}
{% endblock %}