<template>
    <div class="hs-navbar">
      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#"> Store Support Portal</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <div class="navbar-form navbar-left">
              <input type="text" v-model="store" class="form-control" placeholder="Store/DC Search" id='store-search' @keyup.enter="store_search">
            </div>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                <b id="login-title">Login</b> <span class="caret"></span>
              </a>
              <ul id="login-dp" class="dropdown-menu">
                <li>
                  <div class="text-center">TeamNet Credentials</div>
                  <div class="col-md-12">
                    <div class="form-group">
                      <label class="sr-only" for="user">Teamnet User ID</label>
                      <input type="email" class="form-control" id="user" placeholder="User ID" @keyup.enter="login">
                    </div>
                    <div class="form-group">
                      <label class="sr-only" for="pword">Teamnet Password</label>
                      <input type="password" class="form-control" id="pword" placeholder="Password" @keyup.enter="login">
                    </div>
                    <div class="form-group">
                      <button class="btn btn-primary btn-block" @click="login">Sign in</button>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav nav-pills">
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown"> Issue Map <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li class="active"><a data-map-type="all" href="#map">All Issues <span class='badge pull-right'>0</span></a></li>
                  <li><a data-map-type="as400" href="#map">AS400 Down <span class='badge pull-right'>0</span></a></li>
                  <li><a data-map-type="linux" href="#map">Linux Down <span class='badge pull-right'>0</span></a></li>
                  <li><a data-map-type="comm" href="#map">Comm Issues <span class='badge pull-right'>0</span></a></li>
                  <li><a data-map-type="sna" href="#map">SNA Issues <span class='badge pull-right'>0</span></a></li>
                  <li role='separator' class='divider'></li>
                  <li><a data-map-type="cdk" href="#map">CDK Sites</a></li>
                  <li><a data-map-type="dc/routers" href="#map">DC/Routers</a></li>
                  <li><a data-map-type="new" href="#map">News</a></li>
                </ul>
              </li>
              <li><a data-toggle="pill" href="#comm-monitor">Comm. Monitor</a></li>
              <li><a data-toggle="pill" href="#request">Requests <span class='badge' id='number_requests'>0</span></a></li>
              <li class="dropdown email-counts">
                <a class="dropdown-toggle" data-toggle="dropdown"> Email Counts <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li data-provider='accel'><a href="#"> Accel <span class='badge pull-right'>0</span></a></li>
                  <li data-provider='att'><a href="#"> ATT <span class='badge pull-right'>0</span></a></li>
                  <li data-provider='cybera'><a href="#"> Cybera <span class='badge pull-right'>0</span></a></li>
                  <li data-provider='mettel'><a href="#"> MetTel <span class='badge pull-right'>0</span></a></li>
                  <li data-provider='windstream'><a href="#"> Windstream <span class='badge pull-right'>0</span></a></li>
                  <li data-provider=vonage><a href="#"> Vonage <span class='badge pull-right'>0</span></a></li>
                  <li role='separator' class='divider'></li>
                  <li data-provider='cog'><a href="#"> COG Support <span class='badge pull-right'>0</span></a></li>
                  <li data-provider='comm'><a href="#"> Comm Notification <span class='badge pull-right'>0</span></a></li>
                  <li data-provider='online'><a href="#"> Online Store <span class='badge pull-right'>0</span></a></li>
                  <li data-provider='mplus'><a href="#"> MPlus <span class='badge pull-right'>0</span></a></li>
                  <li data-provider='xmit'><a href="#"> Xmit Audit <span class='badge pull-right'>0</span></a></li>
                </ul>
              </li>
              <li><a data-toggle='pill' href='#additional_issues'>Additional Issues</a></li>
              <li><a data-toggle="pill" href="#reports"> Reports </a></li>
              <li><a target='_blank' href="http://supporter/">The Supporter</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <ul>
      <li v-for="issue in issues">{{issue.store}}</li>
    </ul>
</template>

<script>
    import axios from 'axios';
    export default{
        name: "hs-navbar",
        data(){
            return {
              store: '',
              issues: [],
              errors: [],
            }
        },
        methods: {
            store_search: function () {
                alert(this.store)
            },
            login: function(){
                alert("Tried to login but no backend")
            }
        },
        mounted(){
          console.log(issues)
          axios.get('http://localhost:8000/api/issues/comm_issues/?format=json').then(response => issues = response.data)
          console.log(issues)
        }
    }
</script>

<style scoped>
  @media (max-width: 1100px) {
    .navbar-header {
      float: left;
    }
    .navbar-left,.navbar-right {
      float: left !important;
      display:block;
    }
    .navbar-toggle {
      display: block;
    }
    .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
      display: none!important;
    }
    .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
    }
    .navbar-nav>li {
      float: none;
    }
    .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .collapse.in{
      display:block !important;
    }
  }
</style>