<!DOCTYPE html>
<html>

<head>
  <title>{{ .Title }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"> {{ template "header" }}

  <link rel="stylesheet" type="text/css" href="/static/css/view.css">
<style>
.yue ul {
    padding: 0;
    list-style-type: none;
}
</style>



</head>

<body>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">{{ .Title }}</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/{{ .Title }}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</a></li>
          <li><a href="/{{ .Title }}/view"><span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span> View</a></li>
          <li  class="active"><a href="/{{ .Title }}/list"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> List</a></li>
          <li><a href="/Help/view"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Help</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <div class="yue">
    <ul>
      {{ range $index, $element := .ListItems }}
    <a href="#" id="{{ $index }}" class="deletable">{{ $element }}</a>
      {{ end }}
    </ul>
  </div>

  <script>
    $('.deletable').click(function(event) {
      event.preventDefault();
      var lineNum = $(this).attr('id')
      var href = $(this).attr('href')
      if (href == "#") {
        console.log(lineNum)
        $.ajax({
          url: "/listitem" + '?' + $.param({
            "lineNum": lineNum,
            "title": "{{ .Title }}"
          }),
          type: 'DELETE',
          success: function() {
            window.location.reload(true);
          }
        });
      }

    });

    $(document).keydown(function(e){
        if( e.which === 69 && e.ctrlKey && e.shiftKey ){
           console.log('control + shift + e');
           window.location = "/{{ .Title }}";
        }
    });
    $(document).keydown(function(e){
      if( e.which === 90 && e.ctrlKey && e.shiftKey ){
         console.log('control + shift + z');
         window.location = "/{{ .Title }}/view";
      }
    });

  </script>

</body>

</html>
