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

{% block title %}
    News Summary
{% endblock %}

{% block content %}

<p>
{% if not retweet_page %}
    Click the button below to view your Twitter news diet summary.
    {% if public_treatment %}
        <b>We would like you to share this image on Twitter, and to encourage you to
        do so we will pay you an extra XX if you tweet the image at the end of this survey. Before sharing, however, we would like to give you a
            chance to adjust your news diet.</b>
    {% endif %}
     <br><br>
     Once you have reviewed your summary, please continue to the next page to see a few suggested publishers
     you could follow and how they would impact your news diet.
{% 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 %}
    <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>
<p>
<b>We would like to encourage you to share this image on Twitter, and will offer to pay you an extra XX if you do so.</b> If you would like to earn the
XX bonus, follow these steps.
</p>
    <ol>
        <li>
            Save the image of your news summary to your device as a PNG file by clicking the download button below.
            <br><br>
            <div class="row justify-content-center">
                <button type="button" class="btn btn-secondary"><a href="{{infographic_path}}" download="news_diet_summary.png" style="color: white">Download Summary</a></button>
            </div>
            <br>
        </li>
        <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}}" target="_blank">
                    <img alt="Tweet" src="{% static 'tweet.png' %}">
                </a>
            </div>
        </li>
        <li>
            <b>To be eligible for the bonus, you must attach the image you downloaded
            to the Tweet and keep the text unchanged.</b> To attach the image, click the graphics button at the bottom of the draft tweet
            and attach the image you downloaded in step 1. In the screenshot below, the graphics button is outlined in red.
            <br>
            <img src="/static/upload_button.png" style="width: 100%">
        </li>
    </ol>
{% 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">
          {% 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="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>


    <br><br>

<!--    </div>-->

    <br><br>

    {% next_button %}

{% endblock %}

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

{% endblock %}