{% load static %}
<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Coming Soon Bootstrap Landing Page</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap and Font Awesome css-->
    <link rel="stylesheet" href="{% static 'sssoon/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static 'sssoon/css/bootstrap.min.css' %}">
    <!-- Google fonts-->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
    <!-- Theme stylesheet-->
    <link rel="stylesheet" href="{% static 'sssoon/css/style.default.css' %}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="{% static 'sssoon/css/custom.css' %}">
    <!-- Favicon-->
    <link rel="shortcut icon" href="{% static 'sssoon/favicon.png' %}">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
<div style="background-image: url('/static/sssoon/img/video-bg.jpg')" class="main">
    <!-- video background-->
    <!-- replace URLs with your video content URL-->
    <video id="video-background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
        <source src="http://ondrejsvestka.cz/video/silver-lining-video.webm" type="video/webm">
        <source src="http://ondrejsvestka.cz/video/silver-lining-video.mp4" type="video/mp4">
    </video>
    <div class="overlay"></div>
    <div class="container">
        <p class="social"><a href="#" title="" class="facebook"><i class="fa fa-facebook"></i></a><a href="#" title=""
                                                                                                     class="twitter"><i
                class="fa fa-twitter"></i></a><a href="#" title="" class="gplus"><i class="fa fa-google-plus"></i></a><a
                href="#" title="" class="instagram"><i class="fa fa-instagram"></i></a></p>
        <h1 class="cursive">Video comming soon template</h1>
        <h2 class="sub">You can expect this beautiful website running soon. </h2>
        <div class="mailing-list">
            <h3 class="mailing-list-heading">Join our mailing list and we will notify you once it is ready!</h3>
            <div class="row">
                <form id="email-signup" class="form-inline" action="{% url 'sssoon:signup' %}" method="POST"
                      onsubmit="return false;">
                    {% csrf_token %}
                    <div class="alert col-md-6 col-md-offset-3 sssoon-alert" style="display: none;"></div>
                    <div class="col-md-6 col-md-offset-3">
                        <div class="form-group">
                            <label for="email" class="sr-only"></label>
                            {{ signupform.email }}
                        </div>
                        <button class="btn btn-danger">subscribe</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <p>&copy;{% now "Y" %} Your name/company goes here</p>
                </div>
                <div class="col-md-6">
                    <p class="credit">Made by <a href="https://bootstrapious.com">Bootstrapious.com</a></p>
                    <!-- Not removing these links is part of the license conditions of the template. Thanks for understanding :) If you want to use the template without the attribution links, you can do so after supporting further themes development at https://bootstrapious.com/donate  -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- JAVASCRIPT FILES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="javascripts/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="{% static 'sssoon/js/bootstrap.min.js' %}"></script>
<script src="{% static 'sssoon/js/jquery.cookie.js' %}"></script>
<script src="{% static 'sssoon/js/front.js' %}"></script>
<script src="{% static 'sssoon/js/formValidation.min.js' %}"></script>
<script src="{% static 'sssoon/js/framework/bootstrap.min.js' %}"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID.-->
<script>
    (function (b, o, i, l, e, r) {
        b.GoogleAnalyticsObject = l;
        b[l] || (b[l] =
            function () {
                (b[l].q = b[l].q || []).push(arguments)
            });
        b[l].l = +new Date;
        e = o.createElement(i);
        r = o.getElementsByTagName(i)[0];
        e.src = '//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e, r)
    }(window, document, 'script', 'ga'));
    ga('create', 'UA-XXXXX-X');
    ga('send', 'pageview');
</script>


<script type="application/javascript">
    $(document).ready(function () {
        $("#email-signup").formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                email: {
                    validators: {
                        notEmpty: {
                            message: 'Email address is required'
                        },
                        emailAddress: {
                            message: 'Please input a valid email address'
                        }
                    }
                }
            }
        }).on('success.field.fv', function (e, data) {
            // If the field is empty
            if (data.element.val() === '') {
                var $parent = data.element.parents('.form-group');

                // Remove the has-success class
                $parent.removeClass('has-success');
                $parent.removeClass('has-error');

                // Hide the success icon
                data.element.data('fv.icon').hide();
            }
        }).on('success.form.fv', function (e) {
            e.preventDefault();
            var obj = $(this);
            if (obj.hasClass("disabled")) {
                return false;
            }
            obj.addClass("disabled");

            var msgobj = obj.find(".alert");
            msgobj.addClass("alert-general");
            msgobj.text("Sending...");
            msgobj.fadeIn();
            obj.removeClass("disabled");

            $.ajax({
                url: obj.attr("action"),
                type: 'post',
                dataType: 'json',
                data: obj.serialize(),
                success: function (r) {
                    results = r;
                    if (r.result === "Success") {
                        msgobj.removeClass("alert-error");
                        msgobj.addClass("alert-success");
                    } else {
                        msgobj.removeClass("alert-success");
                        msgobj.addClass("alert-error");
                    }
                    msgobj.text(r.message);
                    msgobj.fadeIn();
                    obj.removeClass("disabled");
                },
                // handle a non-successful response
                error: function (xhr, errmsg, err) {
                    msgobj.text("Oops! We have encountered an error: " + errmsg);
                    console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
                }
            });
        });
    })
</script>

</body>
</html>