{% block stylesheets %}
<style>
  .sidebar .sidebar-wrapper::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
  }

  .sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #646464;
  }

  .sidebar .sidebar-wrapper::-webkit-scrollbar-track {
    background-color: #333;
    border-radius: 10px;
  }
  .white-content .sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: rgb(180, 178, 178);
    border-radius: 10px;
  }

  .white-content .sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: rgb(111, 110, 110);
  }

  .white-content .sidebar .sidebar-wrapper::-webkit-scrollbar-track {
    background-color: rgb(223, 223, 223);
    border-radius: 10px;
  }

  .sidebar {
    background: none;
    border-radius: 1rem;
  }
  .sidebar .sidebar-wrapper,
  .off-canvas-sidebar .sidebar-wrapper {
    background-color: rgb(40, 39, 39);
    border-radius: 1rem;
  }
  .white-content .sidebar .sidebar-wrapper,
  .off-canvas-sidebar .sidebar-wrapper {
    background-color: rgb(255, 255, 255);
  }
  .white-content .sidebar p,
  .white-content .sidebar i {
    color: #333;
  }
  .white-content .sidebar .nav li.active > a:not([data-toggle="collapse"]) p,
  .white-content .sidebar .nav li.active > a:not([data-toggle="collapse"]) i {
    color: #333;
  }

  .white-content .sidebar .nav li:hover:not(.active) > a p,
  .white-content .sidebar .nav li:hover:not(.active) > a i,
  .white-content .sidebar .nav li:focus:not(.active) > a p,
  .white-content .sidebar .nav li:focus:not(.active) > a i,
  .white-content .off-canvas-sidebar .nav li:hover:not(.active) > a p,
  .white-content .off-canvas-sidebar .nav li:hover:not(.active) > a i,
  .white-content .off-canvas-sidebar .nav li:focus:not(.active) > a p,
  .white-content .off-canvas-sidebar .nav li:focus:not(.active) > a i {
    color: black;
  }

  .sidebar p {
    font-weight: 700;
  }
  .white-content .active {
    color: black;
  }
  .white-content
    .sidebar
    .nav
    li.active
    > a:not([data-toggle="collapse"]):before,
  .white-content
    .off-canvas-sidebar
    .nav
    li.active
    > a:not([data-toggle="collapse"]):before {
    background: black;
  }

  .white-content .sidebar .logo .simple-text,
  .white-content .off-canvas-sidebar .logo .simple-text {
    color: black;
  }
  .sidebar .logo a.logo-mini-dark,
  .off-canvas-sidebar .logo a.logo-mini-dark {
    width: 40px;
    opacity: 1;
    float: left;
    text-align: center;
    margin-left: 10px;
    margin-right: 12px;
  }
  .white-content .sidebar .logo:after {
    background-color: #333;
  }

  .white-content .sidebar-wrapper .bottom-options a {
    background-color: #f4f5f7;
    color: #525f7f;
    border: 1px solid #cccccca1;
  }

  .sidebar-wrapper .bottom-options {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 10px;
  }
  .sidebar-wrapper .bottom-options a {
    text-align: center;
    margin: 5px;
    padding: 5px 8px;
    font-size: 13px;
    background-color: #333;
    border: 1px solid #64646454;
    border-radius: 4px;

  }
  .sidebar-wrapper .bottom-options a i {
    font-weight: bold;
  
  }
  .sidebar-wrapper .bottom-options a .icon-button-power {
    color: red;
  }
  .sidebar-wrapper .bottom-options a .icon-key-25 {
    color: skyblue;
    font-weight: normal;
  }
  .white-content .bottom-options a .icon-key-25{
    color:#353535;
  }
  .sidebar-wrapper .bottom-options a:hover {
    transform: scale(1.05);
    transition: 0.2s;
  }
  html{
    overflow-x: hidden;
  }
  html.nav-open {
    overflow:scroll;
    overflow-x: hidden;
  }
  html::-webkit-scrollbar {
    width: 0px;
  }

  html::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
  }

  html::-webkit-scrollbar-thumb:hover {
    background-color: #646464;
  }

  html::-webkit-scrollbar-track {
    background-color: #333;
    border-radius: 10px;
  }
  @media screen and (max-height:560px) {
    .sidebar-wrapper .bottom-options{
      position:inherit;
      margin-top: 10px;
    }
    
  }

  
