cinema/movie-page.riot

<movie-page>
    <div class="movie-page-container">

        <div>
            <h1 style="font-weight: bold;">{props.movie.title}</h1>
            <img src="https://image.tmdb.org/t/p/w500/{props.movie.poster_path}"><img>
        </div>

        <div class="right-part">
            <ul>
                <li class="genre" each={genre in state.movie_genres}>{genre}</li>
            </ul>

            <br>

            <p >{props.movie.release_date}</p>

            <br>

            <ul>
                <li class="language" each={language in props.movie.spoken_languages}>{(language.iso_639_1).toUpperCase()}</li>
            </ul>

            <br>

            <p class="overview">{props.movie.overview}</p>
        </div>
    </div>

    <script>

        export default {
            onBeforeMount(props, state) {
                this.state = {
                    movie_genres: this.getGenresFromIds(),
                }
            },

            getGenresFromIds() {
                let ret = []
                let genres = []
                genres = JSON.parse(localStorage.getItem("genres")).genres;

                for(let i = 0; i<genres.length; i++)
                {
                    for(let j = 0; j< this.props.movie.genres.length; j++) {
                        if(genres[i].id == this.props.movie.genres[j].id) {
                            ret.push(genres[i].name)
                        }
                    }
                }
                console.log(ret)
                return ret	
            },
        }
    </script>

    <style>
        .movie-page-container {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: center;
        }

        .movie-page-container div {
            margin: 20px;
        }

        .right-part {
            padding-top: 3%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
        }

        ul {
            padding-left: 0px;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
        }

        .genre {
            font-weight: bold;
            padding-right: 14px;
        }

        .language {
            margin-right: 14px;
            text-align: center;
            list-style: none;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            color: #50713e;
            background-color: #daf1e0;
        }

        .overview {
            word-wrap: break-word;
            width: 400px;
        }
    </style>
</movie-page>