<!DOCTYPE html>
{% load static %}
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="description"
          content="{% block description %} {% endblock description %}" />
    <meta name="keywords"
          content="{% block keywords %} {% endblock keywords %}" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="stylesheet" href="{% static 'repapp/css/bootstrap.min.css' %}" />
    <title>RepApp -
      {% block title %}
      {% endblock title %}
    </title>
    <link rel="stylesheet" href="{% static 'repapp/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" href="{% static 'repapp/css/repapp.css' %}" />
    {% block head %}
    {% endblock head %}
  </head>
  <body>
    <div class="container">
      <header class="d-flex flex-wrap justify-content-center py-3">
        <a href="{% url 'index' %}"
           class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
          <img src="{% static 'repapp/images/logo.jpg' %}"
               height="120px"
               width="405px"
               alt="Repair-Café Logo">
        </a>
        <ul class="nav nav-pills align-items-center">
          <li class="nav-item">
            <a href="https://www.repaircafe-hilpoltstein.de/" class="nav-link">Repair-Café</a>
          </li>
          <li class="nav-item">
            <a href="{% url 'index' %}" class="nav-link">Geräteanmeldung</a>
          </li>
          {% if user.is_authenticated %}
            <li class="nav-item">
              <a href="{% url 'logout' %}" class="nav-link">Abmelden</a>
            </li>
          {% endif %}
          <li class="nav-item">
            <a href="{% url 'member' %}" class="nav-link">Mitglieder</a>
          </li>
        </ul>
      </header>
    </div>
    <div class="position-relative overflow-hidden p-3 mx-auto p-md-5 text-center"
         style="background-image: url({% static 'repapp/images/header_background.jpg' %});
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                max-width:1920px;
                margin-bottom:10px">
      <div class="col-md-5 p-lg-5 mx-auto my-5">
        <h1 class="display-4 font-weight-normal"
            style="font-size: 60px;
                   font-weight: 700;
                   text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
                   color: white">
          {% block page_title %}
          {% endblock page_title %}
        </h1>
      </div>
    </div>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12">
          {% if messages %}
            {% for message in messages %}<div class="alert alert-primary" role="alert">{{ message }}</div>{% endfor %}
          {% endif %}
          {% block content %}
          {% endblock content %}
        </div>
      </div>
    </div>
    <div class="container">
      <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
        <p class="col-md-4 mb-0 text-muted">© 2023 Repair-Café Hilpoltstein</p>
        <ul class="nav col-md-4 justify-content-end">
          <li class="nav-item">
            <a href="https://www.repaircafe-hilpoltstein.de/impressum"
               class="nav-link px-2 text-muted">Impressum & Datenschutz</a>
          </li>
        </ul>
      </footer>
    </div>
    <script src="{% static 'repapp/js/jquery-3.6.4.min.js' %}"></script>
    <script src="{% static 'repapp/js/bootstrap.min.js' %}"></script>
  </body>
</html>
