{% extends 'ecbc-base.html' %}
{% block content %}
    <div class="jumbotron">
        <div class="col-sm-8 mx-auto">
            <h1>Resources</h1>
            <hr/>
            <h2>Tutorials</h2>
            <h4>Building Owner</h4>
            <div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-body mb-0 p-0">

                            <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                <iframe class="embed-responsive-item"
                                        src="https://www.youtube.com/embed/A3PDXmYoF5U"
                                        allowfullscreen></iframe>
                            </div>

                        </div>
                        <div class="modal-footer justify-content-center">
                            <span class="mr-4">Spread the word!</span>
                            <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4"
                                    data-dismiss="modal">Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-12 mb-4">
                    <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-1.jpg"
                            alt="video" data-toggle="modal" data-target="#video-modal"></a>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-2.jpg"
                            alt="video" data-toggle="modal" data-target="#video-modal"></a>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <a><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-3.jpg"
                            alt="video" data-toggle="modal" data-target="#video-modal"></a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $('#video-modal').on('hidden.bs.modal', function (e) {
            $('#video-modal iframe').attr("src", $("#modal1 iframe").attr("src"));
        });
    </script>
{% endblock %}