<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ .Title }} {{ .Year }}</title>
    <style>body, html {
        margin: 0;
        padding: 0;
        background: #171618;
        color: #ecf0f1;
        font-family: 'Open Sans', sans-serif;
        width: 100%;
    }

    .movie-header {
        display: flex;
        justify-content: space-around;
        padding: 16px;
    }

    .cover {
        position: relative;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .cover:hover .cover-img {
        opacity: 0.5;
    }

    .cover:hover .icon-play {
        opacity: 1;
    }

    .cover-img {
        margin: 0;
        padding: 0;
    }

    .icon-play {
        margin: 0;
        padding: 0;
        color: white;
        font-size: 80px;
        position: absolute;
        left: 50%;
        top: 50%;
        vertical-align: center;
        /*left: 50%;*/
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        opacity: 0;
    }

    .title {
        flex-grow: 1;
        flex-basis: 0;
        padding-left: 16px;
    }

    iframe {
        width: 100%;
        height: auto;
        flex-grow: 1;
        flex-basis: 0;
    }

    section {
        padding: 16px;
    }

    .cast {
        display: flex;
    }
    .actor {
        margin: 10px;
        width: 80px;
        height: 120px;
    }
    .actor-img {
        margin: auto;
        border-radius: 100%;
    }
    .actor-name {
        margin: auto;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    </style>
</head>
<body>
{{ template "navigation" }}
<div class="movie-header">
    <div class="cover">
        <a href="{{ .Link }}">
            <img class="cover-img" src="{{ .Cover }}">
            <p class="icon-play">▶</p>
        </a>
    </div>
    <div class="title">
        <h1>{{ .Title }} {{ .Year }}</h1>
        <p>{{ range .Genre }}{{ . }} {{ end }}
        </p>
    </div>
    <iframe
            src="{{ .Youtube }}" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
</div>
<section class="details">
    <h2>Synopsis</h2>
    <p>{{ .Synopsis }}</p>
</section>
<section>
    <h2>Casting</h2>
    <div class="cast">
        {{ range .Casting }}
        <div class="actor">
            <img class="actor-img" src="{{ .Image }}">
            <p class="actor-name">{{ .Name }}</p>
        </div>
        {{ end }}
    </div>
</section>
</body>
</html>