<% datasource = ENV['SERVICE_DATASOURCE'] || 'consul_services.json'
   # Time to wait before reloading configuration again in seconds (0 = never)
   refresh = ENV['REFRESH'] || '3600' %><%= render_file('common/header.html.erb', title: 'Services') %>
    <div class="main">
      <div class="row mx-0">
        <div id="filter-menu" class="col-4 col-m-3 px-4 pt-4">
          <div class="form-group">
            <div class="form-check">
              <label class="form-check-label">
                <input id="showTagsInList" type="checkbox" title="show tags" onclick="consulService.showTags(this.checked)" class="form-check-input" />
                Show Tags
              </label>
            </div>
            <div class="input-group">
            <input id="service-filter" type="text" placeholder="filter services by name or tags" class="form-control" />
              <div class="input-group-append">
                <span class="input-group-text" id="service-counter"></span>
              </div>
            </div>
          </div>
          <div id="service-wrapper" >
            <ul id="service-list" class="list-group">
            </ul>
          </div>
        </div>
        <div class="col-8 col-m-9">
          <h2 class="text-center" id="service-title"></h2>
          <div class="row mb-2">
            <div class="input-group float-left col-12">
              <input id="instance-filter" type="text" placeholder="filter nodes by name or tags" class="form-control" />
            </div>
          </div>
          <div class="progress">
            <div id="service-progress-passing" status="passing" onclick="consulService.onClickFilter(this)" class="progress-status progress-bar bg-success" role="progressbar" style="width: 100%">passing</div>
            <div id="service-progress-warning" status="warning" onclick="consulService.onClickFilter(this)" class="progress-status progress-bar bg-warning" role="progressbar" style="width: 0%">warning</div>
            <div id="service-progress-critical" status="critical" onclick="consulService.onClickFilter(this)" class="progress-status progress-bar bg-danger" role="progressbar" style="width: 0%">critical</div>
          </div>
          <div id="instances-wrapper">
            <div id="instances-list" class="list-group"></div>
          </div>
        </div>
      </div>
    </div>
  <!-- Optional JavaScript -->
  <!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="js/utils.js"></script>
  <script src="js/service.js"></script>
  <script type="text/javascript">
    consulService = new ConsulService('<%= datasource %>','<%= refresh %>');
  </script>
  </body>
</html>