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


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


{% block content %}
<h1 style="font-size:40px;">Suggested Publishers</h1>

<p>
    Below is a sample of news publishers. Following any of these publishers will impact the political
    slant of the news that you receive in your Twitter feed. <b>The arrow next to the publisher’s 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>
        From this list, please select the one publisher that you are most interested in following by clicking “Select”.
        You will be redirected to a page where you can see a list of the latest tweets of the selected publisher,
        and you also will have the chance to follow the publisher.
    </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>
                    <div id="select_{{rec.screen_name}}">
<!--                        <button class="btn-primary rounded" id="button_{{rec.screen_name}}" type="button" onclick="liveSend({'selected_publisher': '{{rec.screen_name}};'}); ">-->
<!--                            Select @{{rec.screen_name}}-->
<!--                        </button>-->
                            <button type="button" id="button_{{rec.screen_name}}" class="btn btn-primary" data-toggle="modal" data-target="#modal_{{rec.screen_name}}">Select {{rec.screen_name}}</button>
                    </div>

                    <div id="modal_{{rec.screen_name}}" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="publisherModalLabel" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Select @{{rec.screen_name}}</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    {% if public_treatment and recommendations_page_reminder %}
                                        As a reminder, you have an additional chance at $200 if you retweet the publisher you select.
                                        This is the last reminder for this bonus. We will check in a few days if you retweeted the publisher you select
                                        to determine your eligibility for the bonus.
                                    <br><br>
                                    <b>
                                        Remember retweeting the publisher is completely optional, and you remain eligible for the initial chance at $200 if you
                                        do not retweet but complete the survey.
                                    </b>
                                    <br><br>
                                    {% else %}
                                    {% endif %}
                                    Are you sure you would like to select @{{rec.screen_name}}?
                                </div>
                              <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" id=modal_exit_{{rec.screen_name}} data-dismiss="modal">No, let me change</button>
                                  <button type="button" class="btn btn-secondary" id="modal_select_{{rec.screen_name}}" onclick="liveSend({'selected_publisher': '{{rec.screen_name}};'});">Yes, I am sure</button>
                              </div>

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

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

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