{% extends 'base.html.twig' %}
<% if (props.critical) { %>
{% block stylesheetsDist %}
    <style type="text/css">
        {% include '@web/styles/critical/default/index.css' ignore missing %}
    </style>
    <script>
        (function(u){function loadCSS(e,t,n){"use strict";function r(){for(var t,i=0;i<d.length;i++)d[i].href&&d[i].href.indexOf(e)>-1&&(t=!0);t?o.media=n||"all":setTimeout(r)}var o=window.document.createElement("link"),i=t||window.document.getElementsByTagName("script")[0],d=window.document.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",i.parentNode.insertBefore(o,i),r(),o}for(var i in u){loadCSS(u[i]);}}(["{{ asset('styles/main.css') }}"]));
    </script>
    <noscript>
        <link rel="stylesheet" href="{{ asset('styles/main.css') }}">
    </noscript>
{% endblock stylesheetsDist %}
<% } %>
{% block body %}
    <div class="container">
        <div class="header">
            <ul class="nav nav-pills pull-right" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
                <li itemprop="url" class="active"><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>
            <h3><%= appname %></h3>
        </div>

        <div class="jumbotron">
            <div class="row">
                <div class="col-lg-6 col-lg-push-6">
                    <img
                        sizes="(max-width: 74.9375rem) 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="col-lg-6 col-lg-pull-6">
                    <h1>'Allo, 'Allo!</h1>
                    <p class="lead">Always a pleasure scaffolding your apps.</p>
                    <p><a class="btn btn-lg btn-success" 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>

        </div>

        <div class="row marketing">
            <div class="col-lg-6">
                <h4>Symfony</h4>
                <p>High Performance PHP Framework for Web Development</p>
                <h4>Browsersync</h4>
                <p>Keep multiple browsers & devices in sync when building websites.</p>

                <% if (props.preprocessor === 'less') { %><h4>Less</h4>
                <p>Less is a mature, stable, and powerful professional grade CSS extension language.</p>
                <% } else if (props.preprocessor === 'sass') { %><h4>Sass</h4>
                <p>Sass is a mature, stable, and powerful professional grade CSS extension language.</p>
                <% } else if (props.preprocessor === 'stylus') { %><h4>Stylus</h4>
                <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) { %><h4>Critical</h4>
                <p>Extracts & inlines critical-path (above-the-fold) CSS from HTML.</p><% } %>
                <h4>Bootstrap</h4>
                <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
                <% if (props.loader === 'jspm') { %><h4>JSPM</h4>
                <p>jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader</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><% } %>
            </div>
        </div>
    </div>
{% endblock %}