{% extends "Master/MicroTemplate.html.twig" %}

{% block body %}
    {{ parent() }}
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-6">
                <form action="{{ asset('') }}" method="post" class="form">
                    <div class="card mt-4">
                        <a href="{{ asset('') }}">
                            <img class="card-img-top" src="{{ asset('Dinamic/Assets/Images/horizontal-logo.png') }}" alt="FacturaScripts"/>
                        </a>
                        <div class="card-body">
                            <p class="card-text text-center">{{ i18n.trans('login-text') }}</p>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-user fa-fw" aria-hidden="true"></i>
                                        </span>
                                    </span>
                                    <input type="text" name="fsNick" class="form-control" maxlength="50" placeholder="{{ i18n.trans('user') }}"
                                           required="" autocomplete="off" autofocus=""/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-key fa-fw" aria-hidden="true"></i>
                                        </span>
                                    </span>
                                    <input type="password" name="fsPassword" class="form-control" maxlength="50" placeholder="{{ i18n.trans('password') }}"
                                           required="" autocomplete="off"/>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-block btn-primary">
                                {{ i18n.trans('login') }}
                            </button>
                        </div>
                        <div class="card-footer text-center">
                            <a href="#" data-toggle="modal" data-target="#newPasswordModal">
                                {{ i18n.trans('i-forgot-password') }}
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row justify-content-md-center">
            <div class="col-md-6">
                <div class="card mt-4 text-white bg-secondary">
                    <div class="card-header">FacturaScripts</div>
                    <div class="card-body">
                        <p class="card-text">
                            FacturaScripts es un software libre de contabilidad, facturación y CRM.
                            No dudes en consultar la web oficial o las cuentas de facebook, twitter o youtube.
                        </p>
                        <a href="https://facturascripts.com" class="badge badge-light">facturascripts.com</a>
                        <a href="https://www.facebook.com/facturascripts/" class="badge badge-light">facebook</a>
                        <a href="https://twitter.com/facturascripts" class="badge badge-light">twitter</a>
                        <a href="https://www.youtube.com/channel/UCtsptMQYpW2wJZkvak6NYng" class="badge badge-light">youtube</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form action="{{ asset('') }}" method="post" class="form">
        <div class="modal fade" id="newPasswordModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ i18n.trans('new-password') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-user fa-fw" aria-hidden="true"></i>
                                    </span>
                                </span>
                                <input type="text" name="fsNewUserPasswd" class="form-control" maxlength="50" placeholder="{{ i18n.trans('user') }}"
                                       required="" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-key fa-fw" aria-hidden="true"></i>
                                    </span>
                                </span>
                                <input type="password" name="fsNewPasswd" class="form-control" maxlength="50" placeholder="{{ i18n.trans('new-password') }}"
                                       required="" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-eye fa-fw" aria-hidden="true"></i>
                                    </span>
                                </span>
                                <input type="password" name="fsNewPasswd2" class="form-control" maxlength="50" placeholder="{{ i18n.trans('repeat-new-password') }}"
                                       required="" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <b>{{ i18n.trans('database') }}</b>
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-database fa-fw" aria-hidden="true"></i>
                                    </span>
                                </span>
                                <input type="password" name="fsDbPasswd" class="form-control" placeholder="{{ i18n.trans('db-password') }}"
                                       autocomplete="off"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.trans('cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ i18n.trans('save') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}

{% block css %}
    {{ parent() }}
    <style>
        body {
            background-color: #333A40;
        }
    </style>
{% endblock %}