{% extends 'base.html.twig' %}
<% if (props.critical) { %>
{% block stylesheetsDist %}
    <style type="text/css">
        {% include '@web/styles/critical/styles/critical/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">
        <h1><%= appname %></h1>

        <div>
            <h2>'Allo, 'Allo!</h2>
            <p class="lead">Always a pleasure scaffolding your apps.</p>
        </div>
        <img
            sizes="(max-width: 1178px) 100vw, 1178px"
            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">

        <pre class="marketing">
             <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><% } %>
            <% 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') { %><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><% } %>
        </pre>
    </div>
{% endblock %}