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

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

{% block content %}
<h1 style="font-size:40px;">News Diet 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 %}
    By clicking the button below you can view your updated Twitter news diet summary after any changes you may have made 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>
    Want to see if your guess about the ideological position of your followers is correct? Click the button below to
    view a summary of your Followers’ News Diet and <b>understand how much you are currently diverging from them</b>. 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 %}

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


{% if retweet_page %}
    <br><br>

    <p>
        <b>
            We encourage you to share on Twitter either a referral link with no personal information
            or your news diet summary.
            Clicking the buttons below will draft a tweet for you to share. Please click the buttons if
            you would like to share either piece of information, otherwise continue with the survey by clicking Next.
        </b>
    </p>


<br>
            <div class="row justify-content-center">
                <div class="col-6 center-block" align="center">
                    <a id="share_referral" href="https://twitter.com/intent/tweet?text={{tweet_text_private}}" class="btn rounded" role="button" target="_blank">Share Referral Link</a>
<!--                    <button class="btn-primary twitter-btn rounded" id="button_referral" type="button" onclick="window.open('https://twitter.com/intent/tweet?text={{tweet_text_private}}','_blank')">-->
<!--                        Share Referral Link-->
<!--                    </button>-->

<!--                    <a href="https://twitter.com/intent/tweet?text={{tweet_text_private}}" id="tweet_referral" target="_blank">-->
<!--                        <img alt="Tweet" src="{% static 'tweet.png' %}">-->
<!--                    </a>-->
                </div>
                <div class="col-6" align="center">
                    <a id="share_summary" href="https://twitter.com/intent/tweet?text={{tweet_text_public}}" class="btn rounded" role="button" target="_blank">Share News Diet Summary</a>
<!--                    <button class="btn-primary twitter-btn rounded" id="button_summary" type="button" onclick="window.open('https://twitter.com/intent/tweet?text={{tweet_text_public}}','_blank')">-->
<!--                        Share Summary Statistic-->
<!--                    </button>-->
<!--                    <a href="https://twitter.com/intent/tweet?text={{tweet_text_public}}" id="tweet_summary" target="_blank">-->
<!--                        <img alt="Tweet" src="{% static 'tweet.png' %}">-->
<!--                    </a>-->
                </div>
            </div>
{% endif %}
<br><br>


    <br><br>
<p>
{% if not retweet_page %}
     Please continue to the next page where you can see a list of suggested
    publishers and understand how they could impact your ideology. <b>If you decide to follow any new publishers, your summary
        will be updated accordingly.</b>
{% endif %}
<br>
</p>

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