{% load pages_tags %}
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{% placeholder "meta_description" section "SEO Options" %}">
    <meta name="description" content="{% placeholder "meta_keywords" section "SEO Options" %}" />
    <meta name="author" content="">

    <title>{% placeholder 'title' %}</title>

    <!-- Paper theme -->
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/paper/bootstrap.min.css" rel="stylesheet" integrity="sha384-awusxf8AUojygHf2+joICySzB780jVvQaVCAt1clU3QsyAitLGul28Qxb2r1e5g+" crossorigin="anonymous">
    <style>
    body {
      margin-top:60px;
    }
    footer {
      margin-top:20px;
      padding-top:20px;
      border-top: 1px solid #eeeeee;
    }

    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Gerbi CMS</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            {% for page in pages_navigation %}
            <li {% ifequal page.id current_page.id %}class="active"{% endifequal %}>
                {% if page.published_children %}
                    <a href="{{ page.get_absolute_url }}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{% show_content page "title" %} <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                    {% for child in page.published_children %}
                        <li><a href="{{ child.get_absolute_url }}">
                        {% show_content page "title" %}
                        </a>
                        </li>
                    {% endfor %}
                    </ul>
                {% else %}
                <a href="{{ page.get_absolute_url }}">
                  {% show_content page "title" %}
                </a>
                {% endif %}
            </li>
            {% endfor %}
            <li>
      <form class="navbar-form navbar-left" role="search" action="/search/">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" name="q" value="{{ request.GET.q }}">
        </div>
      </form>
        </li>
          </ul>
        </div>

      </div>
    </nav>

    <div class="container">

    <div class="page-header" id="banner">
        <div class="row">
          <div class="col-lg-8 col-md-7 col-sm-6">
          {% block header %}
            <h1>{% placeholder 'title' %}</h1>
            <p class="lead">{% placeholder 'lead' %}</p>
            {% page_has_content 'header-image' current_page %}
            <img src="{{ MEDIA_URL }}{% imageplaceholder 'header-image' %}" class="img-responsive" alt="">
            {% end_page_has_content %}
          {% endblock %}
          </div>
          <div class="col-lg-4 col-md-5 col-sm-6">

          </div>
        </div>
    </div>

    <div id="content">
        <div class="row">
          <div class="col-lg-12">
          {% block content %}
            {% placeholder 'content' with RichTextarea %}
          {% endblock %}
          </div>
        </div>
    </div>

    <footer>
        <div class="row">
          <div class="col-lg-12">
            <ul class="list-unstyled">
              <li class="pull-right"><a href="#top">Back to top</a></li>
              <li><a href="https://github.com/batiste/django-page-cms/">GitHub</a></li>
              <li><a href="https://github.com/batiste/django-page-cms/issues">Support</a></li>
              <li>Theme by <a href="http://thomaspark.co" rel="nofollow">Thomas Park</a></li>
            </ul>
          </div>
        </div>
    </footer>

    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
    </script>



</body>

</html>
