{% load staticfiles %}

<html>
    <head>
        <title>{{ page.title }}</title>
        <meta name="Description" content="{{ page.description }}">
        <meta name="Keywords" content="{{ page.keywords }}">
        <link rel="canonical" href="{{ page.live_url }}" />
        <meta property="og:type" content="website"/>
        <meta property="og:title" content="{{ page.title }}" />
        <meta property="og:description" content="{{ page.description }}" />
        <meta property="og:image" content="{% if page.canonical_image %}{{ page.canonical_image.url }}{% endif %}" />
        <meta property="og:url" content="{{ page.live_url }}" />
        <meta property="og:site_name" content="" />
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:site" content="">
        <meta name="twitter:creator" content="">
        <meta name="twitter:url" content="{{ page.live_url }}" />
        <meta name="twitter:title" content="{{ page.title }}" />
        <meta name="twitter:description" content="{% if page.twitter_share_text %}{{ page.twitter_share_text }}{% else %}{{ page.description }}{% endif %}" />
        <meta name="twitter:image" content="{% if page.canonical_image %}{{ page.canonical_image.url }}{% endif %}" />
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    </head>
    <body>
        <h1>{{ page.title }}</h1>
        <h2>{{ page.title }} Navigation</h2>
        <ul>
            {% for section in page_sections %}
            <li>
                <a href="#{{ section.slug }}">{{ section.title_menu }}</a>
            </li>
            {% endfor %}
        </ul>
        <div class="content-wrapper">
            {% for section in page_sections %}
            <div id="{{ section.slug }}">
                <h3 class="section-title">{{ section.title_section }}</h3>
                {{ section.content }}
            </div>
            {% endfor %}
        </div>

</body>
</html>
