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

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

{% block content %}
    <div class="col-md-12">
        <div class="row mb-3 mt-5">
            <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 mb-3">
            {% 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 d-none d-sm-block">
                        <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 mb-5">
            <div class="col-sm-6 offset-sm-6 col-md-4 offset-md-4">
                <div class="card bg-dark">
                    <div class="card-body">
                        {% include 'layouts/parts/messages.twig' %}

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

                            <div class="mb-3">
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text text-light">
                                        <i class="bi bi-key"></i>
                                    </span>
                                    <input
                                        class="form-control" id="form_password"
                                        type="password" name="password" value="" placeholder="{{ __('Password') }}"
                                    >
                                </div>
                            </div>

                            <div class="mb-3 text-center">
                                <button class="btn btn-primary btn-lg btn-block" type="submit" name="submit">
                                    {{ __('Login') }}
                                </button>
                            </div>

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

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

        <div class="row mb-5">
            <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>
                    <a href="{{ url('register') }}" class="btn btn-primary">{{ __('Register') }} &raquo;</a>
                {% 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>
                <a href="{{ url('angeltypes', {'action': 'about'}) }}" class="btn btn-primary">
                    {{ __('Teams/Job description') }} &raquo;
                </a>
            </div>

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