'use strict';

const React = require('react');
const moment = require('moment');

const Layout = require('./layout.jsx');

class Home extends React.Component {
    render() {
        return (
            <Layout>
                <ul className="scenes">
                    {this.props.releases.map(release => (
                        <li key={release.id} className="scene">
                            <a
                                href={`/item/${release.id}`}
                                target="_blank"
                            >
                                <img
                                    src={`/${release.site.id}/${release.id}/0.jpg`}
                                    className="scene-thumbnail"
                                />
                            </a>

                            <div className="scene-info">
                                <a
                                    href={`/item/${release.id}`}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="scene-row scene-link"
                                ><h2 className="scene-title">{release.title}</h2></a>

                                <span className="scene-row">
                                    <a
                                        href={`/site/${release.site.id}`}
                                        className="scene-site site-link"
                                    >{release.site.name}</a>

                                    <span>
                                        <a
                                            className="scene-network"
                                            href={`/network/${release.network.id}`}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                        >{release.network.name}</a>

                                        <a
                                            href={release.url}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="scene-date"
                                        >{moment(release.date).format('YYYY-MM-DD')}</a>
                                    </span>
                                </span>

                                <span className="scene-row">
                                    <ul className="scene-actors nolist">{release.actors.map(actor =>
                                        <li
                                            key={actor.id}
                                            className="scene-actor"
                                        >
                                            <a
                                                href={`/actor/${actor.id}`}
                                                className="actor-link"
                                            >{actor.name}</a>
                                        </li>
                                    )}</ul>
                                </span>

                                <span className="scene-row">
                                    <ul className="scene-tags nolist">{release.tags.map(tag =>
                                        <li
                                            key={tag.tag}
                                            className="scene-tag"
                                        >
                                            <a
                                                href={`/tag/${tag.tag}`}
                                                className="tag-link"
                                            >{tag.tag}</a>
                                        </li>
                                    )}</ul>
                                </span>
                            </div>
                        </li>
                    ))}
                </ul>
            </Layout>
        );
    }
}

module.exports = Home;