{% load static %}
{% load i18n %}
{% load inventree_extras %}

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap_3.3.7_css_bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/select2.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-table.css' %}">
<link rel="stylesheet" href="{% static 'css/inventree.css' %}">
<link rel="stylesheet" href="{% static 'fontawesome/css/brands.css' %}">
<link rel="stylesheet" href="{% static 'fontawesome/css/solid.css' %}">

<script type='text/javascript' src="{% static 'fontawesome/js/solid.js' %}"></script>
<script type='text/javascript' src="{% static 'fontawesome/js/brands.js' %}"></script>
<script type='text/javascript' src="{% static 'fontawesome/js/fontawesome.js' %}"></script>

<style>
    .login-error {
        color: #F88;
    }
</style>

<title>
    {% inventree_title %} 
</title>
</head>

<body class='login-screen'>
<!-- 
    Background Image Attribution: https://unsplash.com/photos/Ixvv3YZkd7w
-->
    
<div class='main body-wrapper login-screen'>

        <div class='login-container'>
        <div class="row">
            <div class='container-fluid'>
                <div class='clearfix content-heading login-header'>
                    <img class="pull-left" src="{% static 'img/inventree.png' %}" width="60" height="60"/>
                    <span><h3>{% inventree_title %} </h3></span>
                </div>
                    <hr>

                    <div class='container-fluid'>
                    <form method="post" action=''>
                        {% csrf_token %}

                        {% load crispy_forms_tags %}

                        <div id="div_id_username" class="form-group">
                            <label for="id_username" class="control-label  requiredField">{% trans "Username" %}<span class="asteriskField">*</span></label>
                            <div class="controls ">
                                <div class='input-group'>
                                    <div class='input-group-addon'>
                                        <span class='fas fa-user'></span>
                                    </div>
                                    <input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" class="textinput textInput form-control" required id="id_username" placeholder='{% trans "Enter username" %}'>
                                </div>
                            </div>
                        </div>
                        
                        <div id="div_id_password" class="form-group">
                            <label for="id_password" class="control-label requiredField">{% trans "Password" %}<span class="asteriskField">*</span></label>
                            <div class='controls'>
                                <div class="input-group">
                                    <div class='input-group-addon'>
                                        <span class='fas fa-key'></span>
                                    </div>
                                    <input type="password" name="password" autocomplete="current-password" class="textinput textInput form-control" required id="id_password" placeholder='{% trans "Enter password" %}'>
                                </div>
                            </div>
                        </div>
                        
                        {% if form.errors %}
                        <div class='login-error'>
                            <b>{% trans "Username / password combination is incorrect" %}</b>
                        </div>
                        {% endif %}
        
                        <hr>
                        
                        <button class='pull-right btn btn-primary login-button' type="submit">{% trans "Login" %}</button>

                    </form>

                    {% if email_configured %}
                    <hr><br>
                    <p>{% trans "Forgotten your password?" %} - <a href='{% url "password_reset" %}'>{% trans "Click here to reset" %}</a></p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

</div>

</body>
</html>