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

{% block styles %}
    <style type="text/css">
        .button-disabled {
            background-color: #a62f2d;
            color: #fff;
            font-size: 15px
        }

        .block-row .button-disabled:hover, .block-row .button-disabled:focus {
            transform: translateY(0);
            box-shadow: none;
        }

        .button-disabled .title{ 
            opacity: 0.5;
        }

    </style>
{% endblock %}  

{% block scripts %}
    <script>
        for(i of {{list}}){
            document.getElementById(i).disabled = true;
            document.getElementById(i).className += " " + "button-disabled";
            document.getElementById(i).title = "Dieser Nachrichtenartikel ist für Sie nicht kostenlos verfügbar."
            document.getElementById(i).innerHTML += "<b>Nicht kostenlos verfügbar</b>"
        }

        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">Die Redaktion der Webseite hat <b>{{kacheln_num}} Nachrichtenartikel für Sie ausgewählt</b>, die Sie kostenlos lesen können. Die <b>restlichen Nachrichtenartikel</b> stehen Ihnen <b>nicht kostenlos</b> zur Verfügung.
    <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 %}