{% load static i18n %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" type="image/png" href="{% static 'cms/images/favicon.ico' %}"/>

    <title>
        {% block title %}
            {% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
        {% endblock %}
        {% block title_suffix %}
            {% with self.get_site.site_name as site_name %}
                {% if site_name %}- {{ site_name }}{% endif %}
            {% endwith %}
        {% endblock %}
    </title>

    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <!-- Material Kit CSS -->
    <link href="{% static 'material-kit/assets/css/material-kit.css' %}" rel="stylesheet"/>
    {% block extra_head %}
    {% endblock extra_head %}

</head>

<body class="{% block body_class %}{% endblock %}">
{% block navbar %}
<nav class="navbar navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg" color-on-scroll="100"
     id="sectionsNav">
    <div class="container">
        <div class="navbar-translate">
            <a class="navbar-brand" href="/">
                <div class="logo-image">
                    {% if settings.cms.SiteSettings.logo.file.url %}
                        <img src="{{ settings.cms.SiteSettings.logo.file.url }}" style="height: 46px;overflow: hidden;margin-top: -6px;" class="img-fluid" alt="Logo">
                    {% else %}
                        <img src="{% static 'cartoview/img/logo.png' %}" style="height: 46px;overflow: hidden;margin-top: -6px;" class="img-fluid" alt="Logo">
                    {% endif %}
                </div>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="sr-only">Toggle navigation</span>
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
                {% if not user.is_authenticated %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'account_login' %}">
                            <i class="material-icons">person</i> {% trans "Login" %}
                        </a>
                    </li>
                {% else %}
                    <li class="dropdown nav-item">
                        <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                            <i class="material-icons">person</i> {{ request.user.username }}
                        </a>
                        <div class="dropdown-menu dropdown-with-icons">
                            <div hidden>
                                <form id="logoutform" class="form-inline ml-auto" method="post"
                                      action="{% url 'account_logout' %}">
                                    {% csrf_token %}
                                    {% if redirect_field_value %}
                                        <input type="hidden" name="{{ redirect_field_name }}"
                                               value="{{ redirect_field_value }}"/>
                                    {% endif %}
                                </form>
                            </div>
                            <a href="#" class="dropdown-item" onclick="document.getElementById('logoutform').submit()">
                                <i class="material-icons">exit_to_app</i> {% trans "Logout" %}
                            </a>
                        </div>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
{% endblock navbar %}
{% block hero_area %}{% endblock hero_area %}
{% block content %}{% endblock content %}
{% block footer %}
    {{ settings.cms.SiteSettings.footer }}
{% endblock footer %}

<!--   Core JS Files   -->
<script src="{% static 'material-kit/assets/js/core/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'material-kit/assets/js/core/popper.min.js' %}" type="text/javascript"></script>
<script src="{% static 'material-kit/assets/js/core/bootstrap-material-design.min.js' %}"
        type="text/javascript"></script>
<script src="{% static 'material-kit/assets/js/plugins/moment.min.js' %}"></script>
<!--	Plugin for the Datepicker, full documentation here: https://github.com/Eonasdan/bootstrap-datetimepicker -->
<script src="{% static 'material-kit/assets/js/plugins/bootstrap-datetimepicker.js' %}" type="text/javascript"></script>
<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="{% static 'material-kit/assets/js/plugins/nouislider.min.js' %}" type="text/javascript"></script>
<!-- Control Center for Material Kit: parallax effects, scripts for the example pages etc -->
<script src="{% static 'material-kit/assets/js/material-kit.js' %}" type="text/javascript"></script>

{% block extra_js %}
{% endblock extra_js %}

</body>

</html>