#extend("base")

#export("title") { Martin Jensen }

#export("content") {
<script>

$(document).ready(function(){
    $(".segmented label input[type=radio]").each(function(){
        $(this).on("change", function(){
            if($(this).is(":checked")){
               $(this).parent().siblings().each(function(){
                    $(this).removeClass("checked");
                });
                $(this).parent().addClass("checked");
            }
        });
    });
});

var hasVoted = false;

function likePost(id) {
    if (!hasVoted) {
        $.post("/submissions/" + id, function(data) {
            $("#" + id + " h3").text(data.count + " votes");
            $("#" + id + " a").addClass("selected");
            hasVoted = true;
        });
    }
}
</script>

<div class="text-center">
        <img class="img-logo" src="/assets/martin-jensen-logo.svg">
</div>
<div class="text-center img-main-container">
    <img class="img-main" src="/assets/martin.png">
</div>

<div class="text-center text-uppercase">
    <div>
        <img class="img-company-logo" src="/assets/spotify-logo.png">
    </div>
    <div class="text-intro">
        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h5>
    </div>
    <div>
        <a href="/signup" class="btn btn-primary btn-lg text-uppercase submit-video-btn" role="button">
            SUBMIT YOUR VIDEO
        </a>
    </div>
</div>

<div class="segmented">
    <label class="checked"><input type="radio" name="segmented" checked />TOP VOTED</label>
     <label><input type="radio" name="segmented" />NEWEST</label>
</div>

<div>
      #loop(submissions.data, "submission") {

      <div class="col-xs-12 col-md-6">
            <a href="/submissions/#(submission.id)">
              <video class="video_player">
                <source src="#(submission.fileUrl)">
            </video>
            <div class="video-info">
              <h1>#(submission.name), #(submission.country) #(submission.flagEmoji)</h1>
                        <h3>#(submission.votes) votes</h3>
                        <a class="vote" href="javascript:likePost(#(submission.id))">VOTE</a>
            </div>
            </a>
      </div>
    }

</div>

<!-- <div class="submissions">
    #loop(submissions.data, "submission") {
        <div id="#(submission.id)" class="submission">
        <a href="/submissions/#(submission.id)">
            <video class="video_player" width="320" height="180">
                <source src="#(submission.fileUrl)">
            </video>
            <h1>#(submission.name), #(submission.country) #(submission.flagEmoji)</h1>
            <h3>#(submission.votes) votes</h3>
            <a class="vote" href="javascript:likePost(#(submission.id))">VOTE</a>
        </a>
        </div>
    }

    #paginator(submissions)
</div> -->
}