{% block title %}
We are giving a present to someone!
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="book-container">
                <div class="text-center">Here are the two books</div>
                <img src="{% static 'img/discovering.jpg' %}"  alt="Book 1" class="img-fluid book-image">
                <img src="{% static 'img/who.jpg' %}" alt="Book 2" class="img-fluid book-image">
            </div>

    {{ include C.PRE_VIDEO }}

                <div class="text-center">
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
          aria-expanded="false" aria-controls="collapseExample" id="AdditionalInstructions">
    Read more about the original and fake notes
  </button>
            </div>
<div class="collapse" id="collapseExample">


            <div class="video-container">
            <div class="text-center">Here are videos of the professors writing the notes</div>

<!--        <div style="position:relative;width:fit-content;height:fit-content;">-->
<!--            <a style="position:absolute;top:20px;right:1rem;opacity:0.8;"-->
<!--               href="https://clipchamp.com/watch/G8JhSf4R6Jo?utm_source=embed&utm_medium=embed&utm_campaign=watch">-->
<!--            </a>-->
<!--            <iframe allow="autoplay;" allowfullscreen style="border:none"
src="https://clipchamp.com/watch/G8JhSf4R6Jo/embed" width="200" height="360"></iframe>-->
<!--        </div>-->
<!--        <div style="position:relative;width:fit-content;height:fit-content;">-->
<!--            <a style="position:absolute;top:20px;right:1rem;opacity:0.8;"
href="https://clipchamp.com/watch/tRsY6JnyDhY?utm_source=embed&utm_medium=embed&utm_campaign=watch">-->
<!--                <img loading="lazy" style="height:22px;" src="https://clipchamp.com/e.svg" alt="" />-->
<!--            </a>-->
<!--            <iframe allow="autoplay;" allowfullscreen style="border:none"
src="https://clipchamp.com/watch/tRsY6JnyDhY/embed" width="200" height="360"></iframe>-->
<!--        </div>-->

<div style="display: flex; justify-content: space-around;">
    <video width="200" height="300" autoplay muted loop>
      <source src="https://www.lukasbolte.com/static/videos/discovering.mp4" type="video/mp4" alt="Handwritten Notes Book 1" class="img-fluid gif-image">
      Your browser does not support the video tag.
    </video>

    <video width="200" height="300" autoplay muted loop>
        <source src="https://www.lukasbolte.com/static/videos/who.mp4" type="video/mp4" alt="Handwritten Notes Book 2" class="img-fluid gif-image">
        Your browser does not support the video tag.
      </video>
    </div>
            <!-- <img src="https://www.lukasbolte.com/static/videos/discovering.gif" alt="Handwritten Notes Book 1" class="img-fluid gif-image">
            <img src="https://www.lukasbolte.com/static/videos/who.gif" alt="Handwritten Notes Book 2" class="img-fluid gif-image"> -->

        </div>
            <br>

                {{ include C.POST_VIDEO }}

        <p>
            When you are ready, click "Next."
        </p>


        <button style="float: right" class="btn btn-primary btn-large">Next</button>
    </div>


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


{% endblock %}

{% block styles %}

<style>
    .container {
      padding: 0; /* Remove padding */
    }
    .video-container {
        float: left;
        width: 50%;
        margin: 0px 10px 10px 0;
        
    }
    .book-container {
        float: right;
        width: 35%;
        margin: 0 0 10px 10px;
    }
    .book-image, .gif-image {
        width: 49%; /* Adjust image width */
        padding: 0 0 10px 10px;
    }
</style>


{% endblock %}

{% block scripts %}
    <script>
        $("#AdditionalInstructions").click(function () {
        $("#AdditionalInstructions").css("display", "none");
    });
    </script>
{% endblock %}