{% extends "base.html" %}

{% block title %}Login - {{ hub_name }}{% endblock %}

{% block content %}
<div class="columns is-centered">
    <div class="column is-4">
        <div class="box">
            <div class="has-text-centered mb-5">
                <figure class="image is-96x96" style="margin: 0 auto 1rem auto;">
                    <img src="{{ hub_logo }}"
                         alt="{{ hub_name }}"
                         style="border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,0.15); border: 3px solid hsl(171, 100%, 41%);">
                </figure>
                <h1 class="title is-4">{{ hub_name }}</h1>
                {% if hub_description %}
                <p class="subtitle is-6 has-text-grey">{{ hub_description }}</p>
                {% endif %}
            </div>
            
            {% if error %}
            <div class="notification is-danger is-light">
                <button class="delete" onclick="this.parentElement.remove()"></button>
                {{ error }}
            </div>
            {% endif %}
            
            <form method="post" action="/dashboard/login">
                <input type="hidden" name="next_url" value="{{ next_url }}">
                
                <div class="field">
                    <label class="label">Username</label>
                    <div class="control has-icons-left">
                        <input class="input" type="text" name="username" 
                               placeholder="Enter your username" required autofocus>
                        <span class="icon is-small is-left">
                            <i class="fas fa-user"></i>
                        </span>
                    </div>
                </div>
                
                <div class="field">
                    <label class="label">Password</label>
                    <div class="control has-icons-left">
                        <input class="input" type="password" name="password" 
                               placeholder="Enter your password" required>
                        <span class="icon is-small is-left">
                            <i class="fas fa-lock"></i>
                        </span>
                    </div>
                </div>
                
                <div class="field">
                    <div class="control">
                        <button class="button is-primary is-fullwidth" type="submit">
                            <i class="fas fa-sign-in-alt mr-2"></i>
                            Login
                        </button>
                    </div>
                </div>
            </form>
            
            <hr>
            
            <div class="has-text-centered">
                <small class="has-text-grey">
                    Use your hub credentials to login.
                </small>
                <br>
                <small>
                    Don't have an account? <a href="/dashboard/register">Register here</a>
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}