<!-- SCRIPTS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type='text/javascript' src="/static/js/menu.js"></script>
    <script type='text/javascript' src="/static/js/user_actions.js"></script>
    <script type="text/javascript" src="/static/js/jquery.countdown/jquery.countdown.js"></script>
    {#    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.js"></script>#}

    <!-- JQUERY Countdown -->
    <script type="text/javascript">
        $(document).ready(function () {
            var clock = $("#countdown");
            console.log(clock);

            $("#countdown").countDown("2017/12/01", function (event) {
                console.log("CLOCK WORKS");
                $(this).text(
                        event.strftime('%D days %H:%M:%S')
                );
            });
        });
    </script>

{% block content %}

    <div id='billboard' class='flexslider billboards'>

        <ul class='slides'>

            {% for billboard in billboards %}
                <li class='slide' style="background-image: url('{{ billboard.image }}');">

                    <div class='transparent-overlay'></div>

                    <div class='container'>

                        <div class='slide-content'>

                            <h1>{% inplace_edit "billboard.header" %}</h1>

                        </div>

                    </div>

                </li>
            {% endfor %}

        </ul>

    </div>

    <div class="home-sub-container">
        <div class="col-xs-8" style="border: 1px solid lime;">
            <div id="daily-sales-tracker" style="height: 500px; background-color: lightgray; margin-bottom: 30px;"></div>

            <div id="additional-plugins" style="height: 500px; background-color: lightgray;"></div>
        </div>
        <div class="col-xs-4 red-alerts">
            <p>RED ALERTS</p>
            <div class="styled-divider">
                <div class="color"></div>
                <div class="no-color"></div>
            </div>
            {% for alert in red_alerts %}
                <div class="red-alert">
                    <div class="fa-container">
                        {% if alert.font_awesome_one %}
                            <i class="fa {{ alert.font_awesome_one }}"></i>
                        {% endif %}
                        {% if alert.font_awesome_two %}
                            <i class="fa {{ alert.font_awesome_two }}"></i>
                        {% endif %}
                        {% if alert.font_awesome_three %}
                            <i class="fa {{ alert.font_awesome_three }}"></i>
                        {% endif %}
                    </div>
                    <p class="alert-title">
                        {{ alert.title }}
                    </p>
                    <a href="{{ alert.link }}" class="alert-links">
                        DOWNLOAD
                    </a>
                </div>
            {% endfor %}

            <div id="countdown">
            </div>
        </div>
    </div>

    <div id='sections' class='home-sections'>

        {% for section in sections %}
            <div class='section-wrapper {% cycle "white" "dark" %}'>

                <div class='container'>

                    <div class='row'>

                        {% inplace_edit 'section.content|safe' adaptor='tiny' %}
                        <div class='clear-both'></div>

                    </div>

                </div>

            </div>
        {% endfor %}

        <div class='clear-both'></div>

    </div>

{% endblock %}