{% extends 'base.html.twig' %}

{% block title %}
    Accueil
{% endblock %}

{% block body %}
    <style>
        paper-card {
            width: 50%;
            margin: 0 25%;
            padding: 20px;
            text-align: center;
        }

        h1 {
            margin-bottom: 30px;
        }

        paper-button {
            margin-top: 20px;
            background-color: var(--alba-color-error);
            color: var(--alba-color-on-error);
        }
    </style>

    <app-header reveals>
        <app-toolbar>
            <div main-title>Tarificateur - ALBA</div>

            <paper-progress value="100" bottom-item></paper-progress>
        </app-toolbar>
    </app-header>
    <div class="layout vertical wrap container">
        <div class="flex">
            <paper-card>
                <h1>Bienvenue sur le tarificateur Alba</h1>

                <h3>Veuillez-vous connecter</h3>

                <a href="{{ path('accueil_login') }}">
                    <paper-button>Connexion</paper-button>
                </a>
            </paper-card>
        </div>
    </div>
{% endblock %}