{% extends "base.html" %}
{% load static %}

{% block content %}

  <div id="index-banner">
    <div class="section no-pad-bot">
      <div class="container">
        <form action="" method="POST">
        {% csrf_token %}
        <div class="row center">
          <h5 class="header col s12 light">Find your travel accommodations</h5>
        <div class="input-field col l6 s12">
          <i class="material-icons prefix">hotel</i>
          <input type="text" name="location" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Location</label>
        </div>
        <div class="input-field col l3 s6">
          <i class="material-icons prefix">date_range</i>
          <input type="text" name="startdate" class="datepicker">
        </div>
        <div class="input-field col l3 s6">
          <i class="material-icons prefix">date_range</i>
          <input type="text" name="enddate" class="datepicker">
        </div>

        </div>
        <div class="row center">
          <button class="btn waves-effect waves-light" style="width: 300px" type="submit">
              <i class="large material-icons">search</i>
            </button>
        </div>
        </form>

        <br><br>

      </div>
    </div>
  </div>

  {% if results %}
  <div class="row center">
      <div class="col s12 m12">
        {% for obj in some_list %}
          <div class="card teal lighten-2">
            <div class="card-content white-text">
              <span class="card-title">{{obj.companyName}}</span>
              <p>{{obj.address}}</p>
              <p>{{obj.startDate}}</p>
              <p>{{obj.dailyCost}}</p>
            </div>
            {% if request.session.current_user %} 
            <div class="card-action">
              <a href="{% url 'book' %}?type=hotel&id={{obj.id}}">Book Now</a>
            </div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div> 
  {% else %}
  <div class="parallax-container valign-wrapper">
    <div class="section no-pad-bot">
      <div class="container">
        <div class="row center">
          <h5 class="header col s12 light">A modern responsive front-end travel agency built with Material Design</h5>
        </div>
      </div>
    </div>
    <div class="parallax"><img src="{% static 'images/background1.jpg' %}" alt="Unsplashed background img 2"></div>
  </div>

  <div class="container">
    <div class="section">

      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
            <h5 class="center">Speeds up development</h5>

            <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center brown-text"><i class="material-icons">group</i></h2>
            <h5 class="center">User Experience Focused</h5>

            <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center brown-text"><i class="material-icons">settings</i></h2>
            <h5 class="center">Easy to work with</h5>

            <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  {% endif %}

{% endblock content %}