{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
  <link href="{% static 'css/base.css' %}" rel="stylesheet">
</head>
<body>
  <div id="header">
    <span class="logo">Bookmarks</span>
    {% if request.user.is_authenticated %}
    <ul class="menu">
      <li {% if section == "dashboard" %}class="selected"{% endif %}>
        <a href="{% url "dashboard" %}">Panel główny</a>
      </li>
      <li {% if section == "images" %}class="selected"{% endif %}>
        <a href="#">Zdjęcia</a>
      </li>
      <li {% if section == "people" %}class="selected"{% endif %}>
        <a href="#">Osoby</a>
      </li>
    </ul>
  {% endif %}
  <span class="user">
    {% if request.user.is_authenticated %}
      Witaj {{ request.user.first_name|default:request.user.username }}, 
      <a href="{% url "logout" %}">Wyloguj</a>
    {% else %}
      <a href="{% url "login" %}">Zaloguj </a>
    {% endif %}
  </span>

  </div>
  {% if messages %}
  <ul class="messages">
    {% for message in messages %}
      <li class="{{ message.tags }}">
        {{ message|safe }}
        <a href="#" class="close">x</a>
      </li>
    {% endfor %}
  </ul>
{% endif %}

  <div id="content">
    {% block content %}
    {% endblock %}
  </div>
  <script src="//cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
  <script>
    const csrftoken = Cookies.get('csrftoken');
    document.addEventListener('DOMContentLoaded', (event) => {
      // DOM loaded
      {% block domready %}
      {% endblock %}
    })
  </script>
</body>
</html>
