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

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

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



<p>
{% if not retweet_page %}
    Click the button below to view a summary of your Twitter news diet. <b>This summary is calculated from the average
    ideology of the news publishers you follow</b>. This summary is strictly based on your public Twitter profile
    and NOT affected by any previous questions in this survey. Full details of the methodology used to construct
    the news diet summary can be found <a href="#" data-toggle="modal" data-target="#MethodologyModal" style="color: blue">here</a>.

{% else %}
    Below you can again view your Twitter news diet summary by clicking the button below. This summary incorporates
    any new publishers you followed while on the previous page.
{% endif %}
<br>
</p>

<div class="row justify-content-center" style="margin-bottom: 10px">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#NewsSummaryModal">View News Diet Summary</button>
</div>
{% if not retweet_page and peer_treatment %}
<p>
    Click the button below to view a summary of your Followers’ News Diet. This summary shows the average ideology
    of a representative sample of your Twitter followers' news diet.
</p>
    <div class="row justify-content-center" style="margin-bottom: 10px">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#NewsSummaryModalPeers">View Your Followers' News Diet Summary</button>
    </div>
{% endif %}

{% if public_treatment and retweet_page %}
<br><br>
<h4>Bonus Lottery</h4>
<p>
    <b>
        You have been randomly selected to receive an additional chance at two hundred dollars ($200) if you share the
        summary on Twitter. If you decline, you are still eligible for the first lottery by clicking the next button to
        complete the survey. If you accept, please follow the instructions below to Tweet the summary.</b>
</p>
    <ol>
        <li>
            Click the tweet button below to create a draft Tweet.
            <br>
            <div class="row justify-content-center">
                <a href="https://twitter.com/intent/tweet?text={{tweet_text}}" id="tweet_button" target="_blank">
                    <img alt="Tweet" src="{% static 'tweet.png' %}">
                </a>
            </div>
        </li>
        <li>
            <b>To be eligible for the bonus, you must tweet the image and keep the text unchanged.</b> To attach the image,
            simply click the Tweet button and a link to the image will be automatically embedded in the tweet.
            <br>
        </li>
    </ol>
{% elif placebo_treatment and retweet_page %}
<br><br>
<h4>Bonus Lottery</h4>
<p>
    <b>
        You have been randomly selected to receive an additional chance at two hundred dollars ($200) if you share a referral link on Twitter.
        If you decline, you are still eligible for the first lottery by clicking the next button to
        complete the survey. If you accept, please follow the instructions below to Tweet the referral link.</b>
</p>
    <ol>
        <li>
            Click the tweet button below to create a draft Tweet.
            <br>
            <div class="row justify-content-center">
                <a href="https://twitter.com/intent/tweet?text={{tweet_text}}" id="tweet_button" target="_blank">
                    <img alt="Tweet" src="{% static 'tweet.png' %}">
                </a>
            </div>
        </li>
        <li>
            <b>To be eligible for the bonus, you must keep the text unchanged.</b>
            <br>
        </li>
    </ol>
{% endif %}
{% if not public_treatment and retweet_page %}
            <p>
            <b>Please click the next button below to complete the survey.</b>
            </p>
{% endif %}

<div id="NewsSummaryModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="newsSummaryModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">News Diet Summary</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="row justify-content-center">
            <div class="col-12 justify-content-center">
                <img src="data:image/png;base64,{{ infographic|safe }}" style="width: 100%">
            </div>
            </div>
        </div>
      <div class="modal-footer">
<!--          <button type="button" class="btn btn-secondary"><a href="{{infographic_path}}" download="news_diet_summary.png" style="color: white">Download</a></button>-->
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

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

<div id="NewsSummaryModalPeers" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="newsSummaryModalPeersLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">News Diet Summary of Your Followers</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="row justify-content-center">
            <div class="col-12 justify-content-center">
                <img src="data:image/png;base64,{{ peer_infographic|safe }}" style="width: 100%">
            </div>
            </div>
        </div>
      <div class="modal-footer">
          {% if public_treatment and retweet_page %}
          <button type="button" class="btn btn-secondary"><a href="{{infographic_path}}" download="news_diet_summary.png" style="color: white">Download</a></button>
          {% endif %}
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

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


<div id="MethodologyModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="methodologyModalLabel" 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/methodology.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>

    <p>
        <b>Please continue with the survey for a chance to win the lottery!</b>
    </p>


    <br><br>

    {% next_button %}
<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 %}
{% endblock %}