<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}">


    {% if title %}
      <title>Saggezza - {{title}}</title>
    {% else %}
      <title>Saggezza{{title}}</title>
    {% endif %}
  
  </head>
  <body>
      
      
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
      <div>
        <div class="row">
            <div class="col">
                <section id="section1"></section>
                <div id="alert" class="col-sm-6">
                    {% with messages = get_flashed_messages(with_categories=true) %}
                      {% if messages %}
                        {% for category, message in messages %}
                          <div class="alert alert-{{ category }}">
                            {{ message }}
                          </div>
                        {% endfor %}
                      {% endif %}
                    {% endwith %}
                  </div>
            </div>
          <div class="col col-lg-2">
            
            <div class="nav-side-menu">
                
                <div class="brand">
                  <img src="{{url_for('static', filename='logo/Sagezzalogo.png')}}"/></div>
                  <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>


              
                    <div class="menu-list">
              
                        <ul id="menu-content" class="menu-content collapse out">
                          
                            <li  data-toggle="collapse" data-target="#home" class="collapsed">
                                <a href="{{ url_for('guideline') }}"><i class="fas fa-home"></i> Guideline </a>
                            </li>
                            
                            <li data-toggle="collapse" data-target="#expenses" class="collapsed">
                              <a href="{{ url_for('expenses') }}"><i class="fas fa-file-invoice"></i> Expenses </a>
                            </li>  

                            {% if current_user.role !='User' %}
                              
                                <li data-toggle="collapse" data-target="#reports" class="collapsed">
                                  <a href="{{ url_for('reports') }}"><i class="fas fa-chart-bar"></i> Reports </a>
                                </li>
                            
                              {% if current_user.role == 'Admin' %}
                                <li data-toggle="collapse" data-target="#reports" class="collapsed">
                                    <a href="{{ url_for('users') }}"><i class="fas fa-users"></i> Users </a>
                                </li>
                              {% endif %}
                            {% endif %}

                            <li  data-toggle="collapse" data-target="#products" class="collapsed">
                                <a><i class="fas fa-user-circle"></i> Account </a>
                                
                            </li>
                              <ul class="sub-menu collapse" id="products">
                                  <li><a href="{{ url_for('profile') }}"><i class="fa fa-user fa-lg"></i> Profile </a></li>
                                  <li><a href="{{ url_for('logout') }}"><i class="fas  fa-sign-out-alt"></i> Logout </a></li>
                              </ul>
                        </ul>
                </div>
              </div>
          </div>
          <div class="col-sm-12 col-md-10">
              
            
              {% block body %}

              {% endblock %}
          </div>
        </div>
      </div>

      


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>