{% extends "global/Page.html" %}
{% load otree %}

{% block styles %}
    <style type="text/css">
        .image-full {width: 100%}
    </style>
{% endblock %}  

{% block content %}
<div class="infobox div-margin-bottom">
    Unten sehen Sie den Aufbau der Website sowie das Angebot an Nachrichtenartikeln.</br> Bitte schauen Sie sich den Aufbau gründlich an.
</div>

<img class="image-full" src="{% static 'picture_overview.png' %}"/>

<div class="div-margin-top desktop">
<p><b>Wie gefällt Ihnen der Aufbau der Webseite?</b></p>
<table class="scale-7">
    <tr>
        <td class="with-border">
            gar nicht ansprechend
        </td>
        {% for choice in form.aufbau %}
            <td>{{ choice }}</td>
        {% endfor %}

        <td class="with-border">
            sehr ansprechend
        </td>
    </tr>
</table>
</div>

<div class="custom-radio-select mobile"> 
    <div><b>Wie gefällt Ihnen der Aufbau der Webseite?</b></div>
    gar nicht ansprechend
    {% for choice in form.aufbau %}
        <p>{{ choice }}</p>
    {% endfor %}
    sehr ansprechend
</div>


<button class="otree-btn-next btn btn-primary">Weiter</button>

{% endblock %}