{% extends 'base.html.twig' %}
<% if (props.critical) { %>
{% block stylesheetsDist %}
    <style type="text/css">
        {% include '@web/styles/critical/styles/critical/index.css' ignore missing %}
    </style>
    <link rel="preload" href="{{ asset('styles/main.css') }}" as="style" onload="this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="{{ asset('styles/main.css') }}"></noscript>
    {# LoadCSS #}
    <script>!function(e){"use strict";var t=function(t,n,r){function o(e){return i.body?e():void setTimeout(function(){o(e)})}function a(){d.addEventListener&&d.removeEventListener("load",a),d.media=r||"all"}var l,i=e.document,d=i.createElement("link");if(n)l=n;else{var s=(i.body||i.getElementsByTagName("head")[0]).childNodes;l=s[s.length-1]}var u=i.styleSheets;d.rel="stylesheet",d.href=t,d.media="only x",o(function(){l.parentNode.insertBefore(d,n?l:l.nextSibling)});var f=function(e){for(var t=d.href,n=u.length;n--;)if(u[n].href===t)return e();setTimeout(function(){f(e)})};return d.addEventListener&&d.addEventListener("load",a),d.onloadcssdefined=f,f(a),d};"undefined"!=typeof exports?exports.loadCSS=t:e.loadCSS=t}("undefined"!=typeof global?global:this),function(e){if(e.loadCSS){var t=loadCSS.relpreload={};if(t.support=function(){try{return e.document.createElement("link").relList.supports("preload")}catch(e){return!1}},t.poly=function(){for(var t=e.document.getElementsByTagName("link"),n=0;n<t.length;n++){var r=t[n];"preload"===r.rel&&"style"===r.getAttribute("as")&&(e.loadCSS(r.href,r),r.rel=null)}},!t.support()){t.poly();var n=e.setInterval(t.poly,300);e.addEventListener&&e.addEventListener("load",function(){e.clearInterval(n)}),e.attachEvent&&e.attachEvent("onload",function(){e.clearInterval(n)})}}}(this);</script>
{% endblock stylesheetsDist %}
<% } %>
{% block body %}
    <div class="header">
        <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
            <button class="menu-icon" type="button" data-toggle></button>
            <div class="title-bar-title">Menu</div>
        </div>
        <nav class="top-bar" id="main-menu" role="navigation" itemscope
             itemtype="http://schema.org/SiteNavigationElement">
            <div class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li class="menu-text"><%= appname %></li>
                </ul>
            </div>
            <div class="top-bar-right">
                <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
                    <li itemprop="url"><a href="#" title="Home" itemprop="name">Home</a></li>
                    <li itemprop="url"><a href="#" title="About" itemprop="name">About</a></li>
                    <li itemprop="url"><a href="#" title="Contact" itemprop="name">Contact</a></li>
                </ul>
            </div>
        </nav>
    </div>

    <div class="row">
        <div class="small-10 small-push-1 columns ">
            <div class="row callout panel">
                <div class="medium-6 medium-push-6 columns">
                    <img
                        sizes="(max-width: 1199px) calc(100vw - 60px), 50vw"
                        srcset="
                            {{ asset('img/yo-grunt-bower-symfony_w200.png') }} 200w,
                            {{ asset('img/yo-grunt-bower-symfony_w401.png') }} 401w,
                            {{ asset('img/yo-grunt-bower-symfony_w554.png') }} 554w,
                            {{ asset('img/yo-grunt-bower-symfony_w695.png') }} 695w,
                            {{ asset('img/yo-grunt-bower-symfony_w819.png') }} 819w,
                            {{ asset('img/yo-grunt-bower-symfony_w935.png') }} 935w,
                            {{ asset('img/yo-grunt-bower-symfony_w1042.png') }} 1042w,
                            {{ asset('img/yo-grunt-bower-symfony.png') }} 1178w"
                        src="{{ asset('img/yo-grunt-bower-symfony_w200.png') }}"
                        alt="generator-visual">
                </div>
                <div class="medium-6 medium-pull-6 columns">
                    <h1>'Allo, 'Allo!</h1>
                    <p class="lead">Always a pleasure scaffolding your apps.</p>
                    <p><a class="button alert" href="#">Splendid!
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon"><use xlink:href="{{ asset('img/icons.svg') }}#check"></use></svg>
                    </a></p>
                </div>
            </div>


            <b>Symfony</b>
            <p>High Performance PHP Framework for Web Development</p>
            <b>Browsersync</b>
            <p>Keep multiple browsers & devices in sync when building websites.</p>

            <% if (props.preprocessor === 'less') { %><b>Less</b>
            <p>Less is a mature, stable, and powerful professional grade CSS extension language.</p>
            <% } else if (props.preprocessor === 'sass') { %><b>Sass</b>
            <p>Sass is a mature, stable, and powerful professional grade CSS extension language.</p>
            <% } else if (props.preprocessor === 'stylus') { %><b>Stylus</b>
            <p>Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.</p>
            <% } %>
            <% if (props.critical) { %><b>Critical</b>
            <p>Extracts & inlines critical-path (above-the-fold) CSS from HTML.</p><% } %>
            <b>Foundation</b>
            <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
            <% if (props.loader === 'browserify') { %><h4>Browserify</h4>
            <p>Browserify lets you require node modules in the browser by bundling up all of your dependencies.</p><% } %>
            <% if (props.loader === 'webpack') { %><h4>Webpack</h4>
            <p>A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand ...</p><% } %>
            <% if (props.loader === 'jspm') { %><b>JSPM</b>
            <p>jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader</p><% } %>
        </div>
    </div>
{% endblock %}