{% extends "layout.html" %}
{% block content %}
  <div id="jumbotron_main" class="jumbotron text-center">
    <h1>Media Recommender</h1>
    <p>A recommendation engine for movies, games and books</p>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <input id="search" class="form-control" type="text" list="search_results" placeholder="Search for a movie, game or book title" autocomplete="off" oninput="search()" onfocusout="removeAllChild('search_results')">
        <div id="search_results" class="list-group"></div>
      </div>
    </div>
    <div id="buttons_row" class="row">
      <div class="col-sm-6 text-center">
        <button type="button" class="btn btn-dark btn-block" onclick="submit_favorites()">Submit</button>
      </div>
      <div class="col-sm-6 text-center">
        <button type="button" class="btn btn-dark btn-block" onclick="reset()">Reset</button>
      </div>
    </div>
    <div id="favorites_header_row" class="row">
      <div id="favorites_header" class="col-sm-12 text-center">
        <h4>Favorites</h4>
      </div>
    </div>
    <div id="favorites_row" class="row">
      <div class="col-sm-4 text-center">
        <h5>Movie</h5>
        <div id="movie_favorites"></div>
      </div>
      <div class="col-sm-4 text-center">
        <h5>Game</h5>
        <div id="game_favorites"></div>
      </div>
      <div class="col-sm-4 text-center">
        <h5>Book</h5>
        <div id="book_favorites"></div>
      </div>
    </div>
    <div id="recommendation_header_row" class="row">
      <div id="recommendation_header" class="col-sm-12 text-center">
        <h4>Recommendation</h4>
      </div>
    </div>
    <div id="recommendation_row" class="row">
      <div class="col-sm-4 text-center">
        <h5>Movie</h5>
        <div id="movie_recommendation"></div>
      </div>
      <div class="col-sm-4 text-center">
        <h5>Game</h5>
        <div id="recommendation_load_spinner" class="spinner-border m-5" role="status">
          <span class="sr-only">Loading...</span>
        </div>
        <div id="game_recommendation"></div>
      </div>
      <div class="col-sm-4 text-center">
        <h5>Book</h5>
        <div id="book_recommendation"></div>
      </div>
    </div>
  </div>
{% endblock content %}