{% extends 'JotunheimrUserBundle::layout.html.twig' %}

{% trans_default_domain 'FOSUserBundle' %}

{% block title %} - Sign up{% endblock %}

{% block fos_user_content %}
    <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>
        <h1> Sign up </h1>
        <div class="db">
            <form action="{{ path('fos_user_registration_register') }}"
                  method="post">
                {{ form_widget(form._token) }}

                {% if form_errors(form) is not empty %}
                    <div class="failure-main">
                        <i class="fa fa-exclamation-circle"></i> {{ form_errors(form) }}
                    </div>
                {% endif %}

                <div>
                    {{ form_widget(form.email, {'attr': {'placeholder': 'Email', 'class': 'form-input form-username'}}) }}
                    {% if form_errors(form.email) is not empty %}
                        <div class="failure">
                            <i class="fa fa-exclamation-circle"></i> {{ form_errors(form.email) }}
                        </div>
                    {% endif %}
                </div>

                <div>
                    {{ form_widget(form.username, {'attr': {'placeholder': 'Username ', 'class': 'form-input form-username'}}) }}
                    {% if form_errors(form.username) is not empty %}
                        <div class="failure">
                            <i class="fa fa-exclamation-circle"></i> {{ form_errors(form.username) }}
                        </div>
                    {% endif %}
                </div>

                <div>
                    {{ form_widget(form.plainPassword.first, {'attr': {'placeholder': 'Password', 'class': 'form-input form-username'}}) }}
                    {% if form_errors(form.plainPassword.first) is not empty %}
                        <div class="failure">
                            <i class="fa fa-exclamation-circle"></i> {{ form_errors(form.plainPassword.first) }}
                        </div>
                    {% endif %}
                </div>

                <div>
                    {{ form_widget(form.plainPassword.second, {'attr': {'placeholder': 'Repeat password', 'class': 'form-input'}}) }}
                    {% if form_errors(form.plainPassword.second) is not empty %}
                        <div class="failure">
                            <i class="fa fa-exclamation-circle"></i> {{ form_errors(form.plainPassword.second) }}
                        </div>
                    {% endif %}
                </div>

                <div class="input-submit">
                    <button type="submit" id="_submit" name="_submit">
                        <i class="fa fa-check"></i>
                    </button>
                </div>
            </form>
        </div>
        <h3 class="or">or login <u>w/ one click</u></h3>
        <div class="buttons">
            {% include('@JotunheimrUser/Social/facebook.html.twig') %}
            {#<a class="slack-login"#}
            {#href="https://slack.com/oauth/authorize?scope=identity.basic,identity.email,identity.team,identity.avatar&client_id=107639806167.106953365090&redirect_uri=http://mine.dev">#}
            {#<i class="fa fa-slack"></i><span>w/ Slack</span>#}
            {#</a>#}
        </div>
        <img src="{{ asset('bundles/mineseeker/images/mine-logo-logo.png') }}" alt="MineSeeker Logo" border="0"/>
    </section>
{% endblock fos_user_content %}

{% 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 javascripts %}
    {{ parent() }}

    {% javascripts filter='?uglifyjs2'
    '@JotunheimrUserBundle/Resources/public/js/register.js' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

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

    {% stylesheets filter='?uglifycss'
    '@JotunheimrUserBundle/Resources/public/css/font-awesome/css/font-awesome.min.css'
    '@JotunheimrUserBundle/Resources/public/css/layout.css' %}
    <link rel="stylesheet" media="screen" href="{{ asset_url }}"/>
    {% endstylesheets %}
{% endblock %}
