{% extends "base.html" %}
{% load static %}
{% block 'content' %}
<div>
    <center>
        <a href="#listen">
            <button type="button" class="btn btn-light nav-link">listen</button>
        </a>

        <a href="#watch">
            <button type="button" class="btn btn-light nav-link">watch</button>
        </a>

        <a href="#book">
            <button type="button" class="btn btn-light nav-link">book us</button>
        </a>

        <a href="{% url 'socials'  %}">
            <button type="button" class="btn btn-light nav-link">social</button>
        </a>
        <br>
    </center>

</div>

<div class="container-fluid pt-2 mt-3">

    <div class="row pb-4">
        <div class="col-lg-6">
            <center>
                <img id="band-img-1" class="img-fluid" src="{% static 'img/members.png' %}" alt="" style="margin-bottom: 20px; width:100%; height: auto; max-width: 840px;">

                <div style="margin-top:30px; margin-bottom: 20px;">
                    {% include 'mailing_list.html' %}
                </div>
            </center>
        </div>

        <div class="col-lg-6" style="padding:30px; background-color: #54b879;">
					{{synopsis|safe}}
        </div>
    </div>

    <h1 id="listen">Listen:</h1>
        <center>
            <iframe style="border: 0; max-width: 350px; height: 753px;" src="https://bandcamp.com/EmbeddedPlayer/album=4037494074/size=large/bgcol=ffffff/linkcol=de270f/transparent=true/" seamless><a href="https://shrinkin-minkin.bandcamp.com/album/tyrannizing-harmonics">Tyrannizing Harmonics by shrinkin-minkin</a></iframe>
        </center>
    <br><br>

    <h1 id="watch">Watch Us Live:</h1>
    <div class="iframe-container">

        <iframe referrerpolicy="no-referrer-when-downgrade" class="responsive-iframe" src="https://www.youtube-nocookie.com/embed/7Dbg5MuOgbY?si=qW3dw8QY4a8sHqbX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
        <br><br>
    <div class="iframe-container">
        <iframe referrerpolicy="no-referrer-when-downgrade" class="responsive-iframe" src="https://www.youtube-nocookie.com/embed/4Cx1_LMJRzM?si=fS9EuyczsNvsJuSb&amp;start=42" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
        <br><br>
    <div class="iframe-container">
        <iframe referrerpolicy="no-referrer-when-downgrade" class="responsive-iframe" src="https://www.youtube-nocookie.com/embed/R3fo-k2_wfM?si=Foz0OaTK6GC5psKo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>

    <div class="mt-5 mb-5 p-5">
        <h1 id="book">Book Us:</h1>
        <br>
        Email: booking<span style="font-family: monospace;">@</span>reconpaul.com <br>
        Phone: 917-270-6504
        <br><br>

    </div>
</div>

<div>
    <img class="footer-image" src="{% static 'img/bugman_sticker.png' %}" alt="">
</div>

{% endblock %}