{% 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="uk-navbar uk-navbar-attached uk-margin-large-bottom">
        <div class="uk-container uk-container-center" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
            <a href="" class="uk-navbar-brand"><%= appname %></a>
            <div class="uk-navbar-flip">
                <ul class="uk-navbar-nav">
                    <li itemprop="url" class="uk-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="#" tiele="Contact" itemprop="name">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="uk-container uk-container-center">

        <div class="uk-panel uk-margin-large-bottom">
            <div class="uk-grid">
                <div class="uk-width-medium-1-2 uk-push-1-2 uk-margin-bottom">
                    <img
                        sizes="(max-width: 47.9375rem) calc(100vw - 50px), 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="uk-width-medium-1-2 uk-pull-1-2">
                    <h1 class="uk-heading-large">'Allo, 'Allo!</h1>

                    <p class="lead">Always a pleasure scaffolding your apps.</p>

                    <p><a class="uk-button uk-button-large uk-button-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="uk-panel uk-panel uk-panel-header">
            <h3 class="uk-panel-title">Here's what you got</h3>
            <dl class="uk-description-list-horizontal">
                <dt>Symfony</dt>
                <dd>High Performance PHP Framework for Web Development</dd>

                <dt>Browsersync</dt>
                <dd>Keep multiple browsers & devices in sync when building websites.</dd>

                <% if (props.preprocessor === 'less') { %><dt>Less</dt>
                <dd>Less is a mature, stable, and powerful professional grade CSS extension language.</dd>
                <% } else if (props.preprocessor === 'sass') { %><dt>Sass</dt>
                <dd>Sass is a mature, stable, and powerful professional grade CSS extension language.</dd>
                <% } else if (props.preprocessor === 'stylus') { %><dt>Stylus</dt>
                <dd>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.</dd>
                <% } %>
                <% if (props.critical) { %><dt>Critical</dt>
                <dd>Extracts & inlines critical-path (above-the-fold) CSS from HTML.</dd><% } %>
                <dt>uikit</dt>
                <dd>A lightweight and modular front-end framework for developing fast and powerful web interfaces.</dd>
                <% 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') { %><dt>JSPM</dt>
                <dd>jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader</dd><% } %>
            </dl>
        </div>
    </div>
{% endblock %}