@using Blazorise.Components;
@using System.ComponentModel.DataAnnotations;

<head>
    <link rel="stylesheet" href="css/composants/authentification/FormulaireConnexion.css" />
</head>

<div class="connexion-container">

    <h1 class="title-spacing"> Se connecter</h1>


    <Validations @ref="Validations" Mode="ValidationMode.Manual" Model="Requete">

        <div class="field-container">
            <Validation>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is2">Pseudo</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is10">
                        <TextEdit Placeholder="Entrez votre pseudo" @bind-Text="@Requete.Pseudo">
                            <Feedback>
                                <ValidationError />
                            </Feedback>
                        </TextEdit>
                    </FieldBody>
                </Field>
            </Validation>
        </div>

        <div class="field-container">
            <Validation>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.Is2">Mot de passe</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is10">
                        <div class="input-group">
                            <TextEdit @bind-Text="@Requete.MotDePasse"
                                      Type="@(showPassword ? "text" : "password")"
                                      Class="form-control" Placeholder="Mot De Passe"/>

                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" @onclick="ToggleShowPassword">
                                    <i class="@(showPassword ? "fa fa-eye-slash" : "fa fa-eye")"></i>
                                </button>
                            </span>
                        </div>

                    </FieldBody>
                </Field>
            </Validation>
        </div>

        <div class="btn-container">
            <Button Class="btn-se-connecter" Clicked="@OnSubmit">
                <Icon Name="Blazorise.Icons.FontAwesome.FontAwesomeIcons.Seedling" />
                Se connecter</Button>
            
            <Button Class="btn-s-inscrire" Clicked="@RedirectionInscription">
                <Icon Name="Blazorise.Icons.FontAwesome.FontAwesomeIcons.CreditCard" />
                S'inscrire</Button>
        </div>


        <label class="text-danger">@Erreur</label>

    </Validations>

</div>
