{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="{% static 'main.css' %}">
        <link rel="icon" type="image/png" href="{% static 'favicon.ico' %}">
        <title>
            {% block title %}Urban Exploration{% endblock %}
        </title>
    </head>

    <body>
        <header class="LP-Header">
            <div class="LP-Header__Logo">
                <a class="LP-Link" href="/">
                    <img src="{% static 'logo.png' %}" class="LP-Image" />
                </a>    
            </div>
            <div class="LP-Header__UserInformation">
                <span class="LP-Paragraph">
                    {% if user.is_authenticated %}
                        Hi {{ user.username }}!
                            <a class="LP-Link" href="{% url 'logout' %}"><span class="LP-Link__Text">logout</span></a>
                        {% else %}
                            You are not logged in.
                            <a class="LP-Link" href="{% url 'login' %}"><span class="LP-Link__Text">login</span></a> |
                            <a class="LP-Link" href="{% url 'signup' %}"><span class="LP-Link__Text">signup</span></a>
                        {% endif %}
                </span>
            </div>
        </header>
        <article class="LP-Main">
            <section class="LP-Main__Sidebar">
                <nav class="LP-Menu LP-Menu--sidebar">
                    <ul class="LP-Menu__List">
                        <li class="LP-Menu__Item"><a href="/" class="LP-Link"><span class="LP-Link__Text">Home</span></a></li>
                        <li class="LP-Menu__Item"><a href="" class="LP-Link"><span class="LP-Link__Text">About</span></a></li>
                        <li class="LP-Menu__Item"><a href="" class="LP-Link"><span class="LP-Link__Text">Contact</span></a></li>
                    </ul>
                </nav>
            </section>
            <section class="LP-Main__Content">
                {% block maincontent %}
                {% endblock maincontent %}
            </section>
        </article>
    </body>
</html>