<!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.6/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>