<div class="container" id="app">
  <header>
    <h1>Contents</h1>
  </header>
  
  <div class="content">
    <section>
      <img src="http://www.baltana.com/files/wallpapers-3/Guardians-Of-The-Galaxy-Vol.-2-Rocket-Raccoon-And-Groot-Wallpaper-11123.jpg" alt="" />
      <section class="main">
        <article>
          <h2><span class="red">Pre.</span>view</h2>
          <ul class="preview">
            <li v-for="item in Preview">
              <h3>{{ item.num }}</h3>
              <h4>{{ item.title }}</h4>
              <p>{{ item.desc }}</p>
            </li>
          </ul>
        </article>
        <article>
          <h2><span class="yellow">On.</span>screen</h2>
          <ul class="onscreen">
            <li v-for="item in OnScreen">
              <h4 class="yellow">{{ item.num }}</h4>
              <ul v-if="item.movie.length > 0">
                <li v-for="m in item.movie">
                  {{ m.title }}
                  <ratings :stars="m.rating"></ratings>
                </li>
              </ul>
            </li>
          </ul>
        </article>
      </section>
    </section>

    <section class="side">
      <article>
        <h2><span class="blue">Features</h2>
          <ul class="features">
            <li v-for="item in Features">
              <h3>{{ item.num }}</h3>
              <h4>{{ item.title }}</h4>
              <p>{{ item.desc }}</p>
            </li>
          </ul>
      </article>
      <article>
        <h2><span class="blue">Re.</span>view</h2>
        <ul class="review">
            <li v-for="item in Review">
              <h3>{{ item.num }}</h3>
              <h4>{{ item.title }}</h4>
              <p>{{ item.desc }}</p>
            </li>
          </ul>
      </article>
    </section>
  </div>

</div>

<template id="ratings">
  <div class="ratings">
    <ul>
      <li v-for="star in stars">
        <i class="fa fa-star"></i>
      </li>
    </ul>
  </div>
</template>

@import url('https://fonts.googleapis.com/css?family=Bungee|Pathway+Gothic+One');

* {
  box-sizing: border-box;
}
body {
  background-color: #040001;
  color: #FFFFFF;
}

header {
  margin: 20px 0;
}
header h1 {
  font-size: 10em;
  letter-spacing: .1em;
  font-family: 'Bungee', cursive;
  text-align: center;
}

section {
/*   width: 300px; */
}
section h2 {
  font-size: 1.7em;
  font-family: 'Bungee', cursive;
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 2px solid #FFFFFF;
}

img {
  width: 700px;
  margin-left: -100px;
}

.container {
  padding: 50px;
  margin: 0 auto;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;;
}

.content {
  display: flex;
  overflow: hidden;
}

.ratings {
  margin: 4px 0 0 8px;
}
.ratings ul {
  display: flex;
}
.ratings ul li {
  border: none;
}
.ratings i {
  font-size: .5em;
  padding: 0 2px;
}

.main {
  margin-top: 30px;
  display: flex;
}
.main article {
  width: 320px;
  padding-right: 30px;
}

.features p, .review p {
  line-height: 1.5em;
}

.preview {
  padding: 20px 0;
}
.preview li {
  margin-bottom: 20px;
}
.preview h3 {
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.8em;
  font-weight: 600;
  float: left;
  margin-right: 10px;
}
.preview h4 {
  text-transform: uppercase;
  margin: 2px 0 5px 0;
}

.onscreen {
  padding: 20px 0;
  font-family: 'Pathway Gothic One', sans-serif;
  text-transform: uppercase;
}
.onscreen h4 {
  margin-right: 10px;
}
.onscreen li {
  margin-bottom: 10px;
  display: flex;
}
.onscreen li ul li {
  margin-bottom: 0;
  padding-bottom: 5px;
}


.side article {
  width: 320px;
  padding-right: 30px;
}

.features {
  padding: 20px 0;
}
.features li {
  margin-bottom: 20px;
}
.features h3 {
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.8em;
  font-weight: 600;
  float: left;
  margin-right: 10px;
}
.features h4 {
  text-transform: uppercase;
  margin: 2px 0 5px 0;
}

.review {
  padding: 20px 0;
}
.review li {
  margin-bottom: 20px;
}
.review h3 {
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.8em;
  font-weight: 600;
  float: left;
  margin-right: 10px;
}
.review h4 {
  text-transform: uppercase;
  margin: 2px 0 5px 0;
}

.red {
  color: #FF3200;
}
.yellow {
  color: #FFC700;
}
.blue {
  color: #0185B5;
}

/*jshint esversion: 6 */

