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


{% block title %}
Twitter News Experiment
{% endblock %}


{% block content %}
<h1 style="font-size:40px;">Suggested Publishers</h1>
<p>
    Following a news or media page is a great way to learn about the news and hear diverse perspectives.
    Below are a sample of publishers that you could follow to change your news diet. <b>To enrich your news diet,
    please click "Follow" on several of the outlets below</b> (you will be redirected to Twitter to confirm your follow,
    you can always unfollow the page at any time).
</p>

<p>
    Following these publishers 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>
    <b>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.</b>
</p>

<p>
    To see the full list of publishers that are included in this study, click <a href="#" data-toggle="modal" data-target="#PublisherModal" style="color: blue">here</a>.
</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 id="{{rec.screen_name}}">
                <td id="image_{{rec.screen_name}}">
                    <img src="{% static rec.img_path %}" width="80%"/>
                </td>
                <td id="description_{{rec.screen_name}}">
                    <b>{{rec.name}}</b>: {{rec.description}}
                </td>
                <td id="arrow_{{rec.screen_name}}">
                    {% 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" id="button_{{rec.screen_name}}" type="button" onclick="window.open('https://twitter.com/intent/follow?screen_name={{rec.screen_name}}','_blank')">
                        Follow @{{rec.screen_name}}
                    </button>
                </td>
                <td>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <br><br>


    <div id="next_button">
            <button type="button" id="button_next" class="btn btn-primary" data-toggle="modal" data-target="#modal_reminder">Next</button>
    </div>

<!--    <div id="next_button">-->
<!--        {% next_button %}-->
<!--    </div>-->

<div id="PublisherModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="publisherModalLabel" aria-hidden="true" style="height: 100%">
  <div class="modal-dialog modal-lg" style="height: 100%">
    <div class="modal-content" style="height: 90%">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">News Diet Summary Methodology</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <iframe src="/static/publisherslants.html" style="width: 100%; height: 100%"></iframe>
        </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

<div id="modal_reminder" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="reminderModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Continue</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            Are you sure you would like to continue?
            {% if public_treatment and recommendations_page_reminder %}
                As a reminder, this is your last opportunity to adjust your news diet summary before your
                chance to participate in the bonus lottery by tweeting this news diet summary. To participate, share your
                news diet summary on the next page.

            <br><br>
            <b>
                Remember, tweeting the summary is completely optional, and you remain eligible to participate in the first
                lottery if you complete the survey (regardless of whether you tweet or not).
            </b>
            <br><br>
            {% else %}
            {% endif %}

        </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-secondary" id=modal_exit_reminder data-dismiss="modal">No, let me change</button>
          <button type="button" class="btn btn-secondary" id="modal_continue_reminder" onclick="liveSend('next');">Yes, I am sure</button>
      </div>

    </div>
  </div>
</div>

<br><br><br>
<footer class="text-muted">
     <div class="container">
        <p>This study is conducted by researchers at MIT. For help please contact <a href="mailto:NewsConsumptionProject@mit.edu" style="color: blue">NewsConsumptionProject@mit.edu</a></p>
    </div>
</footer>

{% endblock %}

{% block scripts %}
<script>
function liveRecv(data) {
    if (data == "continue"){
        document.getElementById('form').submit();
    }
}
</script>

{% endblock %}