<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Library Management{% endblock %}</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    {% block extra_css %}{% endblock %}
    <style>
        .navbar {
            background-color: #343a40;
        }
        .navbar-brand, .nav-link {
            color: #ffffff !important;
        }
        .nav-link:hover {
            color: #d4d4d4 !important;
        }
    </style>


</head>
<body>
    <nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="{% url 'home_page' %}">Library Management</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'book-list' %}">Books</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'author-list' %}">Authors</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'magazine-list' %}">Magazines</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
            </li>
        </ul>
    </div>
</nav>
    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>
    {% block extra_js %}{% endblock %}
</body>
</html>
