<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="icon" sizes="192x192" href="icon.png">
    <link rel="apple-touch-icon" href="icon-ios.png">
    <link rel="manifest" href="manifest.json">
    <link href="css/normalize.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lobster+Two|Raleway:200" rel="stylesheet">
    <link href="css/fonts.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <title>Matthew Willse</title>
</head>
<body>

    <div id="app" v-bind:class="[view, pageType]">

        <header id="site-header" class="container">
            <div id="site-name">
                <transition  name="fade" v-if="newVisit" >
                <h1>Matthew Willse <span>// Projects, photos, and texts.</span></h1>
                </transition>
            </div>
            <div id="filter" v-if="view === 'portfolio'">
                <button id="filter-toggle-button" v-on:click="filterOpen = !filterOpen"><i v-if="filterOpen" class="icon-angle-up"></i><i v-if="!filterOpen" class="icon-angle-down"></i><span>View {{ filterActive }}</span></button>
                <transition name="fade">
                    <ul id="filter-options" v-if="filterOpen">
                        <filter-item v-for="option in filterOptions" v-bind:option="option" v-on:dofilter="switchFilter"></filter-item>
                    </ul>
                </transition>
            </div>
        </header>

        <div v-if="loading" class="loading"><img alt="loading" src="https://firebasestorage.googleapis.com/v0/b/portfolio-f9db1.appspot.com/o/site%2Floading.svg?alt=media&token=b75eef38-0aab-48d8-9ea9-6646c70495e8"></div>

        <section v-if="view === 'portfolio'" id="portfolio-container" class="container" v-bind:class="filterActive">
            <card-item v-for="card in cards" v-bind:card="card"></card-item>
        </section>

        <article v-if="view === 'page'" id="pageArticle">
            <nav><a class="back-button" href="#"><i class="icon-angle-left"></i>Browse</a></nav>

            <template v-if="pageType === 'photo'">
                <article-photo v-bind:article="article"></article-photo>      
                <photo-header v-bind:article="article"></photo-header>
            </template>

            <template v-else >
                <article-header v-bind:article="article"></article-header>
                <article-body v-bind:article="article"></article-body>      
            </template>
        </article>

        <footer>
            <p class="license">Thanks for visiting. This work is licensed under <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike</a>.</p>
        </footer>

        <div id="background"></div>

    </div><!-- #app -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-686417-16', 'auto');
      ga('send', 'pageview');
    </script>
    <script src="js/vue.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>