{% 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;
        }

        .header {
            opacity: 0.3;
        }
    </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 class="warningbox"><b>Sie haben das gesamte Angebot an kostenlosen Nachrichtenartikeln auf der Webseite gelesen!</b></div>

<div class="header-row">
    <div class="block block1 header"><p class="title">{{Constants.articles.0.category|softhyphen|safe}}</p></div>
    <div class="block block2 header"><p class="title">{{Constants.articles.1.category|softhyphen|safe}}</p></div>
    <div class="block block3 header"><p class="title">{{Constants.articles.2.category|softhyphen|safe}}</p></div>
    <div class="block block4 header"><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" disabled><p class="title">{{Constants.articles.0.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="2" id="2" class="block block2" disabled><p class="title">{{Constants.articles.1.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="3" id="3" class="block block3" disabled><p class="title">{{Constants.articles.2.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="4" id="4" class="block block4" disabled><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" disabled><p class="title">{{Constants.articles.4.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="6" id="6" class="block block2" disabled><p class="title">{{Constants.articles.5.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="7" id="7" class="block block3" disabled><p class="title">{{Constants.articles.6.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="8" id="8" class="block block4" disabled><p class="title">{{Constants.articles.7.title|softhyphen|safe}}</p></button>
</div>
<div class="block-row div-margin-bottom">
    <button name="buttons_clicked" value="9" id="9" class="block block1" disabled><p class="title">{{Constants.articles.8.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="10" id="10" class="block block2" disabled><p class="title">{{Constants.articles.9.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="11" id="11" class="block block3" disabled><p class="title">{{Constants.articles.10.title|softhyphen|safe}}</p></button>
    <button name="buttons_clicked" value="12" id="12" class="block block4" disabled><p class="title">{{Constants.articles.11.title|softhyphen|safe}}</p></button>
</div>

    <div><p>
        <b>
            Basierend auf Ihrer Erfahrung mit dem kostenlosen Angebot an Nachrichtenartikeln,
        </b>
        </p>
        <p>
        <b>
            … wie groß ist Ihr Interesse daran, unbegrenzten Zugang zum gesamten Angebot der Webseite zu erhalten?        
        </b>
        </p>   
    </div>
    <table class="scale-11">
        <tr>
            <td>nicht interessiert</td>
                {% for choice in form.interesse %}
                    <td>{{ choice }}</td>
                {% endfor %}
            <td>sehr interessiert</td>
        </tr>
    </table>
    
    <div>
        <b>
            … wie wahrscheinlich ist es, dass Sie für den unbegrenzten Zugang zum gesamten Angebot der Webseite etwas bezahlen würden?        
        </b>
    </div>
    <table class="scale-11">
        <tr>
            <td>sehr unwahrscheinlich</td>
                {% for choice in form.zahlen %}
                    <td>{{ choice }}</td>
                {% endfor %}
            <td>sehr wahrscheinlich</td>
        </tr>
    </table>

    <button class="otree-btn-next btn btn-primary">Weiter</button>
        
{% endblock %}