</style>
{% endblock %} {% block content %}
<div class="sidebar">
  <div class="sidebar-wrapper">
    <div class="logo">
      <a href="/" class="simple-text logo-mini-dark">
        <img
          class="dark-mode-logo"
          src="{{ ASSETS_ROOT }}/img/nitLogoWhite.png"
          alt="Logo"
        />
      </a>
      <a href="/" class="simple-text logo-mini">
        <img
          class="white-mode-logo"
          src="{{ ASSETS_ROOT }}/img/nitsriLogo.png"
          alt="Logo"
        />
      </a>
      <a href="/" class="simple-text logo-normal"> NIT Srinagar </a>
    </div>
    <ul class="nav">
      {% if user_role == 'admin' or user_role == 'operator' %}
      <li class="{% if 'index' in segment %} active {% endif %}">
        <a href="/">
          <i class="tim-icons icon-chart-pie-36"></i>
          <p>Dashboard</p>
        </a>
      </li>
      {% endif %} {% if user_role == 'admin' or user_role == 'operator' %}
      <li class="{% if 'readRooms' in segment %} active {% endif %}">
        <a href="/read_rooms.html">
          <i class="tim-icons icon-bank"></i>
          <p>Addresses</p>
        </a>
      </li>
      {% endif %} {% if user_role == 'admin' or user_role == 'operator' %}
      <li class="{% if 'readRates' in segment %} active {% endif %}">
        <a href="/read_rates">
          <i class="tim-icons icon-single-copy-04"></i>
          <p>Rates</p>
        </a>
      </li>
      {% endif %} {% if user_role == 'admin' or user_role == 'operator' %}
      <li class="{% if 'types' in segment %} active {% endif %}">
        <a href="/read_types.html">
          <i class="tim-icons icon-settings"></i>
          <p>Types</p>
        </a>
      </li>
      {% endif %} {% if user_role == 'admin' or user_role == 'operator' %}
      <li class="{% if 'readUsers' in segment %} active {% endif %}">
        <a href="/read_users.html">
          <i class="tim-icons icon-single-02"></i>
          <p>Consumers</p>
        </a>
      </li>

      {% endif %} {% if user_role == 'admin' or user_role == 'operator' %}
      <li class="{% if 'readReadings' in segment %} active {% endif %}">
        <a href="/read_readings.html">
          <i class="tim-icons icon-notes"></i>
          <p>Readings</p>
        </a>
      </li>
      {% endif %} {% if user_role == 'admin' or user_role == 'operator' %}
      <li class="{% if 'readBills' in segment %} active {% endif %}">
        <a href="/read_bills.html">
          <i class="tim-icons icon-coins"></i>
          <p>Bills</p>
        </a>
      </li>
      {% endif %}
    </ul>

    <div class="bottom-options">
      <a href="{% url 'change_password.html'%}">
        <i class="tim-icons icon-key-25"></i>
        <p>Change Password</p></a
      >

      <a href="{% url 'logoutuser' %}">
        <i class="tim-icons icon-button-power"></i>
        <p>Logout</p>
      </a>
    </div>
  </div>
</div>
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
  document.addEventListener("DOMContentLoaded", function () {

    const whiteContentImg = document.querySelector(".logo-mini");
    const darkContentImg = document.querySelector(".logo-mini-dark");
    const body = document.getElementsByTagName("body")[0];

    function toggleTheme() {
      if (body.classList.contains("white-content")) {
        whiteContentImg.style.display = "inline";
        darkContentImg.style.display = "none";
      } else {
        whiteContentImg.style.display = "none";
        darkContentImg.style.display = "inline";
      }
    }

    toggleTheme();

    const observer = new MutationObserver(toggleTheme);
    const config = { attributes: true, attributeFilter: ["class"] };
    observer.observe(body, config);
  });
</script>

{% endblock javascripts %}