{{set . "title" "Search"}}
{{template "header.html" .}}

<h1>Search Hotels</h1>

<p>
  <input type="text" id="search" size="30">
  <input type="submit" id="submit" value="Find Hotels">

  <br>

  Maximum results:
  <select id="size">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="20">20</option>
  </select>
</p>

<div id="result">
</div>

<script type="text/javascript" charset="utf-8">

  // Rebuild state
  $('#search').val(sessvars.search)
  if(sessvars.page == undefined) {
      sessvars.page = 1
  }
  if(sessvars.size == undefined) {
      sessvars.size = 10
  }
  $('#size option[value='+sessvars.size+']').attr('selected', 'true')

  // Search function
  var search = function() {
      sessvars.search = $('#search').val()
      sessvars.size = $('#size').val()
      $.get("/hotels/list", {
        "search": sessvars.search,
        "size": sessvars.size,
        "page": sessvars.page
      }, function(data) {
          $('#result').html(data)
          $('#content').css('visibility', 'visible')
      })
  }

  // Events handler
  $('#submit').click(function() {
      sessvars.page = 1
      search()
  })
  $('#search').keyup(function() {
      sessvars.page = 1
      search()
  })
  $('#nextPage').live('click', function(e) {
      sessvars.page = $(this).attr('href')
      e.preventDefault()
      search()
  })

  // Init
  if(sessvars.search != undefined) {
      $('#content').css('visibility', 'hidden')
      search()
  }

</script>

<h1>Current Hotel Bookings</h1>

{{if not .bookings}}
<p>
  No Bookings Found
</p>
{{else}}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>City, State</th>
      <th>Check in</th>
      <th>Check out</th>
      <th>Confirmation number</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {{range .bookings}}
    <tr>
      <td>{{.Hotel.Name}}</td>
      <td>{{.Hotel.Address}}</td>
      <td>{{.Hotel.City}}, {{.Hotel.State}}, {{.Hotel.Country}}</td>
      <td>{{.CheckInDate.Format "2006-01-02"}}</td>
      <td>{{.CheckOutDate.Format "2006-01-02"}}</td>
      <td>{{raw .BookingId}}</td> <!-- not caught because it is inside a range and no parsing is done -->
      <td>
        <form id="d{{.BookingId}}" method="POST" action="/bookings/{{.BookingId}}/cancel">
          <a href="javascript:document.getElementById('d{{.BookingId}}').submit();">Cancel</a>
        </form>
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
{{end}}

{{template "footer.html" .}}
