<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Films</title>
		<link rel="stylesheet" href="./style.css">
		<link rel="icon" href="./favicon.ico" type="image/x-icon">

		<style>
		 * {
				 font-family: sans;
				 color: white;
		 }

		 body {
		 		 background-color: #202020;
		 }

		 .message {
				 padding: 10px 20px;
				 border-radius: 10px;
		 }

		 .ok {
				 background-color: #81C784;
				 color: #2E7D32;
		 }

		 .error {
				 background-color: #E57373;
				 color: #C62828;
		 }

		 main {
				 width: 80vw;
				 margin-left: 10vw;
				 background-color: #202020;				 
		 }

		 .movie {
				 background-color: #505050;
				 padding: 10px 20px;
				 border-radius: 10px;
				 margin-bottom: 20px;
				 background: hsla(197, 100%, 63%, 1);
				 background: linear-gradient(45deg, hsla(197, 100%, 63%, 1) 0%, hsla(294, 100%, 55%, 1) 100%);
		 }

		 .title {
				 font-variant: small-caps;
				 font-size: 2em;
		 }

		 form {
				 margin-top: 20px;
				 background-color: #505050;
				 padding: 10px 20px;
				 border-radius: 10px;
				 margin-bottom: 20px;
				 display: flex;
				 flex-direction: column;
		 }

		 input {
				 margin-bottom: 10px;
				 border-radius: 5px;
				 border: none;
				 outline: none;
				 background-color: #707070;
		 }

		 input[type="submit"] {
				 background-color: #388E3C;
				 color: white;
				 font-size: 1.5em;
		 }

		</style>
  </head>
  <body>
		<main>

	    {% if error_message != "" %}
	    {% if is_ok %}
	    <div class="message ok">{{error_message}}</div>
	    {% else %}
	    <div class="message error">{{error_message}}</div>
	    {% endif %}
	    {% endif %}
	    
	    <h1>Films - Version qui claque !</h1>

			<h2>Servi par <code>{{hostname}}</code></h2>
			
	    <div id="movies">
				{% for movie in movies %}

				<div class="movie">
					<p class="title">{{movie.title}}</p>
					<div class="director">Réalisateur: {{movie.director}}</div>
					<div class="year">Année de sortie: {{movie.release_year}}</div>
				</div>
				
				{% endfor %}
	    </div>

	    <hr/>

	    <form method="POST" action="/">
				<label for="title">Titre</label>
				<input name="title" type="text" value="" required/>
				<label for="director">Réalisateur</label>
				<input name="director" type="text" value="" required/>
				<label for="release_year">Année de sortie</label>
				<input name="release_year" type="number" value="" required/>
				<input name="submit" type="submit" value="Valider"/>
	    </form>
	    
		</main>
		<script src="index.js"></script>
  </body>
</html>
