<html>
<head>

<title>Stashr - {{ title }}</title>

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/stashr.css') }}">

<link href="https://cdn.jsdelivr.net/npm/vue-toast-notification/dist/theme-sugar.css" rel="stylesheet">

<link rel="manifest" href="{{ url_for('static', filename='manifest/manifest.json') }}">

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='assets/stashr-152.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='assets/stashr-180.png') }}">
<link rel="apple-touch-icon" sizes="167x167" href="{{ url_for('static', filename='assets/stashr-167.png') }}">
<meta name="apple-mobile-web-app-title" content="Stashr">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

<script src="{{ url_for('static', filename='js/stashr.js') }}"></script>
<script src="{{ url_for('static', filename='js/vue.dev.js') }}"></script>

</head>
<body class="text-center login">

<main class="stashr-signin">
    <div class="card bg-primary px-3 shadow">
        <form action="{{ url_for('login_page') }}" method="post" id="login_form">
            {{ login_form.csrf_token }}
            <img class="stashr-logo" src="{{ url_for('static', filename='assets/stashr.svg') }}" w="170" h="170">

            {% if login_form.errors %}
            <div class="notification bg-danger rounded m-3 text-white" role="alert" id='error_container'>
                {% for field_name, field_errors in login_form.errors|dictsort if field_errors %}
                <ul>
                    {% for error in field_errors %}
					<li>{{ error }}</li>
					{% endfor %}
                </ul>
                {% endfor %}
            </div>
            {% endif %}
            <div class="form-floating">
                {{ login_form.username(class_='input form-control', type='username', placeholder='Username') }}
                {{ login_form.username.label }}
            </div>
            <div class="form-floating">
                {{ login_form.password(class_='input form-control', type='password', placeholder='Password') }}
                {{ login_form.password.label }}
            </div>

            <div class="checkbox mb-3">
                <label class="text-white">
                    {{ login_form.remember_me() }} Remember Me
                </label>
            </div>

            {{ login_form.login_button(class_='w-100 btn btn-lg btn-success shadow') }}
            <a class="text-white" href="#">Forgot your password?</a>

        </form>
    </div>
</main>

<script type="text/javascript">

Vue.use(VueToast);

{% with flashes = get_flashed_messages(with_categories=true) %}
    {% if flashes %}
        {% for category, message in flashes %}
            stashrToast('{{ message }}', '{{ category }}');
        {% endfor %}
    {% endif %}
{% endwith %}
</script>

</body>
</html>