{% extends "account.twig" %}

{% set view_title = 'Invitation' %}
{% set view_icon = 'user-check' %}
{% set view_description = 'Finnish your account registration by choosing a password.' %}

{% block view_content %}

    {% if not view.success %}
        <div class="alert alert-danger" role="alert">{{ view.message }}</div>
        <a href='/login' class='btn btn-primary'>Back to login</a>
    {% else %}
        <h4 class="pb-4">Please fill with your details</h4>
        <form>
            <input name='token' id='token' type='hidden' value='{{ view.token }}'/>
            <div class="input-group">
                <div class="input-group-append">
                    <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                </div>
                <input id="username" name="username" placeholder="Username" class="form-control" type="text" maxlength="32" value='{{ view.invited_user.name }}' disabled>
            </div>
            <div class="input-group mt-3">
            <div class="input-group-append">
                <span class="input-group-text"><i class="fas fa-at"></i></span>
            </div>
                <input type="email" name='email' id='email' class="form-control" placeholder="Email" maxlength="64" value='{{ view.invited_user.email }}' disabled>
            </div>
            <div class="input-group mt-3">
            <div class="input-group-append">
                <span class="input-group-text"><i class="fas fa-key"></i></span>
            </div>
                <input type="password" autocomplete='new-password' name='password' id='password' class="form-control" placeholder="Password">
            </div>
            <div class="input-group mt-3">
            <div class="input-group-append">
                <span class="input-group-text"><i class="fas fa-key"></i></span>
            </div>
                <input type="password" autocomplete='new-password' name='confirmPassword' id='confirmPassword' class="form-control" placeholder="Confirm Password">
            </div>
            <div class="input-group mt-3">
            <button type="button" class="btn btn-success" id='btnAcceptInvite'>Submit</button>
            </div>
        </form>
    {% endif %}

{% endblock %}