<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog - {% block title %}Home{% endblock %}</title>
    {% load staticfiles %}
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
    <!-- for online links -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    {% block extra_css %}
    {% endblock %}
</head>
<body>
        <div class="container">

            {% if request.user.is_active %}
                {% block menu_block %}
                <div class="row" id="top_menu">
                    <div class="container">
                        <div class="row menu_items">
                            <ul class="nav nav-pills pull-left">
                              <li role="presentation" id="home"><a href="/">Home</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                {% endblock %}
            {% endif %}

            {% if messages %}
                {% for message in messages %}
                <div class="alert alert-{% if message.tags %}{{ message.tags }}{% endif %} alert-dismissible my_alert" role="alert">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <strong>{% if message.tags %}{{ message.tags|title }} !{% endif %}</strong> {{ message }}.
                </div>
                {% endfor %}
            {% endif %}
            <div class="row" id="head_style">
                {% block content %}
                {% endblock %}
            </div>

                <footer class="my_footer">
                    <p align="center">Copyrights by &copy; MicroPyramid Pvt. Ltd.</p>
                </footer>


        </div>

        <!-- end div container -->

        <!-- for online links  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        // for pagination

        $('.pagination li a.active').each(function(){
            $(this).css('background', '#337AB7');
            $(this).css('color', '#fff');
        });

       if($('.pagination li:first').find('a span').text() == '<<'){
            $('.pagination li:first').find('a span').text('First');
        }

        if($('.pagination li:nth-child(2)').find('a span').text() == '<'){
            $('.pagination li:nth-child(2)').find('a span').text('Prev');
        }

        if($('.pagination li:last').find('a span').text() == '>>'){
            $('.pagination li:last').find('a span').text('Last');
        }
        if($('.pagination li:nth-last-child(2)').find('a span').text() == '>'){
            $('.pagination li:nth-last-child(2)').find('a span').text('Next');
        }

    </script>

    <script type="text/javascript">
        $(document).ready(function() {
                setTimeout(function() {
                      $('.my_alert').fadeOut(2000, function(){
                    });
                      }, 3000);

        });
        //window.setTimeout(function() {
        //    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        //        $(this).remove();
        //    });
        //}, 5000);
    </script>

    {% block js_script %}

    {% endblock %}

</body>
</html>