<!--
Joe Steinbring
http://steinbring.net
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Movie Search</title>

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="MyApp">
    <div ng-controller="MainController" class="container-fluid">

      <div class="col-md-12">
        <input type="text" class="form-control" placeholder="Search for a movie" ng-model="movie" ng-change="refreshMovies(movie);">
      </div>

      <div class="col-md-12 MovieInfo" ng-if="movies !== undefined">
        <!-- Poster -->
        <div class="col-sm-5 MoviePoster">
          <img ng-src="{{movies.Poster}}" height="50%">
        </div>
        <!-- The Info -->
        <div class="col-sm-7">
          <div class="col-xs-2 TableHeader">Title</div>
          <div class="col-xs-10">{{movies.Title}}</div>

          <div class="col-xs-2 TableHeader">Genre</div>
          <div class="col-xs-10">{{movies.Genre}}</div>

          <div class="col-xs-2 TableHeader">Rated</div>
          <div class="col-xs-10">{{movies.Rated}}</div>

          <div class="col-xs-2 TableHeader">Year</div>
          <div class="col-xs-10">{{movies.Year}}</div>
          
          <div class="col-xs-2 TableHeader">Actors</div>
          <div class="col-xs-10">{{movies.Actors}}</div>

          <div class="col-xs-12 ButtonBox">
            <button class="btn btn-default" ng-click="submitMovie();">Save</button>
          </div>
        </div>
      </div>

    </div>
  </body>
</html>

angular.module('MyApp', [])

.controller('MainController', function($scope, $rootScope, $http) {

	$scope.refreshMovies = function(movie) {
		var params = {t: movie};
		return $http.get(
			'http://imdbapi.com/',
			{params: params}
		).then(function(response) {
			$scope.movies = response.data;
		});
	};
	$scope.submitMovie = function() {
		console.table($scope.movies);
	};
});
.TableHeader {
	font-weight: bold;
}

.MoviePoster img {
	width: 150px;
}

.MoviePoster {
	text-align: center;
}

.MovieInfo, .ButtonBox {
	padding-top: 10px;
	padding-bottom: 10px;
}

.ButtonBox {
	text-align: center;
}