{% 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">
<p><b>Wie übersichtlich finden Sie den Aufbau der Webseite?</b></p>
<table class="scale-7 desktop desktop-7-var">
    <tr>
        <td class="with-border">
            gar nicht übersichtlich
        </td>
        {% for choice in form.Design %}
            <td>{{ choice }}</td>
        {% endfor %}

        <td class="with-border">
            sehr übersichtlich
        </td>
    </tr>
</table>
<table class="scale-7 mobile-7-var">
    <tr>
        <td class="with-border">
            gar nicht übersichtlich
        </td>
        {% for choice in form.Design %}
            <td>{{ choice }}</td>
        {% endfor %}

        <td class="with-border">
            sehr übersichtlich
        </td>
    </tr>

</table>
</div>

<div class="custom-radio-select mobile-small"> 
    gar nicht übersichtlich
    {% for choice in form.Design %}
        <p>{{ choice }}</p>
    {% endfor %}
    sehr übersichtlich

</div>


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

{% endblock %}