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

{% block styles %}
    <style type="text/css">
    </style>
{% endblock %}  

{% block scripts %}
    <script>       
        document.getElementById({{round1}}).disabled = true;
        document.getElementById({{round1}}).className += " " + "button-clicked";
        
        document.getElementById({{round2}}).disabled = true;
        document.getElementById({{round2}}).className += " " + "button-clicked";

        document.getElementById({{round3}}).disabled = true;
        document.getElementById({{round3}}).className += " " + "button-clicked";

        document.getElementById({{round4}}).disabled = true;
        document.getElementById({{round4}}).className += " " + "button-clicked";
        
        document.getElementById({{round5}}).disabled = true;
        document.getElementById({{round5}}).className += " " + "button-clicked";

        document.getElementById({{round6}}).disabled = true;
        document.getElementById({{round6}}).className += " " + "button-clicked";

        document.getElementById({{round7}}).disabled = true;
        document.getElementById({{round7}}).className += " " + "button-clicked";
        
        document.getElementById({{round8}}).disabled = true;
        document.getElementById({{round8}}).className += " " + "button-clicked";

        document.getElementById({{round9}}).disabled = true;
        document.getElementById({{round9}}).className += " " + "button-clicked";

        document.getElementById({{round10}}).disabled = true;
        document.getElementById({{round10}}).className += " " + "button-clicked";
        
        document.getElementById({{round11}}).disabled = true;
        document.getElementById({{round11}}).className += " " + "button-clicked";

        document.getElementById({{round12}}).disabled = true;
        document.getElementById({{round12}}).className += " " + "button-clicked";
    </script>
{% endblock %}


{% block content %}
{% load softhyphen_tags %}
<div>
    <p class="infobox">Sie können aus allen Nachrichtenartikeln <b>frei auswählen</b>.</br> Ihnen stehen jedoch <b>nur{{noch}} {{kacheln_num}} kostenlose Nachrichtenartikel</b> zur Verfügung.</p>
    <p>Wenn Sie einen Nachrichtenartikel lesen wollen, klicken Sie bitte auf den entsprechenden Nachrichtenartikel.</p>
</div>
<div class="header-row">
    <div class="block block1"><p class="title">{{Constants.articles.0.category|softhyphen|safe}}</p></div>
    <div class="block block2"><p class="title">{{Constants.articles.1.category|softhyphen|safe}}</p></div>
    <div class="block block3"><p class="title">{{Constants.articles.2.category|softhyphen|safe}}</p></div>
    <div class="block block4"><p class="title">{{Constants.articles.3.category|softhyphen|safe}}</p></div>
</div>
<div class="block-row">
    <button name="buttons_clicked" value="1" id="1" class="block block1"><p class="title">{{Constants.articles.0.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="2" id="2" class="block block2"><p class="title">{{Constants.articles.1.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="3" id="3" class="block block3"><p class="title">{{Constants.articles.2.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="4" id="4" class="block block4"><p class="title">{{Constants.articles.3.title|softhyphen|safe}}</p></button>
</div>
<div class="block-row">
    <button name="buttons_clicked" value="5" id="5" class="block block1"><p class="title">{{Constants.articles.4.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="6" id="6" class="block block2"><p class="title">{{Constants.articles.5.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="7" id="7" class="block block3"><p class="title">{{Constants.articles.6.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="8" id="8" class="block block4"><p class="title">{{Constants.articles.7.title|softhyphen|safe}}</p></button>
</div>
<div class="block-row">
    <button name="buttons_clicked" value="9" id="9" class="block block1"><p class="title">{{Constants.articles.8.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="10" id="10" class="block block2"><p class="title">{{Constants.articles.9.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="11" id="11" class="block block3"><p class="title">{{Constants.articles.10.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="12" id="12" class="block block4"><p class="title">{{Constants.articles.11.title|softhyphen|safe}}</p></button>
</div>
<div class="div-margin-top">
    Wenn Sie keine {{weiteren}} Nachrichtenartikel lesen und zur Befragung wechseln möchten, dann wählen Sie bitte den folgenden Button aus<br>
    <div class="center">
        <button name="buttons_clicked" value="0" id="end" class="end btn btn-primary">Ich möchte zur Befragung wechseln</button>
    </div>
</div>
{% endblock %}