const preview = [
  {
    'num': 10,
    'title': 'Logan',
    'desc': "He's the best at what he does...and what he does is get super-old, grey and wrinkly." 
  },
  {
    'num': 14,
    'title': 'Beauty and the Beast',
    'desc': 'Guess which one Emma Watson is?'
  },
  {
    'num': 16,
    'title': 'Fences',
    'desc': "Denzel Washington won an award back when this was a play. Can he win another now that it's a movie"
  },
  {
    'num': 20,
    'title': 'Gillian Anderson',
    'desc': 'How is it that Scully looks wonderful with each passing year, while we fall to bits?'
  },
  {
    'num': 24,
    'title': 'Ghost in the Shell',
    'desc': "That's what happens when oysters die."
  }
];

const onscreen = [
  {
    'num': 28,
    'movie': [
      {
        'title': 'Manchester by the Sea',
        'rating': 5
      }
    ]
  },
  {
    'num': 30,
    'movie': [
      {
        'title': 'Collateral Beauty',
        'rating': 2
      },
      {
        'title': 'Moonlight',
        'rating': 4
      }
    ]
  },
  {
    'num': 31,
    'movie': [
      {
        'title': 'Lion',
        'rating': 4
      }
    ]
  },
  {
    'num': 32,
    'movie': [
      {
        'title': 'Rogue One',
        'rating': 4
      }
    ]
  },
  {
    'num': 34,
    'movie': [
      {
        'title': 'A Monster Calls',
        'rating': 4
      }
    ]
  },
  {
    'num': 35,
    'movie': [
      {
        'title': 'Monster Trucks',
        'rating': 2
      },
      {
        'title': "Rules Don't Apply",
        'rating': 2
      },
      {
        'title': 'Split',
        'rating': 4
      }
    ]
  },
  {
    'num': 36,
    'movie': [
      {
        'title': 'Assassins Creed',
        'rating': 3
      }
    ]
  },
  {
    'num': 37,
    'movie': [
      {
        'title': 'Live By Night',
        'rating': 2
      }
    ]
  },
  {
    'num': 38,
    'movie': [
      {
        'title': 'Jackie',
        'rating': 4
      }
    ]
  },
  {
    'num': 39,
    'movie': [
      {
        'title': 'Passengers',
        'rating': 4
      }
    ]
  }
];

const features = [
  {
    'num': 40,
    'title': 'T2 Trainspotting',
    'desc': "The Danny Boyle classic has spawned a sequel. Choose life. Choose a film magazine. Choose the 'Contents' page. Choose so-called witticisms instead of useful information. Choose choosing. Choose... oh, forget it." 
  },
  {
    'num': 48,
    'title': 'A Monster Calls',
    'desc': "Liam Neeson voices a walking, talking tree. It's the first time we've congratulated someone for their wooden acting."
  },
  {
    'num': 54,
    'title': "Assassin's Creed",
    'desc': "Going by the game, an assassin's creed centres on murder, strenous exercise and the importance of layering with a really fetching hood. So, basically, death and fashion - like The Neon Demon later in this issue..."
  },
  {
    'num': 60,
    'title': 'Micheal Fassbender',
    'desc': "County Kerry's best export, apart from Kerrygold butter. Which, judging by these pictures, Fassbender has never eaten in his life."
  },
  {
    'num': 64,
    'title': 'The Ultimate 2017 Preview',
    'desc': "As if 2017 wasn't already exciting enough with an orange-faced loon looking to upend civilization as we know it, there's also these excellent films to look forward to - check out our sneak peek at this year's greatest-to-come"
  },
  {
    'num': 80,
    'title': 'Casey Affleck',
    'desc': "The younger Batfleck is very good in Manchester By The Sea, but imagine how good he could've been in Sheets By The Water or Tablecloths By The Stream"
  }
];

const review = [
  {
    'num': 88,
    'title': 'The Neon Demon',
    'desc': "The best bits of the cannibal models"
  },
  {
    'num': 94,
    'title': "How to Make a Horror Movie",
    'desc': "The writer and director of Don't Breathe, Rodo Sayagues and Fede Alvarez, on how to create the perfect screamfest"
  },
  {
    'num': 106,
    'title': "Thrill of the Chase",
    'desc': "Behind the making of William Friedkin's classic car chase in To Live and Die in L.A."
  },
  {
    'num': 114,
    'title': "Classic Scene",
    'desc': "Peter Strickland gets depressive."
  }
];

const Ratings = Vue.component('ratings', {
  
  // TEMPLATE
  template: '#ratings',
  
  // PROPS
  props: ['stars']
  
});

new Vue({
  
  // ELEMENT
  el: '#app',
  
  // DATA
  data: {
    Preview: preview,
    OnScreen: onscreen,
    Features: features,
    Review: review
  }
  
});