{% extends "layouts/app.twig" %}
{% import 'macros/base.twig' as m %}

{% block title %}{{ __('Login') }}{% endblock %}

{% block content %}
    <div class="col-md-12">
        <div class="row">
            <div class="col-sm-12 text-center" id="welcome-title">
                <h2>{{ __('Welcome to the %s!', [config('name') ~ m.angel() ~ (config('app_name')|upper) ])|raw }}</h2>
            </div>
        </div>

        <div class="row">
            {% for name,date in {
                (__('Buildup starts')): config('buildup_start'),
                (__('Event starts')): config('event_start'),
                (__('Event ends')): config('event_end'),
                (__('Teardown ends')): config('teardown_end')
            } | filter(date => date) %}
                {% if date > date() %}
                    <div class="col-sm-3 text-center hidden-xs">
                        <h4>{{ name }}</h4>
                        <span class="moment-countdown text-big" data-timestamp="{{ date.getTimestamp }}">%c</span>
                        <small>{{ date.format(__('Y-m-d')) }}</small>
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        <div class="row">
            <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
                <div class="panel panel-primary first">
                    <div class="panel-body">
                        {% include 'layouts/parts/messages.twig' %}

                        <form action="" enctype="multipart/form-data" method="post">
                            {{ csrf() }}
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon input-lg">{{ m.angel }}</span>
                                    <input
                                        class="form-control input-lg"
                                        id="form_nick"
                                        type="text"
                                        name="login"
                                        value=""
                                        placeholder="{{ __('Nick') }}"
                                        autofocus>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon input-lg">{{ m.glyphicon('lock') }}</span>
                                    <input
                                        class="form-control input-lg" id="form_password"
                                        type="password" name="password" value="" placeholder="{{ __('Password') }}"
                                    >
                                </div>
                            </div>

                            <div class="form-group">
                                <button class="btn btn-primary btn-lg btn-block" type="submit" name="submit">
                                    {{ __('Login') }}
                                </button>
                            </div>

                            <div class="form-group btn-group btn-group-justified">
                                {% for type,config in config('oauth') %}
                                    <a href="{{ url('oauth/' ~ type) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} hidden{% endif %}">
                                        {{ __('oauth.login-using-provider', [type|capitalize]) }}
                                    </a>
                                {% endfor %}
                            </div>

                            <div class="text-center">
                                <a href="{{ url('/password/reset') }}" class="">
                                    {{ __('I forgot my password') }}
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 text-center">
                <h2>{{ __('Register') }}</h2>
                {% if has_permission_to('register') and config('registration_enabled') %}
                    <p>{{ __('Please sign up, if you want to help us!') }}</p>
                    <div class="form-group">
                        <a href="{{ url('register') }}" class="btn btn-default">{{ __('Register') }} &raquo;</a>
                    </div>
                {% else %}
                    {{ m.alert(__('Registration is disabled.'), 'danger') }}
                {% endif %}
            </div>

            <div class="col-sm-6 text-center">
                <h2>{{ __('What can I do?') }}</h2>
                <p>{{ __('Please read about the jobs you can do to help us.') }}</p>
                <div class="form-group">
                    <a href="{{ url('angeltypes', {'action': 'about'}) }}" class="btn btn-default">
                        {{ __('Teams/Job description') }} &raquo;
                    </a>
                </div>
            </div>

            <div class="col-md-12 text-center">
                {{ m.glyphicon('info-sign') }} {{ __('Please note: You have to activate cookies!') }}
            </div>
        </div>
    </div>
{% endblock %}