{% load static %}
{% load composer %}

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Django Composer Examples</title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">

    {% composer_includes %}
  </head>
  <body>
    <div class="fixed">
    <nav data-topbar class="top-bar">
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">Django Composer Examples</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
      </ul>
      <section class="top-bar-section">
        <ul class="right">
          <li><a href="#">User: {{ user.username|default:"Guest"}}</a></li>
        </ul>
      </section>
    </nav>
    </div>
    <div class="row">
      <div class="small-12 columns main-content">
        <!-- Content -->
        <main>
          {% composer_static 'title' %}<h1>You can edit this title</h1>{% endcomposer %}
          <hr>
          <p>{% composer_dynamic 'body' %}This is a dynamic element and has the full Django template language available. The template context must be defined explicitly.{% endcomposer %}
        </main>
        <footer class="text-center">
          <hr>
          {% composer_static 'footer' %}<p>© 2015 No one at all</p>{% endcomposer %}
        </footer>
      </div>
    </div>
    <script>
      $(function() {$(document).foundation(); });
    </script>
  </body>
</html>
