<!DOCTYPE html>
{% load static %}
<html lang="en">
  <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 %}
        Bootstrap
      {% endblock title %}
    </title>
    <link rel="stylesheet" href="{% static 'repapp/css/bootstrap.min.css' %}" />
    {% block head %}
    {% endblock head %}
  </head>
  <body>
    <div class="container">
      <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
        <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="50px"
               width="168px"
               alt="Repair-Café Logo">
        </a>
        <ul class="nav nav-pills">
          <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">Anmeldung</a>
          </li>
          {% if user.is_authenticated %}
            <li class="nav-item">
              <a href="{% url 'logout' %}" class="nav-link">Abmelden</a>
            </li>
          {% else %}
            <li class="nav-item">
              <a href="{% url 'login' %}" class="nav-link">Gast Anmeldung</a>
            </li>
            <li class="nav-item">
              <a href="{% url 'member' %}" class="nav-link">Mitglieder</a>
            </li>
          {% endif %}
        </ul>
      </header>
    </div>
    <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center"
         style="background-image: url({% static 'repapp/images/header_background.jpg' %});
                background-repeat: no-repeat;
                background-size: auto 100%;
                background-position: center">
      <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">Anmeldung</h1>
      </div>
    </div>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-8">
          {% if messages %}
            {% for message in messages %}<div class="alert alert-primary" role="alert">{{ message }}</div>{% endfor %}
          {% endif %}
          {% block content %}
          {% endblock content %}
        </div>
      </div>
    </div>
    <script src="{% static 'repapp/js/jquery-3.6.4.min.js' %}"></script>
    <script src="{% static 'repapp/js/bootstrap.min.js' %}"></script>
  </body>
</html>
