{{> navbar}}

<script>
    document.title ="{{page.title}}";
    var videohref="{{page.videohref}}";
</script>

<script src="js/video.js"></script>

<script>
    $(document).ready( function(){
        load_video();
    });
</script>

<link rel="stylesheet" href="css/video.css">

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div id="video" class="video">
            </div>
        </div>
    </div> <!-- row -->

    <div class="row">
        <div class="col-sm-7">
            <div class="title">
                <h1>{{uppercase page.title}}</h1>
            </div>
        </div>

        <div class="col-sm-5">
            <a href="?{{next}}">
                <div class="button">
                    {{#if page.last}} 
                        <img src="images/web-btn-home.png"></img>
                    {{else}}
                        <img src="images/web-btn-next.png"></img>
                    {{/if}}
                </div>
                        
            </a>
        </div>
    </div> <!-- row -->

    <div class="row">
        <div class="col-sm-8">
            <div class="paragraph-block">
                {{text page.textbox}} 
            </div>
        </div> <!-- col-sm-8 -->
        
        <div class="col-sm-4">
            <div id="additionalResources">
                <h3>ADDITIONAL RESOURCES</h3>
                {{#each page.resources}}
                    <div>
                        <img src="{{this.img}}"></img>
                        <a href="{{this.url}}" target="_blank">{{this.title}} </a>
                    </div>
                {{/each}}
            </div>
        </div>
    </div> <!-- row -->

    <div class="row">
        <div class="col-sm-4"></div> <! FIX >
        <div class="col-sm-8">
            <div id="logo">            
                <img src="images/logos.png"></img>
            </div>
        </div>
    </div> <!-- row -->
</div> <!-- container -->

</div> <!--container-->