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

{% block title %}
    Suggested publishers
{% endblock %}


{% block content %}

<p>
    Below are a sample of publishers that you could follow to change your news diet. <b>All publishers would make
    your news diet heavier</b>, although they will impact the slant of your news diet differently. <b>The arrow next to the
    publisher name shows the direction and size of the impact it will have on your news diet</b>. For example, a large blue
    arrow pointing left will have a relatively big shift in your news diet toward left-leaning outlets, and a short red arrow
    will have a smaller shift in your news diet toward right-leaning outlets.
</p>

<p>
    If you are interested in changing your news diet, follow some of the publishers mentioned below or other publishers that
    you are familiar with. Once you have made any changes you want to make, continue to the next page to see your updated news diet.
</p>

    <br><br>
    <div class="col-12">
        <table class="table">
            <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col">Description</th>
                <th scope="col">Impact on slant</th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            {% for rec in recommendations %}
            <tr>
                <td>
                    <img src="{% static rec.img_path %}" width="80%"/>
                </td>
                <td>
                    <b>{{rec.name}}</b>: {{rec.description}}
                </td>
                <td>
                    {% if rec.slant_change < 0 %}
                    <div class="arrow" style="--width: {{rec.arrow_total_width}}px">
                      <div class="left-line" style="--line_width: {{rec.arrow_line_width}}px"></div>
                      <div class="left-point"></div>
                    </div>
                    {% elif rec.slant_change > 0 %}
                    <div class="arrow" style="--width: {{rec.arrow_total_width}}px">
                      <div class="right-line" style="--line_width: {{rec.arrow_line_width}}px"></div>
                      <div class="right-point"></div>
                    </div>
                    {% else %}
                    {% endif %}
                </td>
                <td>
                    <button class="btn-primary twitter-btn rounded" type="button" onclick="window.open('https://twitter.com/{{rec.screen_name}}','_blank')">
                        Follow @{{rec.screen_name}}
                    </button>
                </td>
                <td>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <br><br>

    {% next_button %}

{% endblock %}

{% block scripts %}
<script>
</script>

{% endblock %}