import os

# Styles and scripting for the page
main_page_head = '''
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="<NAME>">
    <meta name="date" content='Dec. 05, 2016'>
    <title>Movie Trailer Project</title>

    <!-- Bootstrap 3 -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/styles.css">
</head>
'''

# The main page layout and title bar
main_page_content = '''
<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- Trailer Video Modal -->
    <div class="modal" id="trailer">
      <div class="modal-dialog">
        <div class="modal-content">
          <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
            <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
          </a>
          <div class="scale-media" id="trailer-video-container">
          </div>
        </div>
      </div>
    </div>

    <!-- Main Page Content -->
    <div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Movie Trailers Project</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      {movie_tiles}
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="/js/main.js"></script>
  </body>
</html>
'''

# A single movie entry html template
movie_tile_content = '''
<div class="col-md-6 col-lg-4 movie-tile text-center"
     data-trailer-youtube-id="{trailer_youtube_id}"
     data-toggle="modal" data-target="#trailer">
    <img src="{poster_image_url}" width="220" height="342">
    <h2>{movie_title}</h2>
</div>
'''

def create_movie_tiles_content(movies):
    # The HTML content for this section of the page
    content = ''
    for movie in movies:
        # Append the tile for the movie with its content filled in
        content += movie_tile_content.format(
            movie_title=movie.title,
            poster_image_url=movie.poster_image_url,
            trailer_youtube_id=movie.extract_trailer_id()
        )
    return content

def open_movies_page(movies):
    # Create or overwrite the output file
    output_file = open('index.html', 'w')

    # Replace the placeholder for the movie tiles
    # with the actual dynamically generated content
    content = create_movie_tiles_content(movies)
    rendered_content = main_page_content.format(movie_tiles=content)

    # Output the file
    output_file.write(main_page_head + rendered_content)
    output_file.close()

    # open the output file in the browser
    url = os.path.abspath(output_file.name)

import os

# Styles and scripting for the page
main_page_head = '''
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="<NAME>">
    <meta name="date" content='Dec. 05, 2016'>
    <title>Movie Trailer Project</title>

    <!-- Bootstrap 3 -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/styles.css">
</head>
'''

# The main page layout and title bar
main_page_content = '''
<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- Trailer Video Modal -->
    <div class="modal" id="trailer">
      <div class="modal-dialog">
        <div class="modal-content">
          <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
            <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
          </a>
          <div class="scale-media" id="trailer-video-container">
          </div>
        </div>
      </div>
    </div>

    <!-- Main Page Content -->
    <div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Movie Trailers Project</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      {movie_tiles}
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="/js/main.js"></script>
  </body>
</html>
'''

# A single movie entry html template
movie_tile_content = '''
<div class="col-md-6 col-lg-4 movie-tile text-center"
     data-trailer-youtube-id="{trailer_youtube_id}"
     data-toggle="modal" data-target="#trailer">
    <img src="{poster_image_url}" width="220" height="342">
    <h2>{movie_title}</h2>
</div>
'''

def create_movie_tiles_content(movies):
    # The HTML content for this section of the page
    content = ''
    for movie in movies:
        # Append the tile for the movie with its content filled in
        content += movie_tile_content.format(
            movie_title=movie.title,
            poster_image_url=movie.poster_image_url,
            trailer_youtube_id=movie.extract_trailer_id()
        )
    return content

def open_movies_page(movies):
    # Create or overwrite the output file
    output_file = open('index.html', 'w')

    # Replace the placeholder for the movie tiles
    # with the actual dynamically generated content
    content = create_movie_tiles_content(movies)
    rendered_content = main_page_content.format(movie_tiles=content)

    # Output the file
    output_file.write(main_page_head + rendered_content)
    output_file.close()

    # open the output file in the browser
    url = os.path.abspath(output_file.name)

# Styles and scripting for the page <!DOCTYPE html> <head>     <meta charset="utf-8">     <meta name="author" content="<NAME>">     <meta name="date" content='Dec. 05, 2016'>     <title>Movie Trailer Project</title>      <!-- Bootstrap 3 -->     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">     <link rel="stylesheet" href="/css/styles.css"> </head> # The main page layout and title bar <!DOCTYPE html> <html lang="en">   <body>     <!-- Trailer Video Modal -->     <div class="modal" id="trailer">       <div class="modal-dialog">         <div class="modal-content">           <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">             <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>           </a>           <div class="scale-media" id="trailer-video-container">           </div>         </div>       </div>     </div>      <!-- Main Page Content -->     <div class="container">       <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">         <div class="container">           <div class="navbar-header">             <a class="navbar-brand" href="#">Movie Trailers Project</a>           </div>         </div>       </div>     </div>     <div class="container">       {movie_tiles}     </div>     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>     <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>     <script src="/js/main.js"></script>   </body> </html> # A single movie entry html template <div class="col-md-6 col-lg-4 movie-tile text-center"      data-trailer-youtube-id="{trailer_youtube_id}"      data-toggle="modal" data-target="#trailer">     <img src="{poster_image_url}" width="220" height="342">     <h2>{movie_title}</h2> </div> # The HTML content for this section of the page # Append the tile for the movie with its content filled in # Create or overwrite the output file # Replace the placeholder for the movie tiles # with the actual dynamically generated content # Output the file # open the output file in the browser