{% load static %}
<style>
  #idl_logo {transform: scale(1.5);}

  @media only screen and (max-width: 992px) {
    .mobile__view h3 {font-size: 16px; padding-top:10px;}
}

@media only screen and (max-width: 463px) {
    .mobile__view h3 {font-size: 11px; padding-top:10px;}
}
</style>
<nav class="my-0 py-1" id="idl_logo_name" style="background-color: rgba(255, 255, 255, 0.9);color:#141850;">
  <div class="container-fluid">
    
    
    <div class="my-0 p-0 mobile__view" style="display:flex; flex-direction:row;">
        <div class="">
            <img class="my-0 ml-0 mr-2 p-0" src="{% static 'assets/img/idllogo.png' %}" alt="Logo" width="60px" id="idl_logo">
        </div>
        <div class="m-0 ml-2 pt-2 pb-0 px-3">
            <h3 class="mb-0 mt-1">INTERCONTINENTAL DISTILLERS LIMITED</h3>
            <!--h5 class="my-0">QUALITY ASSURANCE DEPARTMENT</h5-->
        </div>
    </div>
    
  </div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">IQ-PROCESS</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              DASHBOARD
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="/line/analysis/">LINE ANALYSIS</a></li>
              <li><a  class="dropdown-item" href="/sachet/analysis/">SACHET ANALYSIS</a></li>
              <li><a  class="dropdown-item" href="/line/inspection/">LINE INSPECTION</a></li>
              <li><a  class="dropdown-item" href="/sachet/inspection/">SACHET INSPECTION</a></li>
            </ul>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              SCAN
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="/scan/scan_device/">SCANNER</a></li>
              <li><a  class="dropdown-item" href="/scan/scan_cam/">CAMERA</a></li>
              <li><a  class="dropdown-item" href="/scan/scan_cam_low/">CAMERA (Low Res.)</a></li>
            </ul>
          </li>

          <li class="nav-item"><a class="nav-link" href="/dispute/">DISPUTES</a></li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              REPORT
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="/report/report_download/">FORMS TO EXCEL</a></li>
              <li><a class="dropdown-item" href="/report/hourly_report_download/">HOURLY ANALYSIS TO EXCEL</a></li>
              <li><a class="dropdown-item" href="/report/line_opqr/">LINE OPQR</a></li>
            </ul>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              UTILITIES
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="/utils/products/">PRODUCTS</a></li>
              <li><a class="dropdown-item" href="/utils/lines/">LINES</a></li>
              <li><a class="dropdown-item" href="/utils/sachet/">SACHET</a></li>
              <li><a class="dropdown-item" href="/utils/defect/list/">SACHET DEFECT</a></li>
            </ul>
          </li>


          {% if user.is_authenticated %}
                <li class="nav-item">
                    <a href="/profile" class="nav-link"><i class="bi bi-person"></i>&nbsp;{% if profile %}{{ profile.user.first_name|upper }}{% else %}{{user.username|upper}}{% endif %}</a>
                </li>
                <li class="nav-item">
                    <span><a href="/logout" class="nav-link"><sup style="color: white;">Logout</sup></a></span>
                </li>
                <li class="nav-item" id="chat_box_count"></li>
            {% else %}
                <li class="nav-item">
                    <a href="/login" class="nav-link">Login</a>
                </li>
            {% endif %}
        </ul>
        <form class="d-flex" role="search">
          <!--input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button-->
        </form>
      </div>
    </div>
  </nav>