{% extends "base.html" %}
{% load staticfiles %}
{% load i18n %}

{% block content %}
<!-- Carousel -->
<div id="slider-carousel" class="carousel slide hidden-xs">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li class="active" onclick="MATHHELP.slide_carousel_to(0);"></li>
        <li onclick="MATHHELP.slide_carousel_to(1);"></li>
        <li onclick="MATHHELP.slide_carousel_to(2);"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="item-content">
                <img src="{% static 'images/slide1_banner.jpg' %}" class="img-responsive" alt="About Math Solutions Help service"/>
                <div class="item-description">
                    <h3>Improve your academic performance with MathSolutionsHelp</h3>
                    <p><strong>Need help with your homework assignment or get prepared for an exam?</strong><br/>
                        Look no further! On our website you can get quality help for your homework assignment, coursework or thesis in Mathematics.
                        All services are provided in timely manner and for affordable price.
                    </p>
                    <a href="{% url 'get_estimate' %}" class="pull-right btn btn-primary" role="button">Get Free Estimate &raquo;</a>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-content">
                <img src="{% static 'images/slide2_banner.jpg' %}" class="img-responsive" alt="Getting a solution in math is easy."/>
                <div class="item-description left">
                    <h3>It's easy</h3>
                    <ol>
                        <li><a href="{% url 'get_estimate' %}">Submit your problem</a></li>
                        <li>Get free estimate</li>
                        <li>Pay securely via PayPal &copy;</li>
                        <li>Get your solution!</li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="item" id="experts_slide" data-state="not started">
            <div class="item-content">
                <img src="{% static 'images/slide3_banner.jpg' %}" class="img-responsive" alt="Our experts will help you with your home assignment."/>
                <h3 class="slide-title hidden-sm"><span class="counter pull-left" id="problems-solved-counter">00</span>Problems solved by our experts to date</h3>
                <div class="item-description">
                    <h3>Our promise</h3>
                    <p>We understand that all students are concerned about the accuracy of the solutions they receive. Each solution submitted by our tutors is reviewed by an independent expert prior to being sent to the customer. This significantly reduces the probability of an error caused by Human Factor.</p>
                    <a href="{% url 'experts' %}#example-solutions" class="pull-right btn btn-primary" role="button">See Example Solutions &raquo;</a>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#slider-carousel" id="carousel-slide-left">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#slider-carousel" id="carousel-slide-right">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<!-- Example row of columns -->
<div class="row">
    <div class="col-lg-4">
        <h2>Money Back Guarantee</h2>
        <img src="{% static 'images/guarantee.jpg' %}" alt="Money Back Guarantee" class="img-responsive pull-left" style="padding: 0 15px 15px 0;"/>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-primary" href="{% url 'moneyback' %}" role="button">Read More &raquo;</a></p>
        <div class="clearfix"></div>
    </div>
    <div class="col-lg-4">
        <h2>Testimonials</h2>
        <blockquote>
            <p><em>"{{ testimonial.text }}"</em></p>
            <footer>{{ testimonial.author }}, <cite title="Source Title">{{ testimonial.source }}</cite></footer>
        </blockquote>
        <p><a class="btn btn-primary" href="{% url 'testimonials' %}" role="button" style="margin-top: 10px;">Read More Testimonials &raquo;</a></p>
    </div>
    <div class="col-lg-4">
        <h2>Rates</h2>
        <h3 class="text-info price-rate">Starting from $20/hour.</h3>
        <p>We will be able to provide you info on a price as soon as we receive your task. Please, submit your problem for exact cost evaluation, which is free of charge, and we'll get back to you asap.</p>
        <p><a class="btn btn-primary" href="{% url 'get_estimate' %}" role="button">Get Free Estimate &raquo;</a></p>
    </div>
</div>
{% endblock %}

{% block javascript %}
    <script src="{% static 'js/countUp.js' %}" type="text/javascript"></script>
    <script type="text/javascript">
        var MATHHELP = MATHHELP || {};
 		MATHHELP = function(bestdose) {
			var _self = bestdose;
			_self.config = {"counter":"{{ counter }}"};
			return _self;
 		}(MATHHELP); 
    </script>
{% endblock %}