<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>${title | h}</title>
        <style>
        	html, body {
        		margin:0;
        		padding:0;
                height:100%;
        	}

        	body {
        		background-color:#111;
        		background-image: url(https://image.tmdb.org/t/p/original${backdrop_path});
        		background-size: cover;
        		background-repeat: no-repeat;
        		background-position: center;
        		color:#fff;
        		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        		font-weight:300;
        	}
        	td {
        		vertical-align: top;
        	}
        	table {
        		width:100%;
        	}

        	.overlay {
                position:fixed;
                bottom:0;
        		background-image: -webkit-gradient(
				  linear, left top, left bottom, from(rgba(0, 0, 0, 0)),
				  to(rgba(0, 0, 0, .8)), color-stop(.32,rgba(0, 0, 0, .8))
				);
                width:100%;
        	}

        	.details {
				padding:0 20px 20px;
				margin-top:20px;
        	}

        	.overview {
        		padding-top:15px;

        	}

        	.header, .overview {
        		padding-bottom: 15px;
        	}

        	.poster {
        		margin:20px;
                width:300px;
        	}

        	.title {
        		font-size:40px;
        	}

        	.muted {
        		color:#aaa;
        	}

        	.credits {
        		margin-top:15px;
        	}

        	.genre {
        		margin-top:30px;
        	}

        	.pull-right {
        		float:right;
        	}
        </style>
    </head>
    <body>
    	<div class='overlay'>
	    	<table>
	    		<tr>
	    			<td style='width:1px;'>
	    				<img class='poster' src="https://image.tmdb.org/t/p/w342${poster}" />
	    			</td>
	    			<td>
	    				<div class='details'>
	    					<div class='header'>
	    						<div class='title'>${title | h}</div>
                                % if production_company != 'N/A':   
                                    <div class='company'>${production_company | h}</div>
                                % endif
	    					</div>
                            % if genre != '':   
    	    					<div class='genre'>
                                    ${genre | h}
    	    					</div>
                            % endif
	    					<div class='overview'>
	    						${overview | h}
	    					</div>

	    					<table class='credits'>
	    						<tr>
	    							<td style="width:33%;">
	    								<div class='header'>RELEASED</div>
	    								<div class='name'>${release_date | h}</div>
	    							</td>
                                    <td style="width:33%;">
	    								<div class='header'>DIRECTED BY</div>
	    								<div class='name'>${director | h}</div>
	    							</td>
                                    <td style="width:33%;">
	    								<div class='header'>STARRING</div>
	    								<div class='name'>${actors | h}</div>
	    							</td>
	    						</tr>
	    					</table>
	    				</div>
	    			</td>
	    		</tr>
	    	</table>
    	</div>
    </body>
</html>