{% extends "public/base.html" %}
{% block title %}Client login — {{ site.name }}{% endblock %}

{% block content %}
<div class="wrap auth">
  <div class="form-panel">
    <h2>Client login</h2>
    <p class="muted" style="font-size:15px;margin-bottom:24px">Track your project, pay invoices and raise support tickets.</p>
    <form method="post">{% csrf_token %}
      {% if form.errors %}<div class="notice" style="border-color:var(--warn);color:var(--warn);background:rgba(255,107,90,.07)">
        That email and password don't match an account. Check both and try again.</div>{% endif %}
      <div class="field"><label for="{{ form.username.id_for_label }}">Email</label><input type="text" name="username" id="{{ form.username.id_for_label }}" value="{{ form.username.value|default:'' }}" autocomplete="username" autocapitalize="none" placeholder="you@company.com"></div>
      <div class="field"><label for="{{ form.password.id_for_label }}">Password</label><input type="password" name="password" id="{{ form.password.id_for_label }}" autocomplete="current-password" placeholder="••••••••"></div>
      <button class="btn btn-primary btn-block">Log in</button>
    </form>
    <p class="alt"><a href="{% url 'password_reset' %}">Forgot your password?</a></p>
    <p class="alt">No account yet? <a href="{% url 'register' %}">Create one</a></p>
  </div>
</div>
{% endblock %}