{% 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 app.user.facebookId is defined and app.user.facebookId is not null %} style="margin-bottom:50px"{% endif %}>
                {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                    {% if app.user.facebookId is not null %}
                        <div>
                            <img src="http://graph.facebook.com/{{ app.user.facebookId }}/picture?type=square&width=100&height=100"
                                 alt="Facebook profile" border="0"/>
                        </div>
                    {% endif %}
                    <div>
                        <h2{% if app.user.facebookId is defined and app.user.facebookId is not null %} style="margin-top:0"{% endif %}>
                            Hello, {{ app.user.realName is not null ? app.user.realName : app.user.username }}!
                        </h2>
                        <h1>Let's play!! :D</h1>
                    </div>
                {% else %}
                    <div>
                        <h2>A minesweeper game rethought...</h2>
                        <h1>...and you can play w/o register!!</h1>
                    </div>
                {% 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">
        <h1>Users</h1>
        {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
            <div id="mine-user-list"
                 data-env="{{ env }}"
                 data-ssl="{{ ssl }}"
                 data-web-player-name="{{ app.user.username is defined ? app.user.username : '' }}">
            </div>
        {% endif %}
        <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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <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() }}

    {% if is_granted("IS_AUTHENTICATED_REMEMBERED") and app.user.facebookAccessToken is defined %}
        {% if env == 'dev' %}
            {% javascripts filter='?uglifyjs2'
            '@GosWebSocketBundle/Resources/public/js/vendor/autobahn.min.js'
            '@GosWebSocketBundle/Resources/public/js/gos_web_socket_client.js'
            '@MineSeekerBundle/Resources/public/js/node/js-base64/base64.min.js'
            '@MineSeekerBundle/Resources/public/js/build/mine-user-list/index.js' %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
            {% endjavascripts %}
        {% else %}
            {% javascripts filter='?uglifyjs2'
            '@GosWebSocketBundle/Resources/public/js/vendor/autobahn.min.js'
            '@GosWebSocketBundle/Resources/public/js/gos_web_socket_client.js'
            '@MineSeekerBundle/Resources/public/js/node/js-base64/base64.min.js'
            '@MineSeekerBundle/Resources/public/js/build/mine-user-list/index.min.js' %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
            {% endjavascripts %}

            <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>
        {% endif %}
    {% endif %}
{% endblock %}