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

<head>
    {% load static %}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Library Web</title>
    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/style.min.css" rel="stylesheet" />
    <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
    <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
    
</head>

<body class="sb-nav-fixed">
    <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
        <!-- Navbar Brand-->
        <a class="navbar-brand ps-3" href="{% url 'homepage' %}">Library Web</a>
        <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
        <!-- Navbar Search-->
        <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
        </form>
        <ul class=" navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
            <li class="nav-item dropdown">
                {% if request.user.is_authenticated %}
                
                <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i>{{request.user.username}}</a>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item">{{request.user.username}}</a></li>
                    <li>
                        {% if request.user.is_member %}
                            <a class="dropdown-item" href="{% url 'update-usermember' %}">Edit</a>
                            {% else %}
                            <a class="dropdown-item" href="{% url 'update-userlibrarian' %}">Edit</a>
                    </li>
                    {% endif %}
                    <li><a class="dropdown-item" href="{% url 'update-password' %}">Change Password</a></li>
                    <li><a class="dropdown-item" href="{% url 'logout' %}">Logout</a></li>
                </ul>
                {% endif %}
            </li>
        </ul>
    </nav>

    <div id="layoutSidenav">
        <div id="layoutSidenav_nav">
            <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
                <div class="sb-sidenav-menu">
                    <div class="nav">
                        {% if request.user.is_authenticated %}
                        <a class="nav-link" href="{% url 'dashboard' %}" aria-expanded="false">
                            <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                            dashboard
                        </a>
                        <a class="nav-link" href="{% url 'book-list' %}" aria-expanded="false">
                            <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                            Book
                        </a>
                        <a class="nav-link" href="{% url 'category_list' %}" aria-expanded="false">
                            <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                            Category
                        </a>
                        {% if request.user.is_librarian %}
                            <a class="nav-link" href="{% url 'member_list' %}" aria-expanded="false">
                                <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                                Member
                            </a>
                            <a class="nav-link" href="{% url 'book_loan_list' %}" aria-expanded="false">
                                <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                                Book Loan
                            </a>
                            <a class="nav-link" href="{% url 'librarian_list' %}" aria-expanded="false">
                                <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                                Librarian
                            </a>
                            <a class="nav-link" href="{% url 'near_outstanding_loans' %}" aria-expanded="false">
                                <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                                Outstanding Book Loan
                            </a>
                            <a class="nav-link" href="{% url 'overdue_loans' %}" aria-expanded="false">
                                <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                                Overdue Book Loan
                            </a>
                        {% endif%}
                        
                        {%else %}
                        <a class="nav-link" href="{% url 'login' %}" aria-expanded="false">
                            <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                            Log in
                        </a>
                        <a class="nav-link" href="{% url 'member_registration' %}" aria-expanded="false">
                            <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                            Register Member
                        </a>
                        <a class="nav-link" href="{% url 'librarian_registration' %}" aria-expanded="false">
                            <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                            Register Librarian
                        </a>
                        {% endif %}
                    </div>
                </div>
            </nav>
        </div>

        <div id="layoutSidenav_content">
            
            {% block content%}
            {% endblock content%}
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    <script src="{% static 'assets/demo/chart-area-demo.js' %}"></script>
    <script src="{% static 'assets/demo/chart-bar-demo.js' %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>
    <script src="{% static 'js/datatables-simple-demo.js' %}"></script>



</body>
</html>