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

        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 sich dazu entschieden, dass Angebot an kostenlosen Nachrichtenartikeln nicht mehr in Anspruch zu nehmen und zur Befragung zu wechseln!</b>
    </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" 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 desktop-11">
        <tr>
            <td>nicht interessiert</td>
                {% for choice in form.interesse %}
                    <td>{{ choice }}</td>
                {% endfor %}
            <td>sehr interessiert</td>
        </tr>
    </table>
    <table class="scale-11 mobile-11">
        <tr style="border:none;">
            <td colspan="2" style="font-size: 13px;">nicht interessiert</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2" style="text-align:right; font-size: 13px;">sehr interessiert</td>
        </tr>
        <tr>
            {% for choice in form.interesse %}
                <td>{{ choice }}</td>
            {% endfor %}
        </tr>
    </table>
    <div class="custom-radio-select small-mobile-11"> 
        nicht interessiert
        {% for choice in form.interesse %}
            <p>{{ choice }}</p>
        {% endfor %}
        sehr interessiert
    </div>
    

    
    <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 desktop-11">
        <tr>
            <td>sehr unwahrscheinlich</td>
                {% for choice in form.zahlen %}
                    <td>{{ choice }}</td>
                {% endfor %}
            <td>sehr wahrscheinlich</td>
        </tr>
    </table>
    <table class="scale-11 mobile-11">
        <tr style="border:none;">
            <td colspan="2" style="font-size: 13px;">sehr unwahr&shy;scheinlich</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2" style="text-align:right; font-size: 13px;">sehr wahr&shy;scheinlich</td>
        </tr>
        <tr>
            {% for choice in form.zahlen %}
                <td>{{ choice }}</td>
            {% endfor %}
        </tr>
    </table>
    <div class="custom-radio-select small-mobile-11"> 
        sehr unwahrscheinlich
        {% for choice in form.zahlen %}
            <p>{{ choice }}</p>
        {% endfor %}
        sehr wahrscheinlich
    </div>
    <button class="otree-btn-next btn btn-primary">Weiter</button>
        
{% endblock %}