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

{% block title %}{{ __('login.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>
                        <div class="h2 text-body" title="{{ date.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ date.getTimestamp() }}">%c</div>
                        <small>{{ date.format(__('Y-m-d')) }}</small>
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        <div class="row mb-5">
            <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4">
                <div class="card {{ m.type_bg_class() }}">
                    <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 {{ m.type_text_class() }}">
                                        {{ 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 {{ m.type_text_class() }}">
                                        <i class="bi bi-key"></i>
                                    </span>
                                    <input
                                        class="form-control" id="form_password" type="password"
                                        name="password" value="" placeholder="{{ __('Password') }}" autocomplete="current-password"
                                    >
                                </div>
                            </div>

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

                            {%  if config('oauth') is not empty %}
                                <div class="row">
                                    <div class="mb-3 btn-group">
                                        {% 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>
                                </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') %}
                    {% if config('enable_password') %}
                        <p>{{ __('Please sign up, if you want to help us!') }}</p>
                        <a href="{{ url('register') }}" class="btn btn-primary">{{ __('Register') }} &raquo;</a>
                    {% else %}
                        <p>{{ __('Registration is only available via external login.') }}</p>
                    {% endif %}
                {% 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-circle') }} {{ __('Please note: You have to activate cookies!') }}
            </div>
        </div>
    </div>
{% endblock %}