<!--Navigation bar-->
<div class="navbar navbar-dark navbar-expand-md fixed-top">
  <div class="container" id="container-m">
      <a class="brand nav-item" href="./homepage" id="brand-wow">EnvoScholar v3.0</a>
  </div>

  
  <button style="position: fixed;
  right: 80px; /* Padding from the right side */ 
  border-left-color: hsla(0, 0%, 100%, .1); border-top-width: 0px; 
  border-top-width: 0px; border-left-width: 2px; 
  border-right-width: 2px; border-right-color: hsla(0, 0%, 100%, .1);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-width: 0px;
  background-color: transparent;" class="navbar-toggler" (click)="isCollapsedS = !isCollapsedS; isCollapsedM = true;" [attr.aria-expanded]="!isCollapsedS" aria-controls="collapseSearch">
      <span class="sr-only">Toggle navigation</span>
      <i class="fa fa-search fa-2x fa-flip-horizontal" style="color: #fff;"></i>
  </button>

  <button style="position: fixed;
  right: 20px; /* Padding from the right side */" class="navbar-toggler" (click)="isCollapsedM = !isCollapsedM; isCollapsedS = true;" [attr.aria-expanded]="!isCollapsedM" aria-controls="collapseMobile">
      <span class="sr-only">Toggle navigation</span>
      <span class="navbar-toggler-icon" style="color:rgb(128,128,128);" ></span>
    </button>
      

  <div class="collapse navbar-collapse" id="collapseMobile" [collapse]="isCollapsedM">
    <ul class="nav flex-grow-1" style="justify-content: space-between;">
      <li role="presentation">
          <a class="brand nav-item" href="./editProfile">Edit Profile</a>
      </li>   
      
      <li role="presentation">
          <a class="brand nav-item" href="./savedarticles">Saved Articles</a>
      </li>  
      <li role="presentation">
          <a class="brand nav-item" href="./history">History</a>
      </li>  
      <li role="presentation" *ngIf="userDetails.accountType == 'developer'">
          <a class="brand nav-item" href="./developerstats">Developer Stats</a>
      </li> 
    </ul>

    <div class="dropdown-divider" style="border-color: hsla(0, 0%, 100%, .1); border-width: 3px;"></div>

    <ul class="nav flex-grow-1" style="justify-content: space-between;" *ngIf="userDetails.accountType == 'developer'">
        <li role="presentation" style="padding-top: 10px; padding-bottom: 10px;">
          <a class="brand nav-item" href="./queryinformation">Query Information</a>
        </li>
    
        <li role="presentation" style="padding-top: 10px; padding-bottom: 10px;">
          <a class="brand nav-item" href="./queryhistory">Query History</a>
        </li>

        <li role="presentation" style="padding-top: 10px; padding-bottom: 10px;">
          <a class="brand nav-item" href="./articleinfo">Article Information</a>
        </li>
      </ul>

      <div class="dropdown-divider" style="border-color: hsla(0, 0%, 100%, .1); border-width: 3px;"></div>

      <ul class="nav flex-grow-1" style="justify-content: space-between;">
          <li role="presentation" style="padding-top: 10px; padding-bottom: 10px;">
              <a class="brand nav-item" href="../src/app/ontology/ontology.html">Ontology</a>
            </li>
      
            <!-- <li role="presentation">
              <a class="active" routerLink="/ontology" (click)="navigate_ontology()">OntologyComponent</a>
            </li> -->
      
            <li role="presentation" style="padding-top: 10px; padding-bottom: 10px;">
              <a class="brand nav-item" href="./login" (click)="onLogout()">Logout</a>
            </li>
  
        </ul>
  </div>

  <div class="collapse navbar-collapse" id="collapseSearch" [collapse]="isCollapsedS">
    <div class="dropdown-divider" style="border-color: hsla(0, 0%, 100%, .1); border-width: 3px;"></div>

    <form
      #saveSearchForm="ngForm"
      (ngSubmit)="openSearchPage(saveSearchForm)"
      class="query-search-form"
    >
      <ul class="nav flex-grow-1">
      <input
        ngModel
        name="search"
        #search="ngModel"
        [(ngModel)]="userService.selectedUser.search"
        class="form-control"
        type="search"
        placeholder="Search Articles"
        id="search-field"
        style="background-color: #fff; width:150px; max-height: 40px; font-size: 0.8rem;"
        list="staticUserIds"
      />
      <div class="col offset-0 align-self-center">
        <input
          type="submit"
          value="Search"
          id="search"
          class="searchbutton"
          role="button"
          style="color:#B6862C;height: 40px; width: 70px; border-radius: 30px; font-size: 0.8rem;"
        />
      </div>
      </ul>
    </form>
    <div class="dropdown-divider" style="border-color: hsla(0, 0%, 100%, .1); border-width: 3px; padding-bottom: 10px;"></div>

  </div>
  
  <div class="container" id="container-d">
    <a class="brand nav-item" href="./homepage">EnvoScholar v3.0</a>

    <form
    #saveSearchForm="ngForm"
    (ngSubmit)="openSearchPage(saveSearchForm)"
    class="query-search-form" 
  >
    <ul class="nav flex-grow-1" style="justify-content: center; padding-left: 50px;">
    <input
      ngModel
      name="search"
      #search="ngModel"
      [(ngModel)]="userService.selectedUser.search"
      class="form-control"
      type="search"
      placeholder="Search Articles"
      id="search-field"
      style="background-color: #fff; width:250px; max-height: 40px; font-size: 0.8rem;"
      list="staticUserIds"
    />
    <div class="col offset-0 align-self-center">
      <input
        type="submit"
        value="Search"
        id="search"
        class="searchbutton"
        role="button"
        style="color:#B6862C;height: 40px; width: 70px; border-radius: 30px; font-size: 0.8rem;"
      />
    </div>
    </ul>
    </form>
      
    <button class="navbar-toggler" (click)="isCollapsedD = !isCollapsedD;" [attr.aria-expanded]="!isCollapsedD" aria-controls="collapseDesktop">
      <span class="sr-only">Toggle navigation</span>
      <span class="navbar-toggler-icon" style="color:rgb(128,128,128);" ></span>
    </button>

    <div class="collapse navbar-collapse" id="collapseDesktop" [collapse]="isCollapsedD">
      <ul class="nav flex-grow-1 justify-content-end">
        <li role="presentation">
          <a class="brand nav-item" href="../src/app/ontology/ontology.html">Ontology</a>
        </li>

        <!-- <li role="presentation">
          <a class="active" routerLink="/ontology" (click)="navigate_ontology()">OntologyComponent</a>
        </li> -->

        <li role="presentation">
          <a class="brand nav-item" href="./login" (click)="onLogout()">Logout</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!--end of Navigation bar-->
