{% extends "index.html" %}
{% block title %}Logowanie{% endblock %}

{% block content %}
<div class="login--wrapper">
    <span>
    <div class="container header__container">
        <div class="row">
            <div class="col s12 text--primary">
                <h5 class="card-title">Witaj w InQuire</h5>
            </div>
        </div>
    </div>
    <div class="container body__container">
        <div class="row">
            <div class="col s12">
                <div class="card card__login color--primary white-text">
                    <div class="card-content">
                        <h5 class="card-title card-title__login card-title__body">Logowanie</h5>

                        <div class="main__row row">
                            <form class="col s12" action="/login" method="POST">
                                <div class="row">
                                    <div class="input-field col s12">
                                        <input id="name" name="name" type="text" class="validate">
                                        <label for="name">Nazwa użytkownika</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="input-field col s12">
                                        <input id="password" type="password" name="password" class="validate">
                                        <label for="password">Hasło</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s12">
                                        <button class="btn waves-effect waves-light" id="btn--login" type="submit" name="action">Zaloguj</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s12">
                                            {% with messages = get_flashed_messages() %}
                                            {% if messages %}
                                                {% for message in messages %}
                                                <p style="color: red">{{ message }}</p>
                                                {% endfor %}
                                            {% endif %}
                                            {% endwith %}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s12">
                                        <p class="forgot__text">Zapomniałeś hasła?</p>
                                        <p class="forgot__text">Załóż konto!</p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </span>
</div>
{% endblock %}

{%block script%}
<script>
    $('#btn-send').on('click', () => {
        alertify.notify('Pomyślnie wysłano wiadomość', 'success', 3);
    });
    $('.btn-thumb-up').on('click', () => {
        alertify.notify('Pomyślnie oceniono pytanie', 'success', 3);
    })
</script>
{%endblock%}