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

<head>
  <title>{% block title %}roo.me{% endblock %}</title>
  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- FontAwesome -->
  <script src="https://kit.fontawesome.com/297bbe7878.js" crossorigin="anonymous"></script>

  <!-- Custom styles for this template -->
  <link href="../../static/css/navbar.css" rel="stylesheet">

  {% block style %}
  {% endblock %}
  
</head>

<!--BODY-->
<body>

  <!--NAV BAR-->
  <nav class="navbar fixed-top navbar-expand-md navbar-light" style="background-color: #25d798;">
    <div class="container-fluid">

      <a class="navbar-brand" href="/">
        <img src="../../static/img/navbar-logo.png" alt="roo.me" id="logo">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        {% block navbar %}
        <a href="/logout" class="btn align-middle btn-primary ml-auto mr-3 order-lg-last" type="button">Log out</a>
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/contacts">Connections</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/search">Search</a>
          </li>
          {% if request.user.is_authenticated %}
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                aria-expanded="false">
                Account
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="{% url 'user-details' user_id=request.user.id %}">My Profile</a></li>
                <li><a class="dropdown-item" href="{% url 'update-user' %}">Update Profile</a></li>
                <li><a class="dropdown-item" href="{% url 'change-password' %}">Change Password</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                {% if request.user.is_seeker %}
                <li><a class="dropdown-item" href="{% url 'seeker-update' %}">Update Search Preferences </a></li>
                {% elif request.user.is_owner %}
                <li><a class="dropdown-item" href="{% url 'apartment-details' apartment_id=request.user.id %}">My
                    Apartment</a></li>
                <li><a class="dropdown-item" href="{% url 'apartment-update' %}">Update Apartment Details</a></li>
                {% endif %}
              </ul>
            </li>
          {% endif %}
        </ul>
        {% endblock %}
      </div>
    </div>
  </nav>

  <!--MEASSAGE BAR-->  
  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{message.tags}} alert-dismissible fade show" role="alert">
        {{message}}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  {% endif %}

  <!--CONTENT-->
  <main class="row main-body">
    <div class="col-md-2">
      {% block sidebar %}
        <div class="card shadow p-3 mb-5 bg-white rounded">
          <img class="card-img-top" src="{{ request.user.image_url }}" alt="Profile picture" id="profile_picture">
            <div class="card-body">
              <h5 class="card-title username">{{request.user.first_name}} {{request.user.last_name}}</h5>
              {%if request.user.is_seeker == True %}<i><h5 class="card-title type">Seeker</h5></i>
              {% elif request.user.is_owner == True%} <i></i><h5 class="card-title type">Owner</h5>
              {% else%} <h5 class="card-title type">Admin</h5>{% endif %}
              <ul class="list-group list-group-flush recent-connections">
              </ul>
            </div>
        </div>
      {% endblock %}
    </div>
    <div class="col-md-9">
      {% block content %}
      {% endblock %}
    </div>
  </main>
  <!--FOOTER-->
  <footer class="container">
    {% block footer %}
    <p class="float-right"><a href="#">Back to top</a></p>
    {% endblock %}
  </footer>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
    crossorigin="anonymous"></script>
</body>

</html>