{% extends "@MineSeeker/layout.html.twig" %}

{% block title %} - The Game{% endblock %}

{% block metas %}
    <meta property="og:url" content="{{ url('MineSeekerBundle_homepage') }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="MineSeeker"/>
    <meta property="og:description" content="A multiplayer minesweeper game"/>
    <meta property="og:image" content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('bundles/mineseeker/images/mine-1600x627.png') }}"/>
{% endblock %}

{% block header %}
    <section class="header-content">
        <div class="logo">
            <a href="{{ path('MineSeekerBundle_homepage') }}" target="_self">
                <img src="{{ asset('bundles/mineseeker/images/mine-logo-txt.png') }}" alt="MineSeeker Logo w/ Txt"
                     border="0"/>
            </a>
        </div>
        <div>
            <div id="id_welcome">
                {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                    <h2>
                        Hello, {{ app.user.realName is not null ? app.user.realName : app.user.username }}!
                    </h2>
                    <h1>Let's play!! :D</h1>
                {% else %}
                    <h2>A minesweeper game rethought...</h2>
                    <h1>...and you can play w/o register!!</h1>
                {% endif %}
            </div>
            <div class="buttons">
                <a href="{{ path('MineSeekerBundle_gamePlay') }}">Play NOW!</a>
                {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                    <a href="{{ path('fos_user_security_logout') }}" class="small">
                        {{ 'layout.logout'|trans({}, 'FOSUserBundle') }}
                    </a>
                {% else %}
                    <a href="{{ path('fos_user_registration_register') }}" class="small">Sign up</a> &middot;
                    <a href="{{ path('fos_user_security_login') }}" class="small">Sign in</a>
                {% endif %}
            </div>
            <h3>
                version {{ version }} &middot; MineSeeker&copy;{{ "now"|date("Y") }} &middot; <a
                        href="http://www.laszlolang.com">www.laszlolang.com</a>
            </h3>
        </div>
        <img src="{{ asset('bundles/mineseeker/images/mine-logo-logo.png') }}" alt="MineSeeker Logo" border="0"/>
    </section>
{% endblock %}

{% block body %}
    <div class="txt">
        <div class="technologies">
            <h1>Used technologies</h1>
            <img src="{{ asset('bundles/mineseeker/images/technologies/websocket.png') }}" alt="Used Websocket" border="0"/>
            <img src="{{ asset('bundles/mineseeker/images/technologies/react.png') }}" alt="Used React.js" border="0"/>
            <img src="{{ asset('bundles/mineseeker/images/technologies/symfony.png') }}" alt="Used Symfony" border="0"/>
            <img src="{{ asset('bundles/mineseeker/images/technologies/jquery.png') }}" alt="Used jQuery" border="0"/>
            <img src="{{ asset('bundles/mineseeker/images/technologies/lets-encrypt.png') }}" alt="Used Let's Encrypt" border="0"/>
        </div>
    </div>
{% endblock %}

{% block footer %}
    <nav>
        <ul>
            <li><a href="{{ path('MineSeekerBundle_homepage') }}">Homepage</a></li>
            <li>&middot;</li>
            <li><a href="{{ path('MineSeekerBundle_terms') }}">Terms of Use</a></li>
            <li>&middot;</li>
            <li><a href="{{ path('MineSeekerBundle_privacy') }}">Privacy Policy</a></li>
            <li>&middot;</li>
            <li><a href="{{ path('MineSeekerBundle_contact') }}">Contact</a></li>
        </ul>
    </nav>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <link href="https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&amp;subset=latin-ext"
          rel="stylesheet">

    {% stylesheets filter='?uglifycss'
    '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/css/bootstrap.min.css'
    '@MineSeekerBundle/Resources/public/css/style.homepage.css'
    '@JotunheimrUserBundle/Resources/public/css/layout.css' %}
    <link rel="stylesheet" media="screen" href="{{ asset_url }}" type="text/css"/>
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"
            type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(document).snowfall({deviceorientation: true, round: true, minSize: 5, maxSize: 8});
        });
    </script>
{% endblock %}